LiSA Social Commerce
Developers
Developers
  • Developers
  • Guides
    • Integration Guide
      • Web Integration
      • App Integration
        • Android
          • Communication
          • Storage
          • File Downloads
          • Theming
        • iOS
          • Communication
          • Storage
          • File Downloads
          • Theming
        • React Native
          • Communication
          • Storage
          • File Downloads
          • Theming
        • Picture in Picture
      • Entrypoints
        • Query Parameter (v1)
    • Player Communication
      • Message API Reference
        • App
          • App — Heartbeat
          • App — Message Acknowledge
          • App — Message Error
          • App — Listen
        • CTA
          • CTA — Link in Comments
          • CTA — Sponsor Badge
        • Cart — View Cart
        • Comments — Join
        • Media
          • Media — Complete
          • Media — Pause
          • Media — Progress
          • Media — Resume
        • Media Item
          • Media Item — Emoji
          • Media Item — Impression
        • Player
          • Player — Dismiss
          • Player — Native Picture-in-Picture (PiP)
          • Player — Pass Visual Viewport
          • Player — Request Visual Viewport
          • Player — UI Transition
        • Products
          • Products — Add to Cart
          • Products — Add to Wishlist
          • Products — Click
          • Products — Close Product List
          • Products — Emoji
          • Products — Emoji State Update
          • Products — Impression
          • Products — Open Product List
        • Stickers
          • Stickers — Activate
          • Stickers — Click
          • Stickers — Expire
          • Stickers — Impression
          • Stickers — Publish
          • Stickers — Unlock
          • Stickers — Unpublish
          • Stickers — Update
          • Stickers — Voucher Claim
        • Visitor — Pass User Context
        • Shared Legacy Message Properties
    • Products
      • Product Update Notification API
  • Widgets
    • Content Hub
    • Quick Start Guide
    • Configuration options
      • Autoplay
      • Channel
      • Client
      • Data
      • Debug
      • Host node
      • Layout
      • Language
      • On
      • Player
      • Query string
      • Quick view
      • Sections
      • Store
      • Template
    • API reference
      • Library API reference
      • Player API reference
      • Quick View API reference
    • Promo Widget
      • Quick Start Guide
      • Configuration options
        • Autoplay
        • Channel
        • Countdown (deprecated)
        • Enabled
        • Image modifier
        • Lead time
        • Live (deprecated)
        • Position
        • Replay (deprecated)
        • Show ID
        • URL
  • Media Player Introduction
    • Picture-in-Picture Mode
  • Analytics
  • REST API
    • Authentication
    • Rate limits
    • Response status and error codes
    • API Documentation
Powered by GitBook
On this page
  • Host element
  • LiSA Content Hub embed code
  • Product detail page quick view
  1. Widgets

Quick Start Guide

Integrating the LiSA Content Hub to your storefront or website is plain simple. All you need to do is provide a content page with a host element, its query selector and integrate the configurable LiSA Content Hub embed code.

Host element

The host element acts as a container where all the LiSA Content Hub markup will be injected automatically. The following code block uses an HTMLDivElement (

) with a unique identifier lisa-library.

You can replace this with whatever host element you want. Please make sure to provide a query selector with your configuration, in order for LiSA Content Hub to find your host element within the document.

<html>
  <head> <!-- --> </head>
  <body>
    <!-- other elements ... -->

    <!-- LiSA Library host element -->
    <div id="lisa-library"></div>

    <!-- even more elements ... -->
  </body>
</html>

LiSA Content Hub embed code

First, we do a quick check, whether the LiSA Content Hub is available already. If not, the LiSA Web SDK is loaded from the LiSA CDN and added to the document.

After that you can push as many configurations into the library as desired.

(function() {
  window.LiSA = window.LiSA || {};
  if (!window.LiSA.library) {
    window.LiSA.library = { configs: [] };
    var scriptNode = document.createElement('script');
    scriptNode.setAttribute('defer', 'defer');
    scriptNode.src = 'https://static.lisa-cdn.net/sdks/lisa-embed-library/latest/lisa-embed-library.latest.js';
    document.body.appendChild(scriptNode);
  }

  window.LiSA.library.configs.push({
    client: '[YOUR_CLIENT_IDENTIFIER]', // todo replace with your individual client identifier
    format: {
      asset: 'landscape',
    },
    hostNode: '#lisa-library',
  });
})();

Note: this is just a basic example for a single library configuration. Please make sure, to replace the client placeholder with your individual client identifier.

Product detail page quick view

(function() {
  window.LiSA = window.LiSA || {};
  if (!window.LiSA.library) {
    window.LiSA.library = { configs: [] };
    var scriptNode = document.createElement('script');
    scriptNode.setAttribute('defer', 'defer');
    scriptNode.src = 'https://static.lisa-cdn.net/sdks/lisa-embed-library/latest/lisa-embed-library.latest.js';
    document.body.appendChild(scriptNode);
  }

  window.LiSA.library.configs.push({
    client: '[YOUR_CLIENT_IDENTIFIER]', // todo replace with your individual client identifier
    hostNode: '#lisa-library',
    on: {
      ready: (library) => {
        library.player.on(library.player.Event.PRODUCT_VIEW, ({ action }) => {
          library.quickView.show(action);
        });
      },
    },
  });
})();

The example registers an event listener to the LiSA player's PRODUCT_VIEW event. This event handler uses argument deconstruction to extract the URL (or custom command value) from the event's parameters and opens the product URL in the quick view component.

Please refer to API reference for more information on how to customize the behaviour of your library and player.

For more information on the variaty of configuration options LiSA Content Hub provides, proceed to Configuration options .

PreviousContent HubNextConfiguration options

Last updated 1 year ago