> For the complete documentation index, see [llms.txt](https://docs.hello-lisa.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.hello-lisa.com/developers/widgets/promo-widget/quick-start-guide.md).

# 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.

{% hint style="info" %}
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.
{% endhint %}

### 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

```javascript
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.


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.hello-lisa.com/developers/widgets/promo-widget/quick-start-guide.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.