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
    • Appearance
      • Markup
      • Responsive design
    • 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
    • Customisations
      • Template
      • Bring your own template
      • Type definitions
    • Examples
    • Type definitions
      • Asset
      • Product
      • Other
    • 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
  • Getting Started
  • How it works
  • Example usage
  1. Widgets
  2. Promo Widget

Quick Start Guide

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

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.

PreviousPromo WidgetNextConfiguration options

Last updated 1 year ago