Quick Start Guide

5min
Getting Started
Sign in to your LiSA dashboard, navigate to the Promotion section of the show you want to promote in the Promo Widget and set it to be promoted in the Promo Widget.
Automatic Show Selection
If you don't want a specific show to be promoted in the Promo widget, you can let the automatic show selection pick a show for you. In that case, either a show that is currently live or the next upcoming show will be promoted in the widget.
Please see Configuration options﻿ for more information on how to customize the behaviour of the Promo Widget.
Embed code
The Promotion section of the LiSA Dashboard presents you with an embed code, that you can copy and insert on any page where you want to include the Promo Widget.
If you want to include the Promo widget on your entire storefront or website, or on just a selected subset of pages based on other rules, we recommend to include this script either globally on your website or using a Tag Manager, like Google Tag Manager or Tealium.
How it works
Embedded into your storefront the Promo Widget executes frequent API calls in a background process to determine whether a show matches the rules for being promoted in the widget, or if the state of the promoted show has changed.
If a show has been selected for promotion, the Promo Widget will automaticall appear. The background processes continue to frequently detect changes of the show's state, in order to execute a visual switch, e.g. from the countdown view to the live experience including preview clips from the live show.
When the visitor clicks the Promo Widget they are redirected to your pre-defined LiSA live shopping content page where the promoted show will play automatically in full user experience.
Visitors may dismiss the Promo Widget by clicking the close icon in the top right corner. In that case, the Session Storage key lisa.alert.dismissed is set with the promoted shows's id and state as value. When the visitor reloads or navigates your website during an active session, the widget will not appear again until either a new show is promoted or the state of the show has changed, e.g. from countdown to live.
Example usage
JS
window.LiSA = window.LiSA || {};
if (!window.LiSA.sdk) {
  window.LiSA.sdk = { config: {} };
  var scriptNode = document.createElement('script');
  scriptNode.setAttribute('defer', 'defer');
  scriptNode.src = 'https://static.lisa-cdn.net/sdks/lisa-web-sdk/latest/lisa-web-sdk.latest.js';
  document.body.appendChild(scriptNode);
}

window.LiSA.sdk.config = {
  alert: {
    enabled: true,
    leadTime: 60 * 10,  // 10 minutes
    url: 'https://live.your-storefront.com',
  },
  client: '[YOUR_CLIENT_IDENTIFIER]',
  localisation: {
    alertCountdownComplete: 'Starting soon',
    alertCountdownCaption: 'Going live in',
    alertLiveCaption: 'Now live',
    alertReplayCaption: 'Watch again',
  }
};
window.LiSA = window.LiSA || {};
if (!window.LiSA.sdk) {
  window.LiSA.sdk = { config: {} };
  var scriptNode = document.createElement('script');
  scriptNode.setAttribute('defer', 'defer');
  scriptNode.src = 'https://static.lisa-cdn.net/sdks/lisa-web-sdk/latest/lisa-web-sdk.latest.js';
  document.body.appendChild(scriptNode);
}

window.LiSA.sdk.config = {
  alert: {
    enabled: true,
    leadTime: 60 * 10,  // 10 minutes
    url: 'https://live.your-storefront.com',
  },
  client: '[YOUR_CLIENT_IDENTIFIER]',
  localisation: {
    alertCountdownComplete: 'Starting soon',
    alertCountdownCaption: 'Going live in',
    alertLiveCaption: 'Now live',
    alertReplayCaption: 'Watch again',
  }
};
﻿
Please see Configuration options﻿ for more information on how to customize the behaviour of the Promo Widget.
Updated 25 Mar 2024
Did this page help you?
Promo Widget
Configuration options