# Welcome

{% content-ref url="/spaces/qGvATEnTpT3ePnUWakRC" %}
[Developers](https://docs.hello-lisa.com/developers/)
{% endcontent-ref %}

{% content-ref url="/spaces/YzEDVmNHt4fs8SIPnMFo" %}
[Widgets](https://docs.hello-lisa.com/widgets/)
{% endcontent-ref %}

{% content-ref url="/spaces/IuvJhMpBRtg8rAPmcXbV" %}
[References](https://docs.hello-lisa.com/references/)
{% endcontent-ref %}


# Developers

Explore integration guides, detailed API docs, and best practices to build, customize, and optimize your use of the platform with ease.


# Theming

{% hint style="warning" %}
**Documentation Update in Progress**

We are currently revisiting and updating this section of our documentation to ensure it provides the most accurate and helpful information. Some content may be incomplete or outdated during this process.

Thank you for your patience! If you have any immediate questions, please don’t hesitate to contact our support team.
{% endhint %}

<table data-view="cards"><thead><tr><th align="center"></th></tr></thead><tbody><tr><td align="center"><a href="/developers/guides/theming/custom-fonts">Custom Fonts</a></td></tr></tbody></table>


# Custom Fonts

To allow the LiSA Player to fetch and use the font files served from your host, you’ll need to **have the font‐serving host send the proper CORS header** so that the browser actually permits the cross‐origin fetch.

***

### Enable CORS on the font host

Even with CSP allowing the LiSA Player domain, the browser will still refuse the request unless the font server responds with:

```arduino
Access-Control-Allow-Origin: https://player.hello-lisa.com
```

(or a wildcard `*` if you’re OK with any origin).

So on the font-serving host's web server configuration (Apache, nginx, CDN, etc.), make sure requests for fonts (e.g. \``*.woff` or `*.woff2`) return the header.&#x20;

{% hint style="danger" %}
**Deprecation Notice:** Support for account-specific player domains will be discontinued soon.\
To ensure uninterrupted service, please add **both** of the following to your allowlist:

* `https://player.hello-lisa.com`
* `https://{clientId}.loveslisa.tech`&#x20;
  {% endhint %}

{% hint style="warning" %}
**Necessary adjustments:**

Please ensure to replace  `{clientId}` with your unique client identifier, provided during account setup.
{% endhint %}

***

#### nginx

Define a `map` at http-scope to turn the incoming `$http_origin` into itself if it’s allowed, or into an empty string otherwise:

```nginx
map $http_origin $cors_allow_origin {
    default                          "";
    "https://player.hello-lisa.com"  $http_origin;
    "https://{clientId}.loveslisa.tech"  $http_origin;
}
```

In your font‐serving `location` block, add the header only when `$cors_allow_origin` is non-empty:

```nginx
server {
    # … your server config …

    location ~* \.(?:woff2?|ttf|otf)$ {
        # only echo a CORS header if $cors_allow_origin was set
        if ($cors_allow_origin != "") {
            add_header Access-Control-Allow-Origin $cors_allow_origin;
            add_header Access-Control-Allow-Methods "GET, OPTIONS";
            add_header Access-Control-Allow-Headers "Origin, Accept, Range";
        }

        # standard font‐serving directives
        expires 1M;
        add_header Cache-Control "public";
        try_files $uri =404;
    }
}
```

This way, requests whose `Origin` is in your map get the header; all others get none.

***

#### **Apache (httpd)** (using `SetEnvIf` and `mod_headers`)

Define which origins you allow:

```apacheconf
# in your site’s <VirtualHost> or server config
<IfModule mod_setenvif.c>
    # capture allowed origins
    SetEnvIf Origin "^(https://player\.hello-lisa\.com|https://{clientId}\.loveslisa\.tech)$" CORS_ALLOW_ORIGIN=$0
</IfModule>

```

Then use `mod_headers` to echo it back:

```apacheconf
<IfModule mod_headers.c>
    Header always set Access-Control-Allow-Origin "%{CORS_ALLOW_ORIGIN}e" env=CORS_ALLOW_ORIGIN
    Header always set Access-Control-Allow-Methods "GET, OPTIONS" env=CORS_ALLOW_ORIGIN
    Header always set Access-Control-Allow-Headers "Origin, Accept, Range" env=CORS_ALLOW_ORIGIN
</IfModule>
```

Only requests whose `Origin` matches your regex will get the header.

***

#### Express.js (Node.js)

If you’re using an Express app, you can make a small middleware:

```typescript
const whitelist = [
  // Other whitelisted URLs
  "https://player.hello-lisa.com",
  "https://{clientId}.loveslisa.tech",
];

app.use((req, res, next) => {
  const origin = req.get("Origin");
  if (whitelist.includes(origin)) {
    res.set("Access-Control-Allow-Origin", origin);
    res.set("Access-Control-Allow-Methods", "GET, OPTIONS");
    res.set("Access-Control-Allow-Headers", "Origin,Accept,Range");
  }
  // Handle preflight
  if (req.method === "OPTIONS") {
    return res.sendStatus(204);
  }
  next();
});

```

***

### **Key points**

* **Do not** use `*` if you need to support credentialed requests (cookies, HTTP auth).
* Always **echo** the incoming origin rather than hard-coding more than one in the header.
* Remember to also allow the `OPTIONS` preflight with the same logic (or via a global handler).
* Clear caches or restart your server after changes so the new headers take effect.

With one of these techniques in place, you can safely serve your fonts to as many specific domains as you like.


# Theme Options

<table><thead><tr><th valign="top">Name</th><th valign="top">Description</th></tr></thead><tbody><tr><td valign="top">addToCalendarBehavior</td><td valign="top"><p>stringEnum: "custom" "default"</p><p>The distinct behaviour when the add to calendar CTA is clicked.</p><ul><li><code>custom</code> — Custom implementation based on the emitted event.</li><li><code>default</code> — Download the event to the user’s calendar.</li></ul><p>Default value: <code>default</code></p></td></tr><tr><td valign="top">addToCalendarIcon</td><td valign="top"><p>string</p><p>The SVG markup of the icon displayed on the add to calendar CTA.</p><p>If left blank, the default calendar icon is displayed.</p></td></tr><tr><td valign="top">addToCalendarEnabled</td><td valign="top"><p>boolean</p><p>Indicator, whether the add to calendar CTA should be displayed.</p></td></tr><tr><td valign="top">ctaBehavior</td><td valign="top"><p>stringEnum: "clipboard" "modal" "newTab" "newTabWithPipNative" "none" "pip" "pipNative" "pipSpa"</p><p>Determines how a CTA target should be opened. Allowed values are:</p><ul><li><code>clipboard</code> — The CTA target URL/value is copied to clipboard</li><li><code>modal</code> — The CTA target URL/value are rendered in a player internal component</li><li><code>newTab</code> — The CTA target URL is opened a new window</li><li><code>newTabWithPipNative</code> — The CTA target URL is opened a new window with the video following in native PiP — if supported by the viewers OS</li><li><code>none</code> — Event message is sent only</li><li><code>pip</code> — The CTA target URL is loaded in the current page with the media player resuming in sticky minimized state</li><li><code>pipNative</code> — Event message is sent only with the video following in native PiP — if supported by the viewers OS</li><li><code>pipSpa</code> — The CTA target URL is loaded in the current page with the media player resuming in minimized state</li></ul><p>Default value: <code>none</code>.</p></td></tr><tr><td valign="top">emailIcon</td><td valign="top"><p>string</p><p>The SVG markup of the icon displayed on the email CTA.</p><p>If left blank, the default email icon is displayed.</p></td></tr><tr><td valign="top">emailLabel</td><td valign="top"><p>object</p><p>The (multi-language) label of the email field.</p><p>A map of key-value pairs for multi-lingual texts.</p><ul><li>Key is either a lower-cased language code identifier (LCID Locale ID, e.g. <code>en-us</code>) or <code>*</code>, which acts as a fallback, if no language specific value is specified.</li><li>Value is a text in a distinct language.</li></ul></td></tr><tr><td valign="top">badgeIndicatorStyle</td><td valign="top"><p>stringEnum: "gradient" "solid"</p><p>The distinct type of badge indicator.</p></td></tr><tr><td valign="top">carouselCloseCtaLabel</td><td valign="top"><p>object</p><p>The (multi-language) label of the carousel close CTA.</p><p>A map of key-value pairs for multi-lingual texts.</p><ul><li>Key is either a lower-cased language code identifier (LCID Locale ID, e.g. <code>en-us</code>) or <code>*</code>, which acts as a fallback, if no language specific value is specified.</li><li>Value is a text in a distinct language.</li></ul></td></tr><tr><td valign="top">carouselOpenCtaLabel</td><td valign="top"><p>object</p><p>The (multi-language) label of the carousel open CTA.</p><p>A map of key-value pairs for multi-lingual texts.</p><ul><li>Key is either a lower-cased language code identifier (LCID Locale ID, e.g. <code>en-us</code>) or <code>*</code>, which acts as a fallback, if no language specific value is specified.</li><li>Value is a text in a distinct language.</li></ul></td></tr><tr><td valign="top">commentsCreatorAvatarEnabled</td><td valign="top"><p>boolean</p><p>Indicator, whether the creator avatar should be displayed.</p></td></tr><tr><td valign="top">commentsDisclaimerLabel</td><td valign="top"><p>object</p><p>The (multi-language) label of the comments disclaimer.</p><p>A map of key-value pairs for multi-lingual texts.</p><ul><li>Key is either a lower-cased language code identifier (LCID Locale ID, e.g. <code>en-us</code>) or <code>*</code>, which acts as a fallback, if no language specific value is specified.</li><li>Value is a text in a distinct language.</li></ul></td></tr><tr><td valign="top">commentsInputPlaceholderLabel</td><td valign="top"><p>object</p><p>The (multi-language) placeholder label of the comments input field.</p><p>A map of key-value pairs for multi-lingual texts.</p><ul><li>Key is either a lower-cased language code identifier (LCID Locale ID, e.g. <code>en-us</code>) or <code>*</code>, which acts as a fallback, if no language specific value is specified.</li><li>Value is a text in a distinct language.</li></ul></td></tr><tr><td valign="top">commentsJoinCtaLabel</td><td valign="top"><p>object</p><p>The (multi-language) label of the comments join CTA.</p><p>A map of key-value pairs for multi-lingual texts.</p><ul><li>Key is either a lower-cased language code identifier (LCID Locale ID, e.g. <code>en-us</code>) or <code>*</code>, which acts as a fallback, if no language specific value is specified.</li><li>Value is a text in a distinct language.</li></ul></td></tr><tr><td valign="top">commentsJoinPlaceholderLabel</td><td valign="top"><p>object</p><p>The (multi-language) placeholder label of the comments join field.</p><p>A map of key-value pairs for multi-lingual texts.</p><ul><li>Key is either a lower-cased language code identifier (LCID Locale ID, e.g. <code>en-us</code>) or <code>*</code>, which acts as a fallback, if no language specific value is specified.</li><li>Value is a text in a distinct language.</li></ul></td></tr><tr><td valign="top">commentsLinkClickBehavior</td><td valign="top"><p>stringEnum: "clipboard" "modal" "newTab" "newTabWithPipNative" "none" "pip" "pipNative" "pipSpa"</p><p>Determines how a CTA target should be opened. Allowed values are:</p><ul><li><code>clipboard</code> — The CTA target URL/value is copied to clipboard</li><li><code>modal</code> — The CTA target URL/value are rendered in a player internal component</li><li><code>newTab</code> — The CTA target URL is opened a new window</li><li><code>newTabWithPipNative</code> — The CTA target URL is opened a new window with the video following in native PiP — if supported by the viewers OS</li><li><code>none</code> — Event message is sent only</li><li><code>pip</code> — The CTA target URL is loaded in the current page with the media player resuming in sticky minimized state</li><li><code>pipNative</code> — Event message is sent only with the video following in native PiP — if supported by the viewers OS</li><li><code>pipSpa</code> — The CTA target URL is loaded in the current page with the media player resuming in minimized state</li></ul><p>Default value: <code>none</code>.</p></td></tr><tr><td valign="top">commentsNewCommentsLabel</td><td valign="top"><p>object</p><p>The (multi-language) label of the new comments indicator.</p><p>A map of key-value pairs for multi-lingual texts.</p><ul><li>Key is either a lower-cased language code identifier (LCID Locale ID, e.g. <code>en-us</code>) or <code>*</code>, which acts as a fallback, if no language specific value is specified.</li><li>Value is a text in a distinct language.</li></ul></td></tr><tr><td valign="top">commentsOffIcon</td><td valign="top"><p>string</p><p>The SVG markup of the icon displayed when comments are disabled.</p><p>If left blank, the default comments off icon is displayed.</p></td></tr><tr><td valign="top">commentsOnIcon</td><td valign="top"><p>string</p><p>The SVG markup of the icon displayed when comments are enabled.</p><p>If left blank, the default comments on icon is displayed.</p></td></tr><tr><td valign="top">commentsSettingsLabel</td><td valign="top"><p>object</p><p>The (multi-language) label of the comments settings.</p><p>A map of key-value pairs for multi-lingual texts.</p><ul><li>Key is either a lower-cased language code identifier (LCID Locale ID, e.g. <code>en-us</code>) or <code>*</code>, which acts as a fallback, if no language specific value is specified.</li><li>Value is a text in a distinct language.</li></ul></td></tr><tr><td valign="top">commentsSuspendedLabel</td><td valign="top"><p>object</p><p>The (multi-language) label of the comments suspended message.</p><p>A map of key-value pairs for multi-lingual texts.</p><ul><li>Key is either a lower-cased language code identifier (LCID Locale ID, e.g. <code>en-us</code>) or <code>*</code>, which acts as a fallback, if no language specific value is specified.</li><li>Value is a text in a distinct language.</li></ul></td></tr><tr><td valign="top">commentsUsernameLabel</td><td valign="top"><p>object</p><p>The (multi-language) label of the comments username field.</p><p>A map of key-value pairs for multi-lingual texts.</p><ul><li>Key is either a lower-cased language code identifier (LCID Locale ID, e.g. <code>en-us</code>) or <code>*</code>, which acts as a fallback, if no language specific value is specified.</li><li>Value is a text in a distinct language.</li></ul></td></tr><tr><td valign="top">commentsVisitorAvatarEnabled</td><td valign="top"><p>boolean</p><p>Indicator, whether the visitor avatar should be displayed.</p></td></tr><tr><td valign="top">commentsWaitTimeLabel</td><td valign="top"><p>object</p><p>The (multi-language) label of the comments wait time.</p><p>A map of key-value pairs for multi-lingual texts.</p><ul><li>Key is either a lower-cased language code identifier (LCID Locale ID, e.g. <code>en-us</code>) or <code>*</code>, which acts as a fallback, if no language specific value is specified.</li><li>Value is a text in a distinct language.</li></ul></td></tr><tr><td valign="top">creatorAvatarEnabled</td><td valign="top"><p>boolean</p><p>Indicator, whether the creator avatar should be displayed in the player header.</p></td></tr><tr><td valign="top">creatorNameSeparatorLabel</td><td valign="top"><p>object</p><p>The (multi-language) label of the creator name separator.</p><p>A map of key-value pairs for multi-lingual texts.</p><ul><li>Key is either a lower-cased language code identifier (LCID Locale ID, e.g. <code>en-us</code>) or <code>*</code>, which acts as a fallback, if no language specific value is specified.</li><li>Value is a text in a distinct language.</li></ul></td></tr><tr><td valign="top">customStylesheet</td><td valign="top"><p>string</p><p>Custom stylesheet including CSS rules to be applied to the widget or player.</p></td></tr><tr><td valign="top">dateEnforcedLocale</td><td valign="top"><p>string</p><p>The locale code, which determines the date format.</p><p>If left blank, the user agent locale is used.</p></td></tr><tr><td valign="top">dateFormatAbsoluteLabel</td><td valign="top"><p>object</p><p>The (multi-language) label of format in which a date should be displayed.</p><p>Please use placeholders <code>{date}</code> and <code>{time}</code> where the respective values should be displayed. e.g. <code>{date} at {time}</code> could be displayed as <code>Nov 18th at 9pm</code>.</p><p>A map of key-value pairs for multi-lingual texts.</p><ul><li>Key is either a lower-cased language code identifier (LCID Locale ID, e.g. <code>en-us</code>) or <code>*</code>, which acts as a fallback, if no language specific value is specified.</li><li>Value is a text in a distinct language.</li></ul></td></tr><tr><td valign="top">dateFormatDate</td><td valign="top"><p>stringEnum: "MMMM d" "MMM d" "MMMM d, yyyy" "MMM d, yyyy" "MMMM do" "MMM do" "MMMM do, yyyy" "MMM do, yyyy""MM/dd/yyyy" "dd/MM/yyyy" "yyyy-MM-dd"</p><p>The distinct format of the date.</p><ul><li><code>MMMM d</code> — Day and Month, e.g. <code>November 18</code></li><li><code>MMM d</code> — Day and Month (short), e.g. <code>Nov 18</code></li><li><code>MMMM d, yyyy</code> — Day, Month, and Year, e.g. <code>November 18, 1981</code></li><li><code>MMM d, yyyy</code> — Day, Month (short), and Year, e.g. <code>Nov 18, 1981</code></li><li><code>MMMM do</code> — Day with Ordinal and Month, e.g. <code>November 18th</code></li><li><code>MMM do</code> — Day with Ordinal, Month (short), e.g. <code>Nov 18th</code></li><li><code>MMMM do, yyyy</code> — Day with Ordinal, Month, and Year, e.g. <code>November 18th, 1981</code></li><li><code>MMM do, yyyy</code> — Day with Ordinal, Month (short), and Year, e.g. <code>Nov 18th, 1981</code></li><li><code>MM/dd/yyyy</code> — US Format (MM/DD/YYYY), e.g. <code>11/18/1981</code></li><li><code>dd/MM/yyyy</code> — European Format (DD/MM/YYYY), e.g. <code>18/11/1981</code></li><li><code>yyyy-MM-dd</code> — ISO Format (YYYY-MM-DD), e.g. <code>1981-11-18</code></li></ul><p>Default value: <code>MMM d</code></p></td></tr><tr><td valign="top">dateFormatDay</td><td valign="top"><p>stringEnum: "long" "short"</p><p>The distinct format of the weekday.</p><ul><li><code>long</code> — e.g. <code>Sunday</code></li><li><code>short</code> — e.g. <code>Sun</code></li></ul><p>Default value: <code>short</code></p></td></tr><tr><td valign="top">dateFormatRelativeDayUnitLabel</td><td valign="top"><p>object</p><p>The (multi-language) label of the day unit label A map of key-value pairs for multi-lingual texts.</p><ul><li>Key is either a lower-cased language code identifier (LCID Locale ID, e.g. <code>en-us</code>) or <code>*</code>, which acts as a fallback, if no language specific value is specified.</li><li>Value is a text in a distinct language.</li></ul></td></tr><tr><td valign="top">dateFormatRelativeDaysUnitLabel</td><td valign="top"><p>object</p><p>The (multi-language) label of the days unit label A map of key-value pairs for multi-lingual texts.</p><ul><li>Key is either a lower-cased language code identifier (LCID Locale ID, e.g. <code>en-us</code>) or <code>*</code>, which acts as a fallback, if no language specific value is specified.</li><li>Value is a text in a distinct language.</li></ul></td></tr><tr><td valign="top">dateFormatRelativeFutureLabel</td><td valign="top"><p>object</p><p>The (multi-language) label of format in which a relative date should be displayed, if the date is in the future.</p><p>Please use placeholders <code>{unit}</code> and <code>{value}</code> where the respective time value should be displayed. e.g. <code>In {value}{unit}</code> could be displayed as <code>In 4h</code>.</p><p>A map of key-value pairs for multi-lingual texts.</p><ul><li>Key is either a lower-cased language code identifier (LCID Locale ID, e.g. <code>en-us</code>) or <code>*</code>, which acts as a fallback, if no language specific value is specified.</li><li>Value is a text in a distinct language.</li></ul></td></tr><tr><td valign="top">dateFormatRelativeHourUnitLabel</td><td valign="top"><p>object</p><p>The (multi-language) label of the hour unit label A map of key-value pairs for multi-lingual texts.</p><ul><li>Key is either a lower-cased language code identifier (LCID Locale ID, e.g. <code>en-us</code>) or <code>*</code>, which acts as a fallback, if no language specific value is specified.</li><li>Value is a text in a distinct language.</li></ul></td></tr><tr><td valign="top">dateFormatRelativeHoursUnitLabel</td><td valign="top"><p>object</p><p>The (multi-language) label of the hours unit label A map of key-value pairs for multi-lingual texts.</p><ul><li>Key is either a lower-cased language code identifier (LCID Locale ID, e.g. <code>en-us</code>) or <code>*</code>, which acts as a fallback, if no language specific value is specified.</li><li>Value is a text in a distinct language.</li></ul></td></tr><tr><td valign="top">dateFormatRelativeMinuteUnitLabel</td><td valign="top"><p>object</p><p>The (multi-language) label of the minute unit label A map of key-value pairs for multi-lingual texts.</p><ul><li>Key is either a lower-cased language code identifier (LCID Locale ID, e.g. <code>en-us</code>) or <code>*</code>, which acts as a fallback, if no language specific value is specified.</li><li>Value is a text in a distinct language.</li></ul></td></tr><tr><td valign="top">dateFormatRelativeMinutesUnitLabel</td><td valign="top"><p>object</p><p>The (multi-language) label of the minutes unit label A map of key-value pairs for multi-lingual texts.</p><ul><li>Key is either a lower-cased language code identifier (LCID Locale ID, e.g. <code>en-us</code>) or <code>*</code>, which acts as a fallback, if no language specific value is specified.</li><li>Value is a text in a distinct language.</li></ul></td></tr><tr><td valign="top">dateFormatRelativeMonthUnitLabel</td><td valign="top"><p>object</p><p>The (multi-language) label of the month unit label A map of key-value pairs for multi-lingual texts.</p><ul><li>Key is either a lower-cased language code identifier (LCID Locale ID, e.g. <code>en-us</code>) or <code>*</code>, which acts as a fallback, if no language specific value is specified.</li><li>Value is a text in a distinct language.</li></ul></td></tr><tr><td valign="top">dateFormatRelativeMonthsUnitLabel</td><td valign="top"><p>object</p><p>The (multi-language) label of the months unit label A map of key-value pairs for multi-lingual texts.</p><ul><li>Key is either a lower-cased language code identifier (LCID Locale ID, e.g. <code>en-us</code>) or <code>*</code>, which acts as a fallback, if no language specific value is specified.</li><li>Value is a text in a distinct language.</li></ul></td></tr><tr><td valign="top">dateFormatRelativePastLabel</td><td valign="top"><p>object</p><p>The (multi-language) label of format in which a relative date should be displayed, if the date is in the past.</p><p>Please use placeholders <code>{unit}</code> and <code>{value}</code> where the respective time value should be displayed. e.g. <code>{value}{unit} ago</code> could be displayed as <code>30m ago</code>.</p><p>A map of key-value pairs for multi-lingual texts.</p><ul><li>Key is either a lower-cased language code identifier (LCID Locale ID, e.g. <code>en-us</code>) or <code>*</code>, which acts as a fallback, if no language specific value is specified.</li><li>Value is a text in a distinct language.</li></ul></td></tr><tr><td valign="top">dateFormatRelativeYearUnitLabel</td><td valign="top"><p>object</p><p>The (multi-language) label of the year unit label A map of key-value pairs for multi-lingual texts.</p><ul><li>Key is either a lower-cased language code identifier (LCID Locale ID, e.g. <code>en-us</code>) or <code>*</code>, which acts as a fallback, if no language specific value is specified.</li><li>Value is a text in a distinct language.</li></ul></td></tr><tr><td valign="top">dateFormatRelativeYearsUnitLabel</td><td valign="top"><p>object</p><p>The (multi-language) label of the years unit label A map of key-value pairs for multi-lingual texts.</p><ul><li>Key is either a lower-cased language code identifier (LCID Locale ID, e.g. <code>en-us</code>) or <code>*</code>, which acts as a fallback, if no language specific value is specified.</li><li>Value is a text in a distinct language.</li></ul></td></tr><tr><td valign="top">dateFormatTime</td><td valign="top"><p>stringEnum: "12h" "12hm" "24h" "24hm"</p><p>The distinct format of the time.</p><ul><li><code>12h</code> — 12-hour clock, omitting minutes, e.g. <code>9pm</code></li><li><code>12hm</code> — 12-hour clock, including minutes, e.g. <code>9:00pm</code></li><li><code>24h</code> — 24-hour clock, omitting minutes, e.g. <code>21 Uhr</code></li><li><code>24hm</code> — 24-hour clock, including minutes, e.g. <code>21:00 Uhr</code></li></ul><p>Default value: <code>24h</code></p></td></tr><tr><td valign="top">dateFormatTodayLabel</td><td valign="top"><p>object</p><p>The (multi-language) label of format in which a date should be displayed, if the date is today.</p><p>Please use placeholders <code>{day}</code>, <code>{date}</code> and <code>{time}</code> where the respective values should be displayed. e.g. <code>Today at {time}</code> could be displayed as <code>Today at 9pm</code>.</p><p>A map of key-value pairs for multi-lingual texts.</p><ul><li>Key is either a lower-cased language code identifier (LCID Locale ID, e.g. <code>en-us</code>) or <code>*</code>, which acts as a fallback, if no language specific value is specified.</li><li>Value is a text in a distinct language.</li></ul></td></tr><tr><td valign="top">dateFormatTomorrowLabel</td><td valign="top"><p>object</p><p>The (multi-language) label of format in which a date should be displayed, if the date is tomorrow.</p><p>Please use placeholders <code>{day}</code>, <code>{date}</code> and <code>{time}</code> where the respective values should be displayed. e.g. <code>Tomorrow at {time}</code> could be displayed as <code>Tomorrow at 9pm</code>.</p><p>A map of key-value pairs for multi-lingual texts.</p><ul><li>Key is either a lower-cased language code identifier (LCID Locale ID, e.g. <code>en-us</code>) or <code>*</code>, which acts as a fallback, if no language specific value is specified.</li><li>Value is a text in a distinct language.</li></ul></td></tr><tr><td valign="top">dateFormatYesterdayLabel</td><td valign="top"><p>object</p><p>The (multi-language) label of format in which a date should be displayed, if the date was yesterday.</p><p>Please use placeholders <code>{day}</code>, <code>{date}</code> and <code>{time}</code> where the respective values should be displayed. e.g. <code>Yesterday at {time}</code> could be displayed as <code>Yesterday at 9pm</code>.</p><p>A map of key-value pairs for multi-lingual texts.</p><ul><li>Key is either a lower-cased language code identifier (LCID Locale ID, e.g. <code>en-us</code>) or <code>*</code>, which acts as a fallback, if no language specific value is specified.</li><li>Value is a text in a distinct language.</li></ul></td></tr><tr><td valign="top">dateFormatWithinWeekLabel</td><td valign="top"><p>object</p><p>The (multi-language) label of format in which a date should be displayed, if the date is within the next 7 days.</p><p>Please use placeholders <code>{day}</code>, <code>{date}</code> and <code>{time}</code> where the respective values should be displayed. e.g. <code>This {day} at {time}</code> could be displayed as <code>This Saturday at 9pm</code>.</p><p>A map of key-value pairs for multi-lingual texts.</p><ul><li>Key is either a lower-cased language code identifier (LCID Locale ID, e.g. <code>en-us</code>) or <code>*</code>, which acts as a fallback, if no language specific value is specified.</li><li>Value is a text in a distinct language.</li></ul></td></tr><tr><td valign="top">liveIndicatorLabel</td><td valign="top"><p>object</p><p>The (multi-language) label of the live indicator.</p><p>A map of key-value pairs for multi-lingual texts.</p><ul><li>Key is either a lower-cased language code identifier (LCID Locale ID, e.g. <code>en-us</code>) or <code>*</code>, which acts as a fallback, if no language specific value is specified.</li><li>Value is a text in a distinct language.</li></ul></td></tr><tr><td valign="top">liveViewerCounterEnabled</td><td valign="top"><p>boolean</p><p>Indicator, whether the live viewer counter should be displayed.</p></td></tr><tr><td valign="top">livePrimaryControls</td><td valign="top"><p>Array of strings (PrimaryControlType) Items Enum: "cart" "chat" "emoji" "products" "share"</p><p>The primary controls to be displayed in the live player.</p></td></tr><tr><td valign="top">mediaItemEmojiIconOff</td><td valign="top"><p>string</p><p>The SVG markup of the icon displayed when the media item emoji is not selected.</p><p>If left blank, the default heart icon is displayed.</p></td></tr><tr><td valign="top">mediaItemEmojiIconOn</td><td valign="top"><p>string</p><p>The SVG markup of the icon displayed when the media item emoji is selected.</p><p>If left blank, the default heart icon is displayed.</p></td></tr><tr><td valign="top">mediaItemEmojiLabel</td><td valign="top"><p>object</p><p>The (multi-language) label of the media item emoji CTA.</p><p>A map of key-value pairs for multi-lingual texts.</p><ul><li>Key is either a lower-cased language code identifier (LCID Locale ID, e.g. <code>en-us</code>) or <code>*</code>, which acts as a fallback, if no language specific value is specified.</li><li>Value is a text in a distinct language.</li></ul></td></tr><tr><td valign="top">mediaItemInfoCreatorNameEnabled</td><td valign="top"><p>boolean</p><p>Indicator, whether the creator name should be displayed.</p></td></tr><tr><td valign="top">mediaTapToUnmuteIcon</td><td valign="top"><p>string</p><p>The SVG markup of the icon displayed on the tap-to-unmute CTA.</p><p>If left blank, the default speaker icon is displayed.</p></td></tr><tr><td valign="top">mediaTapToUnmuteLabel</td><td valign="top"><p>object</p><p>The (multi-language) label of the tap-to-unmute CTA.</p><p>A map of key-value pairs for multi-lingual texts.</p><ul><li>Key is either a lower-cased language code identifier (LCID Locale ID, e.g. <code>en-us</code>) or <code>*</code>, which acts as a fallback, if no language specific value is specified.</li><li>Value is a text in a distinct language.</li></ul></td></tr><tr><td valign="top">notificationsMaxItems</td><td valign="top"><p>integer &#x3C;int32> [ 1 .. 5 ]</p><p>The maximum number of items to be displayed in the notifications list.</p></td></tr><tr><td valign="top">playerAmbientBackgroundEnabled</td><td valign="top"><p>boolean</p><p>Indicator, whether the player should have an ambient background.</p></td></tr><tr><td valign="top">playerDismissCtaIcon</td><td valign="top"><p>string</p><p>The SVG markup of the icon displayed on the player dismiss CTA.</p><p>If left blank, the default close icon is displayed.</p></td></tr><tr><td valign="top">playerDismissCtaState</td><td valign="top"><p>stringEnum: "disabled" "enabled" "hidden"</p><p>The visibility state of the player dismiss CTA.</p><ul><li><code>disabled</code> — The dismiss CTA is disabled.</li><li><code>enabled</code> — The dismiss CTA is enabled and visible.</li><li><code>hidden</code> — The dismiss CTA is enabled but hidden.</li></ul><p>Default value: <code>disabled</code></p></td></tr><tr><td valign="top">playerOptionsIcon</td><td valign="top"><p>string</p><p>The SVG markup of the icon displayed on the player options CTA.</p><p>If left blank, the default options icon is displayed.</p></td></tr><tr><td valign="top">pollClosedMessage</td><td valign="top"><p>object</p><p>The (multi-language) default message to be displayed, when a poll is closed.</p><p>A map of key-value pairs for multi-lingual texts.</p><ul><li>Key is either a lower-cased language code identifier (LCID Locale ID, e.g. <code>en-us</code>) or <code>*</code>, which acts as a fallback, if no language specific value is specified.</li><li>Value is a text in a distinct language.</li></ul></td></tr><tr><td valign="top">pollResultsMessage</td><td valign="top"><p>object</p><p>The (multi-language) default message to be displayed, when a poll's results are un-disclosed.</p><p>A map of key-value pairs for multi-lingual texts.</p><ul><li>Key is either a lower-cased language code identifier (LCID Locale ID, e.g. <code>en-us</code>) or <code>*</code>, which acts as a fallback, if no language specific value is specified.</li><li>Value is a text in a distinct language.</li></ul></td></tr><tr><td valign="top">pollThankYouMessage</td><td valign="top"><p>object</p><p>The (multi-language) default message to be displayed, when a visitor submitted their vote.</p><p>A map of key-value pairs for multi-lingual texts.</p><ul><li>Key is either a lower-cased language code identifier (LCID Locale ID, e.g. <code>en-us</code>) or <code>*</code>, which acts as a fallback, if no language specific value is specified.</li><li>Value is a text in a distinct language.</li></ul></td></tr><tr><td valign="top">pollTotalAnswersCountEnabled</td><td valign="top"><p>boolean</p><p>Indicator, whether the total answers count should be displayed.</p></td></tr><tr><td valign="top">pollTotalAnswersCountText</td><td valign="top"><p>object</p><p>The (multi-language) label of the total answers count.</p><p>A map of key-value pairs for multi-lingual texts.</p><ul><li>Key is either a lower-cased language code identifier (LCID Locale ID, e.g. <code>en-us</code>) or <code>*</code>, which acts as a fallback, if no language specific value is specified.</li><li>Value is a text in a distinct language.</li></ul></td></tr><tr><td valign="top">productCardBrandEnabled</td><td valign="top"><p>boolean</p><p>Indicator, whether the product's brand name should be displayed.</p></td></tr><tr><td valign="top">productCardClickBehavior</td><td valign="top"><p>stringEnum: "clipboard" "modal" "newTab" "newTabWithPipNative" "none" "pip" "pipNative" "pipSpa"</p><p>Determines how a CTA target should be opened. Allowed values are:</p><ul><li><code>clipboard</code> — The CTA target URL/value is copied to clipboard</li><li><code>modal</code> — The CTA target URL/value are rendered in a player internal component</li><li><code>newTab</code> — The CTA target URL is opened a new window</li><li><code>newTabWithPipNative</code> — The CTA target URL is opened a new window with the video following in native PiP — if supported by the viewers OS</li><li><code>none</code> — Event message is sent only</li><li><code>pip</code> — The CTA target URL is loaded in the current page with the media player resuming in sticky minimized state</li><li><code>pipNative</code> — Event message is sent only with the video following in native PiP — if supported by the viewers OS</li><li><code>pipSpa</code> — The CTA target URL is loaded in the current page with the media player resuming in minimized state</li></ul><p>Default value: <code>none</code>.</p></td></tr><tr><td valign="top">productCardCtaEnabled</td><td valign="top"><p>boolean</p><p>Indicator, whether the product card CTA should be displayed.</p></td></tr><tr><td valign="top">productCardCtaEvent</td><td valign="top"><p>stringEnum: "addToCart" "view"</p><p>The distinct behaviour, when the product card CTA is clicked.</p><ul><li><code>addToCart</code> — Add product to shopping cart</li><li><code>view</code> — Open the product detail view</li></ul></td></tr><tr><td valign="top">productCardCtaLabel</td><td valign="top"><p>object</p><p>The (multi-language) label of the product card CTA.</p><p>A map of key-value pairs for multi-lingual texts.</p><ul><li>Key is either a lower-cased language code identifier (LCID Locale ID, e.g. <code>en-us</code>) or <code>*</code>, which acts as a fallback, if no language specific value is specified.</li><li>Value is a text in a distinct language.</li></ul></td></tr><tr><td valign="top">productCardCtaSoldOutLabel</td><td valign="top"><p>object</p><p>The (multi-language) label of the product card CTA when the product is sold out.</p><p>A map of key-value pairs for multi-lingual texts.</p><ul><li>Key is either a lower-cased language code identifier (LCID Locale ID, e.g. <code>en-us</code>) or <code>*</code>, which acts as a fallback, if no language specific value is specified.</li><li>Value is a text in a distinct language.</li></ul></td></tr><tr><td valign="top">productCardEmojiEnabled</td><td valign="top"><p>boolean</p><p>Indicator, whether the product card emoji should be displayed.</p></td></tr><tr><td valign="top">productCardEmojiEvent</td><td valign="top"><p>stringEnum: "addToWishlist" "emoji"</p><p>The distinct behaviour, when the product emoji CTA is clicked.</p><ul><li><code>addToWishlist</code> — Add/remove product to/from wishlist</li><li><code>emoji</code> — Like the product</li></ul></td></tr><tr><td valign="top">productCardEmojiIconOff</td><td valign="top"><p>string</p><p>The SVG markup of the icon displayed when the product card emoji is not selected.</p><p>If left blank, the default heart icon is displayed.</p></td></tr><tr><td valign="top">productCardEmojiIconOn</td><td valign="top"><p>string</p><p>The SVG markup of the icon displayed when the product card emoji is selected.</p><p>If left blank, the default heart icon is displayed.</p></td></tr><tr><td valign="top">productCardPriceEnabled</td><td valign="top"><p>boolean</p><p>Indicator, whether the product's price information name should be displayed.</p></td></tr><tr><td valign="top">productCardSalePricePrefixLabel</td><td valign="top"><p>object</p><p>The (multi-language) prefix of the product card sale price.</p><p>A map of key-value pairs for multi-lingual texts.</p><ul><li>Key is either a lower-cased language code identifier (LCID Locale ID, e.g. <code>en-us</code>) or <code>*</code>, which acts as a fallback, if no language specific value is specified.</li><li>Value is a text in a distinct language.</li></ul></td></tr><tr><td valign="top">productCardThumbnailFormat</td><td valign="top"><p>stringEnum: "9x16" "4x3" "3x4" "square"</p><p>The product card's thumbnail format.</p><ul><li><code>3x4</code> — maximum width: <code>60px</code></li><li><code>4x3</code> — maximum width: <code>80px</code></li><li><code>9x16</code> — maximum width: <code>45px</code></li><li><code>square</code> — maximum width: <code>60px</code></li></ul></td></tr><tr><td valign="top">productCardTitleLineLimit</td><td valign="top"><p>integer &#x3C;int32> [ 1 .. 2 ]</p><p>The maximum allowed number of lines a product name can occupy on the product card.</p><p>Number of characters shown varies per screen sizes and selected fonts. Further characters will be truncated.</p><p>Default value: <code>2</code></p></td></tr><tr><td valign="top">productCardVatNoteLabel</td><td valign="top"><p>object</p><p>The (multi-language) label of the product card VAT note.</p><p>A map of key-value pairs for multi-lingual texts.</p><ul><li>Key is either a lower-cased language code identifier (LCID Locale ID, e.g. <code>en-us</code>) or <code>*</code>, which acts as a fallback, if no language specific value is specified.</li><li>Value is a text in a distinct language.</li></ul></td></tr><tr><td valign="top">productDetailPageCloseCtaLabel</td><td valign="top"><p>object</p><p>The (multi-language) label of the product detail page close CTA.</p><p>A map of key-value pairs for multi-lingual texts.</p><ul><li>Key is either a lower-cased language code identifier (LCID Locale ID, e.g. <code>en-us</code>) or <code>*</code>, which acts as a fallback, if no language specific value is specified.</li><li>Value is a text in a distinct language.</li></ul></td></tr><tr><td valign="top">productListCtaIcon</td><td valign="top"><p>string</p><p>The SVG markup of the icon displayed on the product list CTA.</p><p>If left blank, the default shopping cart icon is displayed.</p></td></tr><tr><td valign="top">productListCtaLabel</td><td valign="top"><p>object</p><p>The (multi-language) label of the product list CTA.</p><p>A map of key-value pairs for multi-lingual texts.</p><ul><li>Key is either a lower-cased language code identifier (LCID Locale ID, e.g. <code>en-us</code>) or <code>*</code>, which acts as a fallback, if no language specific value is specified.</li><li>Value is a text in a distinct language.</li></ul></td></tr><tr><td valign="top">productListEmptyLabel</td><td valign="top"><p>object</p><p>The (multi-language) label of an empty product list.</p><p>A map of key-value pairs for multi-lingual texts.</p><ul><li>Key is either a lower-cased language code identifier (LCID Locale ID, e.g. <code>en-us</code>) or <code>*</code>, which acts as a fallback, if no language specific value is specified.</li><li>Value is a text in a distinct language.</li></ul></td></tr><tr><td valign="top">productListStickerLabel</td><td valign="top"><p>object</p><p>The (multi-language) label of the product list sticker.</p><p>A map of key-value pairs for multi-lingual texts.</p><ul><li>Key is either a lower-cased language code identifier (LCID Locale ID, e.g. <code>en-us</code>) or <code>*</code>, which acts as a fallback, if no language specific value is specified.</li><li>Value is a text in a distinct language.</li></ul></td></tr><tr><td valign="top">productVariantSelectorTriggers</td><td valign="top"><p>Array of any (ProductCardEventType) </p><p>The list of product card event types that trigger the product variant selector.</p></td></tr><tr><td valign="top">replayFeedbackMessage</td><td valign="top"><p>object</p><p>The (multi-language) message displayed, when a show is conducted, but the replay is not available yet.</p><p>A map of key-value pairs for multi-lingual texts.</p><ul><li>Key is either a lower-cased language code identifier (LCID Locale ID, e.g. <code>en-us</code>) or <code>*</code>, which acts as a fallback, if no language specific value is specified.</li><li>Value is a text in a distinct language.</li></ul></td></tr><tr><td valign="top">replayIndicatorLabel</td><td valign="top"><p>object</p><p>The (multi-language) label of the replay indicator.</p><p>A map of key-value pairs for multi-lingual texts.</p><ul><li>Key is either a lower-cased language code identifier (LCID Locale ID, e.g. <code>en-us</code>) or <code>*</code>, which acts as a fallback, if no language specific value is specified.</li><li>Value is a text in a distinct language.</li></ul></td></tr><tr><td valign="top">shoppingCartCtaLabel</td><td valign="top"><p>object</p><p>The (multi-language) label of the shopping cart CTA.</p><p>A map of key-value pairs for multi-lingual texts.</p><ul><li>Key is either a lower-cased language code identifier (LCID Locale ID, e.g. <code>en-us</code>) or <code>*</code>, which acts as a fallback, if no language specific value is specified.</li><li>Value is a text in a distinct language.</li></ul></td></tr><tr><td valign="top">shoppingCartEnabled</td><td valign="top"><p>boolean</p><p>Indicator, whether the shopping cart CTA should be displayed.</p></td></tr><tr><td valign="top">shoppingCartIcon</td><td valign="top"><p>string</p><p>The SVG markup of the icon displayed on the shopping cart CTA.</p><p>If left blank, the default shopping cart icon is displayed.</p></td></tr><tr><td valign="top">shoppingCartUrl</td><td valign="top"><p>object</p><p>The (multi-language) URL of the shopping cart.</p><p>A map of key-value pairs for multi-lingual texts.</p><ul><li>Key is either a lower-cased language code identifier (LCID Locale ID, e.g. <code>en-us</code>) or <code>*</code>, which acts as a fallback, if no language specific value is specified.</li><li>Value is a text in a distinct language.</li></ul></td></tr><tr><td valign="top">socialSharingBehavior</td><td valign="top"><p>stringEnum: "custom" "default"</p><p>The distinct behaviour when the social sharing CTA is clicked.</p><ul><li><code>custom</code> — Custom implementation based on the emitted event.</li><li><code>default</code> — Open Share to Socials modal with a variety of sharing options.</li></ul><p>Default value: <code>default</code></p></td></tr><tr><td valign="top">socialSharingClipboardLabel</td><td valign="top"><p>object</p><p>The (multi-language) label of the copy URL to clipboard option in share to socials.</p><p>A map of key-value pairs for multi-lingual texts.</p><ul><li>Key is either a lower-cased language code identifier (LCID Locale ID, e.g. <code>en-us</code>) or <code>*</code>, which acts as a fallback, if no language specific value is specified.</li><li>Value is a text in a distinct language.</li></ul></td></tr><tr><td valign="top">socialSharingCopyLabel</td><td valign="top"><p>object</p><p>The (multi-language) label used for share to socials copy.</p><p>A map of key-value pairs for multi-lingual texts.</p><ul><li>Key is either a lower-cased language code identifier (LCID Locale ID, e.g. <code>en-us</code>) or <code>*</code>, which acts as a fallback, if no language specific value is specified.</li><li>Value is a text in a distinct language.</li></ul></td></tr><tr><td valign="top">socialSharingCopyLiveLabel</td><td valign="top"><p>object</p><p>The (multi-language) label used for share to socials copy of live shows.</p><p>A map of key-value pairs for multi-lingual texts.</p><ul><li>Key is either a lower-cased language code identifier (LCID Locale ID, e.g. <code>en-us</code>) or <code>*</code>, which acts as a fallback, if no language specific value is specified.</li><li>Value is a text in a distinct language.</li></ul></td></tr><tr><td valign="top">socialSharingCopyReplayLabel</td><td valign="top"><p>object</p><p>The (multi-language) label used for share to socials copy of live replays.</p><p>A map of key-value pairs for multi-lingual texts.</p><ul><li>Key is either a lower-cased language code identifier (LCID Locale ID, e.g. <code>en-us</code>) or <code>*</code>, which acts as a fallback, if no language specific value is specified.</li><li>Value is a text in a distinct language.</li></ul></td></tr><tr><td valign="top">socialSharingCopyStoryLabel</td><td valign="top"><p>object</p><p>The (multi-language) label used for share to socials copy of stories.</p><p>A map of key-value pairs for multi-lingual texts.</p><ul><li>Key is either a lower-cased language code identifier (LCID Locale ID, e.g. <code>en-us</code>) or <code>*</code>, which acts as a fallback, if no language specific value is specified.</li><li>Value is a text in a distinct language.</li></ul></td></tr><tr><td valign="top">socialSharingEnabled</td><td valign="top"><p>boolean</p><p>Indicator, whether the social sharing CTA should be displayed.</p></td></tr><tr><td valign="top">socialSharingIcon</td><td valign="top"><p>string</p><p>The SVG markup of the icon displayed on the social sharing CTA.</p><p>If left blank, the default share icon is displayed.</p></td></tr><tr><td valign="top">socialSharingOtherLabel</td><td valign="top"><p>object</p><p>The (multi-language) label of share to other socials option.</p><p>A map of key-value pairs for multi-lingual texts.</p><ul><li>Key is either a lower-cased language code identifier (LCID Locale ID, e.g. <code>en-us</code>) or <code>*</code>, which acts as a fallback, if no language specific value is specified.</li><li>Value is a text in a distinct language.</li></ul></td></tr><tr><td valign="top">socialSharingTargets</td><td valign="top"><p>Array of SocialSharingTarget (strings) or string</p><p>The list of social sharing targets.</p></td></tr><tr><td valign="top">socialSharingTimestampLabel</td><td valign="top"><p>object</p><p>The (multi-language) label of share to socials option to include the media timestamp.</p><p>A map of key-value pairs for multi-lingual texts.</p><ul><li>Key is either a lower-cased language code identifier (LCID Locale ID, e.g. <code>en-us</code>) or <code>*</code>, which acts as a fallback, if no language specific value is specified.</li><li>Value is a text in a distinct language.</li></ul></td></tr><tr><td valign="top">socialSharingTitleLabel</td><td valign="top"><p>object</p><p>The (multi-language) label of the social sharing title.</p><p>A map of key-value pairs for multi-lingual texts.</p><ul><li>Key is either a lower-cased language code identifier (LCID Locale ID, e.g. <code>en-us</code>) or <code>*</code>, which acts as a fallback, if no language specific value is specified.</li><li>Value is a text in a distinct language.</li></ul></td></tr><tr><td valign="top">socialSharingUrlTemplateLive</td><td valign="top"><p>object</p><p>The (multi-language) URL template for sharing live shows.</p><p>A map of key-value pairs for multi-lingual texts.</p><ul><li>Key is either a lower-cased language code identifier (LCID Locale ID, e.g. <code>en-us</code>) or <code>*</code>, which acts as a fallback, if no language specific value is specified.</li><li>Value is a text in a distinct language.</li></ul></td></tr><tr><td valign="top">socialSharingUrlTemplateReplay</td><td valign="top"><p>object</p><p>The (multi-language) URL template for sharing live replays.</p><p>A map of key-value pairs for multi-lingual texts.</p><ul><li>Key is either a lower-cased language code identifier (LCID Locale ID, e.g. <code>en-us</code>) or <code>*</code>, which acts as a fallback, if no language specific value is specified.</li><li>Value is a text in a distinct language.</li></ul></td></tr><tr><td valign="top">socialSharingUrlTemplateStory</td><td valign="top"><p>object</p><p>The (multi-language) URL template for sharing stories.</p><p>A map of key-value pairs for multi-lingual texts.</p><ul><li>Key is either a lower-cased language code identifier (LCID Locale ID, e.g. <code>en-us</code>) or <code>*</code>, which acts as a fallback, if no language specific value is specified.</li><li>Value is a text in a distinct language.</li></ul></td></tr><tr><td valign="top">sponsorBadgeLabel</td><td valign="top"><p>object</p><p>The (multi-language) label of the sponsored content badge.</p><p>A map of key-value pairs for multi-lingual texts.</p><ul><li>Key is either a lower-cased language code identifier (LCID Locale ID, e.g. <code>en-us</code>) or <code>*</code>, which acts as a fallback, if no language specific value is specified.</li><li>Value is a text in a distinct language.</li></ul></td></tr><tr><td valign="top">stickerCardCtaClickBehavior</td><td valign="top"><p>stringEnum: "clipboard" "modal" "newTab" "newTabWithPipNative" "none" "pip" "pipNative" "pipSpa"</p><p>Determines how a CTA target should be opened. Allowed values are:</p><ul><li><code>clipboard</code> — The CTA target URL/value is copied to clipboard</li><li><code>modal</code> — The CTA target URL/value are rendered in a player internal component</li><li><code>newTab</code> — The CTA target URL is opened a new window</li><li><code>newTabWithPipNative</code> — The CTA target URL is opened a new window with the video following in native PiP — if supported by the viewers OS</li><li><code>none</code> — Event message is sent only</li><li><code>pip</code> — The CTA target URL is loaded in the current page with the media player resuming in sticky minimized state</li><li><code>pipNative</code> — Event message is sent only with the video following in native PiP — if supported by the viewers OS</li><li><code>pipSpa</code> — The CTA target URL is loaded in the current page with the media player resuming in minimized state</li></ul><p>Default value: <code>none</code>.</p></td></tr><tr><td valign="top">subtitlesOffIcon</td><td valign="top"><p>string</p><p>The SVG markup of the icon displayed when subtitles are disabled.</p><p>If left blank, the default subtitles off icon is displayed.</p></td></tr><tr><td valign="top">subtitlesOnIcon</td><td valign="top"><p>string</p><p>The SVG markup of the icon displayed when subtitles are enabled.</p><p>If left blank, the default subtitles on icon is displayed.</p></td></tr><tr><td valign="top">subtitlesAutoTranslateLabel</td><td valign="top"><p>object</p><p>The (multi-language) label of the auto-translate subtitles menu.</p><p>A map of key-value pairs for multi-lingual texts.</p><ul><li>Key is either a lower-cased language code identifier (LCID Locale ID, e.g. <code>en-us</code>) or <code>*</code>, which acts as a fallback, if no language specific value is specified.</li><li>Value is a text in a distinct language.</li></ul></td></tr><tr><td valign="top">subtitlesSettingsLabel</td><td valign="top"><p>object</p><p>The (multi-language) label of the subtitles settings option.</p><p>A map of key-value pairs for multi-lingual texts.</p><ul><li>Key is either a lower-cased language code identifier (LCID Locale ID, e.g. <code>en-us</code>) or <code>*</code>, which acts as a fallback, if no language specific value is specified.</li><li>Value is a text in a distinct language.</li></ul></td></tr><tr><td valign="top">videoControlsPauseIcon</td><td valign="top"><p>string</p><p>The SVG markup of the icon displayed on the video controls pause CTA.</p><p>If left blank, the default pause icon is displayed.</p></td></tr><tr><td valign="top">videoControlsPlayIcon</td><td valign="top"><p>string</p><p>The SVG markup of the icon displayed on the video controls play CTA.</p><p>If left blank, the default play icon is displayed.</p></td></tr></tbody></table>


# Iconset

### `addToCalendarIcon`

[`SvgIconString`](/developers/guides/theming/types#svgiconstring)

The SVG markup of the icon displayed on the add to calendar "Call-to-Action" (CTA).

### `emailIcon`

[`SvgIconString`](/developers/guides/theming/types#svgiconstring)

The SVG markup of the icon displayed on the "Share-via-Email" CTA in Social Sharing.

### `commentsOffIcon`

[`SvgIconString`](/developers/guides/theming/types#svgiconstring)

The SVG markup of the icon displayed when comments are disabled.

### `commentsOnIcon`

[`SvgIconString`](/developers/guides/theming/types#svgiconstring)

The SVG markup of the icon displayed when comments are enabled.

### `mediaItemEmojiIconOff`

[`SvgIconString`](/developers/guides/theming/types#svgiconstring)

The SVG markup of the icon displayed on the "Media Item Emoji" CTA.

### `mediaItemEmojiIconOn`

[`SvgIconString`](/developers/guides/theming/types#svgiconstring)

The SVG markup of the floating icon displayed when the "Media Item Emoji" CTA is clicked.

### `mediaTapToUnmuteIcon`

[`SvgIconString`](/developers/guides/theming/types#svgiconstring)

The SVG markup of the icon displayed on the "Tap-to-Unmute" CTA.

### `playerDismissCtaIcon`

[`SvgIconString`](/developers/guides/theming/types#svgiconstring)

The SVG markup of the icon displayed on the player dismiss CTA.

### `playerOptionsIcon`

[`SvgIconString`](/developers/guides/theming/types#svgiconstring)

The SVG markup of the icon displayed on the player options CTA.

### `productCardEmojiIconOff`

[`SvgIconString`](/developers/guides/theming/types#svgiconstring)

The SVG markup of the icon displayed on the "Product Card Emoji" CTA.

### `productCardEmojiIconOn`

[`SvgIconString`](/developers/guides/theming/types#svgiconstring)

The SVG markup of the icon displayed on the "Product Card Emoji" CTA, when selected.

### `productListCtaIcon`

[`SvgIconString`](/developers/guides/theming/types#svgiconstring)

The SVG markup of the icon displayed on the "Product List" CTA.

### `shoppingCartIcon`

[`SvgIconString`](/developers/guides/theming/types#svgiconstring)

The SVG markup of the icon displayed on the "Shopping Cart" CTA.

### `socialSharingIcon`

[`SvgIconString`](/developers/guides/theming/types#svgiconstring)

The SVG markup of the icon displayed on the "Social Sharing" CTA.

### `subtitlesOffIcon`

[`SvgIconString`](/developers/guides/theming/types#svgiconstring)

The SVG markup of the icon displayed when subtitles are disabled.

### `subtitlesOnIcon`

[`SvgIconString`](/developers/guides/theming/types#svgiconstring)

The SVG markup of the icon displayed when subtitles are enabled.

### `videoControlsPauseIcon`

[`SvgIconString`](/developers/guides/theming/types#svgiconstring)

The SVG markup of the icon displayed on the video controls pause CTA.

### `videoControlsPlayIcon`

[`SvgIconString`](/developers/guides/theming/types#svgiconstring)

The SVG markup of the icon displayed on the video controls play CTA.


# Comments

### `commentsCreatorAvatarEnabled`

`Boolean`

Indicator, whether the creator avatar should be displayed.

### `commentsDisclaimerLabel`

[`LocalizedString`](/developers/guides/theming/types#localizedstring)&#x20;

The (multi-language) label of the "Join Comments" disclaimer.

### `commentsInputPlaceholderLabel`

[`LocalizedString`](/developers/guides/theming/types#localizedstring)

The (multi-language) placeholder label of the comments input field.

### `commentsJoinCtaLabel`

[`LocalizedString`](/developers/guides/theming/types#localizedstring)

The (multi-language) label of the "Join Comments" CTA.

### `commentsJoinPlaceholderLabel`

[`LocalizedString`](/developers/guides/theming/types#localizedstring)

The (multi-language) placeholder label of the "Join Comments" field.

### `commentsLinkClickBehavior`

[`CtaBehavior`](/developers/guides/theming/types#ctabehavior)

Determines how a Links in comments should be opened.

Default value: `none`&#x20;

### `commentsNewCommentsLabel`

[`LocalizedString`](/developers/guides/theming/types#localizedstring)

The (multi-language) label of the "New Comments" indicator.

### `commentsSettingsLabel`

[`LocalizedString`](/developers/guides/theming/types#localizedstring)

The (multi-language) label of the "Comments Settings"-option CTA.

### `commentsSuspendedLabel`

[`LocalizedString`](/developers/guides/theming/types#localizedstring)

The (multi-language) label displayed either on the "Join Comments" CTA or in the Comments input field, if comments are suspended by a live stream host or moderator.

### `commentsUsernameLabel`

[`LocalizedString`](/developers/guides/theming/types#localizedstring)

The (multi-language) label of the username field in the "Join Comments" dialog.

### `commentsVisitorAvatarEnabled`

`Boolean`

Indicator, whether the visitor avatar should be displayed.

### `commentsWaitTimeLabel`

[`LocalizedString`](/developers/guides/theming/types#localizedstring)

The (multi-language) label displayed in the Comments input field, when a user's cool-down period is activated due to too many messages being sent in a 15 seconds time frame.


# Date & Time

### `dateEnforcedLocale`

`String`

Specifies the locale used for formatting date information, overriding the user's browser locale. When set, all date-related elements will be rendered using the defined locale format, ensuring consistency across different user environments.

### `dateFormatAbsoluteLabel`

[`LocalizedString`](/developers/guides/theming/types#localizedstring)&#x20;

The (multi-language) label of format in which a date should be displayed.

Please use placeholders `{date}` and `{time}` where the respective values should be displayed. e.g. `{date} at {time}` could be displayed as `Nov 18th at 9pm`.

### `dateFormatDate`

The distinct format when rendering an absolute date.

* `MMMM d` — Day and Month, e.g. `November 18`
* `MMM d` — Day and Month (short), e.g. `Nov 18`
* `MMMM d, yyyy` — Day, Month, and Year, e.g. `November 18, 1981`
* `MMM d, yyyy` — Day, Month (short), and Year, e.g. `Nov 18, 1981`
* `MMMM do` — Day with Ordinal and Month, e.g. `November 18th`
* `MMM do` — Day with Ordinal, Month (short), e.g. `Nov 18th`
* `MMMM do, yyyy` — Day with Ordinal, Month, and Year, e.g. `November 18th, 1981`
* `MMM do, yyyy` — Day with Ordinal, Month (short), and Year, e.g. `Nov 18th, 1981`
* `MM/dd/yyyy` — US Format (MM/DD/YYYY), e.g. `11/18/1981`
* `dd/MM/yyyy` — European Format (DD/MM/YYYY), e.g. `18/11/1981`
* `yyyy-MM-dd` — ISO Format (YYYY-MM-DD), e.g. `1981-11-18`

Default value: `MMM d`

### `dateFormatDay`

`Enum`&#x20;

The distinct format of the weekday when displaying an absolute date.

* `long` — e.g. `Sunday`
* `short` — e.g. `Sun`

Default value: `short`&#x20;

### `dateFormatRelativeDayUnitLabel`

[`LocalizedString`](/developers/guides/theming/types#localizedstring)&#x20;

The (multi-language) singular form of the day unit label, e.g., "d" in "2d ago."

### `dateFormatRelativeDaysUnitLabel`

[`LocalizedString`](/developers/guides/theming/types#localizedstring)&#x20;

The (multi-language) plural form of the day unit label, e.g., "days" in "In 2 days."

### `dateFormatRelativeFutureLabel`

[`LocalizedString`](/developers/guides/theming/types#localizedstring)&#x20;

The (multi-language) format in which a relative date should be displayed, if the date is in the future.

Please use placeholders `{unit}` and `{value}` where the respective time value should be displayed. e.g. `In {value}{unit}` could be displayed as `In 4h`.

### `dateFormatRelativeHourUnitLabel`

[`LocalizedString`](/developers/guides/theming/types#localizedstring)&#x20;

The (multi-language) singular form of the hour unit label, e.g., "h" in "2h ago."

### `dateFormatRelativeHoursUnitLabel`

[`LocalizedString`](/developers/guides/theming/types#localizedstring)&#x20;

The (multi-language) plural form of the hour unit label, e.g., "hrs" in "In 2 hrs."

### `dateFormatRelativeMinuteUnitLabel`

[`LocalizedString`](/developers/guides/theming/types#localizedstring)&#x20;

The (multi-language) singular form of the minute unit label, e.g., "min" in "2min ago."

### `dateFormatRelativeMinutesUnitLabel`

[`LocalizedString`](/developers/guides/theming/types#localizedstring)&#x20;

The (multi-language) plural form of the minute unit label, e.g., "minutes" in "In 2 minutes."

### `dateFormatRelativeMonthUnitLabel`

[`LocalizedString`](/developers/guides/theming/types#localizedstring)&#x20;

The (multi-language) singular form of the month unit label, e.g., "m" in "2m ago."

### `dateFormatRelativeMonthsUnitLabel`

[`LocalizedString`](/developers/guides/theming/types#localizedstring)&#x20;

The (multi-language) plural form of the month unit label, e.g., "months" in "In 2 months."

### `dateFormatRelativePastLabel`

[`LocalizedString`](/developers/guides/theming/types#localizedstring)&#x20;

The (multi-language) format in which a relative date should be displayed, if the date is in the past.

Please use placeholders `{unit}` and `{value}` where the respective time value should be displayed. e.g. `{value}{unit} ago` could be displayed as `30m ago`.

### `dateFormatRelativeYearUnitLabel`

[`LocalizedString`](/developers/guides/theming/types#localizedstring)&#x20;

The (multi-language) singular form of the year unit label, e.g., "y" in "2y ago."

### `dateFormatRelativeYearsUnitLabel`

[`LocalizedString`](/developers/guides/theming/types#localizedstring)&#x20;

The (multi-language) plural form of the year unit label, e.g., "years" in "In 2 years."

### `dateFormatTime`

`Enum`

The distinct format of the time.

* `12h` — 12-hour clock, omitting minutes, e.g. `9pm`
* `12hm` — 12-hour clock, including minutes, e.g. `9:00pm`
* `24h` — 24-hour clock, omitting minutes, e.g. `21 Uhr`
* `24hm` — 24-hour clock, including minutes, e.g. `21:00 Uhr`

Default value: `24h`&#x20;

### `dateFormatTodayLabel`

&#x20;[`LocalizedString`](/developers/guides/theming/types#localizedstring)&#x20;

The (multi-language) format in which a date should be displayed, if the date is today.

Please use placeholders `{day}`, `{date}` and `{time}`where the respective values should be displayed. e.g. `Today at {time}` could be displayed as `Today at 9pm`.

### `dateFormatTomorrowLabel`

&#x20;[`LocalizedString`](/developers/guides/theming/types#localizedstring)&#x20;

The (multi-language) format in which a date should be displayed, if the date is tomorrow.

Please use placeholders `{day}`, `{date}` and `{time}`where the respective values should be displayed. e.g. `Tomorrow at {time}` could be displayed as `Tomorrow at 9pm`.

### `dateFormatYesterdayLabel`

&#x20;[`LocalizedString`](/developers/guides/theming/types#localizedstring)&#x20;

The (multi-language) format in which a date should be displayed, if the date was yesterday.

Please use placeholders `{day}`, `{date}` and `{time}`where the respective values should be displayed. e.g. `Yesterday at {time}` could be displayed as `Yesterday at 9pm`.

### `dateFormatWithinWeekLabel`

&#x20;[`LocalizedString`](/developers/guides/theming/types#localizedstring)&#x20;

The (multi-language) format in which a date should be displayed, if the date is within the next 7 days.

Please use placeholders `{day}`, `{date}` and `{time}`where the respective values should be displayed. e.g. `This {day} at {time}` could be displayed as `This Saturday at 9pm`.


# Theme Settings

<table><thead><tr><th valign="top">Property Name</th><th valign="top">Property Description</th></tr></thead><tbody><tr><td valign="top">backdropBackgroundColor</td><td valign="top"><p>string</p><p>The default backdrop background color.</p><p>The value can either be specified as</p><ul><li>Named color according to definition.</li><li>RGB Hexadecimal</li><li>RGB (Red, Green, Blue)</li><li>RGBA (Red, Green, Blue, Alpha)</li></ul><p>Default value: <code>#0c1f2d33</code></p></td></tr><tr><td valign="top">backdropFilterRadius</td><td valign="top"><p>integer &#x3C;int32> [ 0 .. 16 ]</p><p>The level of distortion applied to the backdrop of any LiSA widget that is rendered in an overlay.</p><p>Default value: <code>0</code></p></td></tr><tr><td valign="top">bodyFontScale</td><td valign="top"><p>number &#x3C;double> [ 0.1 .. 3 ]</p><p>LiSA widget measurements are relative to the root <code>html</code> element <code>rem</code>, assuming a root font size of <code>16px</code>.</p><p>If a customer changed their website's root font size, given the value of the opposite scale factor applied by the customer, <code>bodyFontScale</code> helps compensate the divergence when converting from <code>px</code> to <code>rem</code>.</p><p><strong>Example:</strong> Say, the root font size is set to <code>10px</code>. We need to compensate for that in our <code>rem</code>-based measurements — which are now based on 10px and no longer on 16px in root font size. The required <code>bodyFontScale</code> value is <code>16 / 10 = 1.6</code>.</p><p>Default value: <code>1</code></p></td></tr><tr><td valign="top">borderRadius</td><td valign="top"><p>integer &#x3C;int32> [ 0 .. 24 ]</p><p>The shape of a component's corners or the degree of their rounding, represented in pixels.</p><p>Default value: <code>12</code></p></td></tr><tr><td valign="top">boxShadowBlurRadius</td><td valign="top"><p>integer &#x3C;int32> [ 0 .. 24 ]</p><p>The blur-radius of a component's box shadow, represented in pixels.</p><p>Default value: <code>2</code></p></td></tr><tr><td valign="top">boxShadowColor</td><td valign="top"><p>string</p><p>The color of a component's box shadow.</p><p>The value can either be specified as</p><ul><li>Named color according to definition.</li><li>RGB Hexadecimal</li><li>RGB (Red, Green, Blue)</li><li>RGBA (Red, Green, Blue, Alpha)</li></ul><p>Default value: <code>#0c1f2d0f</code></p></td></tr><tr><td valign="top">boxShadowOffsetX</td><td valign="top"><p>integer &#x3C;int32> [ 0 .. 8 ]</p><p>The horizontal offset of a component's box shadow, represented in pixels.</p><p>Default value: <code>0</code></p></td></tr><tr><td valign="top">boxShadowOffsetY</td><td valign="top"><p>integer &#x3C;int32> [ 0 .. 8 ]</p><p>The vertical offset of a component's box shadow, represented in pixels.</p><p>Default value: <code>1</code></p></td></tr><tr><td valign="top">boxShadowSpreadRadius</td><td valign="top"><p>integer &#x3C;int32> [ 0 .. 48 ]</p><p>The spread-radius of a component's box shadow, represented in pixels.</p><p>Default value: <code>0</code></p></td></tr><tr><td valign="top">gap</td><td valign="top"><p>integer &#x3C;int32> [ 0 .. 24 ]</p><p>The default gap between panels, rows, columns etc., represented in pixels.</p><p>Default value: <code>8</code></p></td></tr><tr><td valign="top">primaryColor</td><td valign="top"><p>string</p><p>The default font color.</p><p>The value can either be specified as</p><ul><li>Named color according to definition.</li><li>RGB Hexadecimal</li><li>RGB (Red, Green, Blue)</li><li>RGBA (Red, Green, Blue, Alpha)</li></ul><p>Default value: <code>#0c1f2d</code></p></td></tr><tr><td valign="top">primaryFontFamily</td><td valign="top"><p>string</p><p>The font-family of the primary font.</p><p>Default value: <code>sans-serif</code></p></td></tr><tr><td valign="top">primaryFontSize</td><td valign="top"><p>integer &#x3C;int32> [ 10 .. 24 ]</p><p>The primary font's default size as used in body copy components, represented in pixels.</p><p>Default value: <code>12</code></p></td></tr><tr><td valign="top">primaryLineHeight</td><td valign="top"><p>integer &#x3C;int32> [ 12 .. 32 ]</p><p>The primary font's default line-height as used in body copy components, represented in pixels.</p><p>Default value: <code>18</code></p></td></tr><tr><td valign="top">secondaryFontFamily</td><td valign="top"><p>string</p><p>The font-family of the secondary font.</p><p>Default value: <code>sans-serif</code></p></td></tr><tr><td valign="top">badgeAlignment</td><td valign="top"><p>stringEnum: "center" "flex-end" "flex-start"</p><p>The horizontal alignment of badges.</p><ul><li><code>center</code> — Align badges in the center of the host container</li><li><code>flex-end</code> — Align badges at the right edge of the host container</li><li><code>flex-start</code> — Align badges at the left edge of the host container</li></ul><p>Default value: <code>center</code></p></td></tr><tr><td valign="top">badgeAvatarBorderGap</td><td valign="top"><p>integer &#x3C;int32> [ 0 .. 8 ]</p><p>The gap between the badge avatar and the border, represented in pixels.</p><p>Default value: <code>3</code></p></td></tr><tr><td valign="top">badgeAvatarBorderRadius</td><td valign="top"><p>integer &#x3C;int32> [ 0 .. 1 ]</p><p>The shape of the badge avatar corners or the degree of their rounding, represented in pixels.</p><p>Allowed values:</p><ul><li><code>0</code> — No border radius</li><li><code>1</code> — Circular badge avatar</li></ul><p>Default value: <code>1</code></p></td></tr><tr><td valign="top">badgeAvatarBorderWidth</td><td valign="top"><p>integer &#x3C;int32> [ 0 .. 3 ]</p><p>The width of the badge avatar border/ring, represented in pixels.</p><p>Default value: <code>3</code></p></td></tr><tr><td valign="top">badgeAvatarSize</td><td valign="top"><p>integer &#x3C;int32> [ 64 .. 128 ]</p><p>The size of the badge avatar image, represented in pixels.</p><p>Default value: <code>74</code></p></td></tr><tr><td valign="top">badgeCaptionFontFamily</td><td valign="top"><p>string</p><p>The font family applied to the badge caption.</p><p>If not explicitly specified, value is inherited value from the <code>primaryFontFamily</code> theming option.</p></td></tr><tr><td valign="top">badgeCaptionFontSize</td><td valign="top"><p>integer &#x3C;int32> [ 8 .. 16 ]</p><p>The font size applied to the badge caption, represented in pixels.</p><p>Default value: <code>10</code></p></td></tr><tr><td valign="top">badgeCaptionFontWeight</td><td valign="top"><p>stringEnum: "100" "200" "300" "400" "500" "600" "700" "800" "900"</p><p>The font weight applied to the badge caption.</p><p><code>&#x3C;font-weight-absolute></code> numeric values [1,1000].</p><ul><li><code>100</code></li><li><code>200</code></li><li><code>300</code></li><li><code>400</code> — normal</li><li><code>500</code></li><li><code>600</code></li><li><code>700</code> — bold</li><li><code>800</code></li><li><code>900</code></li></ul><p>Default value: <code>600</code></p></td></tr><tr><td valign="top">badgeCaptionLineHeight</td><td valign="top"><p>integer &#x3C;int32> [ 12 .. 24 ]</p><p>The font line-height applied to the badge caption, represented in pixels.</p><p>Default value: <code>18</code></p></td></tr><tr><td valign="top">badgeGap</td><td valign="top"><p>integer &#x3C;int32> [ 8 .. 24 ]</p><p>The gap between badge components, represented in pixels.</p><p>Default value: <code>8</code></p></td></tr><tr><td valign="top">badgeIndicatorColor</td><td valign="top"><p>string</p><p>The color of the badge indicator (ring).</p><p>The value can either be specified as</p><ul><li>Named color according to definition.</li><li>RGB Hexadecimal</li><li>RGB (Red, Green, Blue)</li><li>RGBA (Red, Green, Blue, Alpha)</li></ul><p>Default value: <code>#f95590</code></p></td></tr><tr><td valign="top">commentsAvatarBorderRadius</td><td valign="top"><p>integer &#x3C;int32> [ 0 .. 1 ]</p><p>The shape of the comment avatar corners or the degree of their rounding, represented in pixels.</p><p>Allowed values:</p><ul><li><code>0</code> — No border radius</li><li><code>1</code> — Circular avatar</li></ul><p>Default value: <code>10</code></p></td></tr><tr><td valign="top">commentsBackgroundColor</td><td valign="top"><p>string</p><p>The background color of a comment.</p><p>The value can either be specified as</p><ul><li>Named color according to definition.</li><li>RGB Hexadecimal</li><li>RGB (Red, Green, Blue)</li><li>RGBA (Red, Green, Blue, Alpha)</li></ul><p>Default value: <code>#2b2b2b66</code></p></td></tr><tr><td valign="top">commentsBorderRadius</td><td valign="top"><p>integer &#x3C;int32> [ 0 .. 16 ]</p><p>The shape of the comment corners or the degree of their rounding, represented in pixels.</p><p>Default value: <code>8</code></p></td></tr><tr><td valign="top">commentsColor</td><td valign="top"><p>string</p><p>The font color of a comment.</p><p>The value can either be specified as</p><ul><li>Named color according to definition.</li><li>RGB Hexadecimal</li><li>RGB (Red, Green, Blue)</li><li>RGBA (Red, Green, Blue, Alpha)</li></ul><p>Default value: <code>#ffffff</code></p></td></tr><tr><td valign="top">commentsCtaBackgroundColor</td><td valign="top"><p>string</p><p>The background color applied to the comments CTA.</p><p>The value can either be specified as</p><ul><li>Named color according to definition.</li><li>RGB Hexadecimal</li><li>RGB (Red, Green, Blue)</li><li>RGBA (Red, Green, Blue, Alpha)</li></ul><p>If not explicitly specified, value is inherited value from the <code>primaryControlBackgroundColor</code> theming option.</p></td></tr><tr><td valign="top">commentsCtaBorderColor</td><td valign="top"><p>string</p><p>The border color applied to the comments CTA.</p><p>The value can either be specified as</p><ul><li>Named color according to definition.</li><li>RGB Hexadecimal</li><li>RGB (Red, Green, Blue)</li><li>RGBA (Red, Green, Blue, Alpha)</li></ul><p>If not explicitly specified, value is inherited value from the <code>primaryControlBorderColor</code> theming option.</p></td></tr><tr><td valign="top">commentsCtaIconColor</td><td valign="top"><p>string</p><p>The color of the comments CTA's icon.</p><p>The value can either be specified as</p><ul><li>Named color according to definition.</li><li>RGB Hexadecimal</li><li>RGB (Red, Green, Blue)</li><li>RGBA (Red, Green, Blue, Alpha)</li></ul><p>If not explicitly specified, value is inherited value from the <code>primaryControlIconColor</code> theming option.</p></td></tr><tr><td valign="top">commentsCtaLabelColor</td><td valign="top"><p>string</p><p>The font color applied to the comments CTA's label.</p><p>The value can either be specified as</p><ul><li>Named color according to definition.</li><li>RGB Hexadecimal</li><li>RGB (Red, Green, Blue)</li><li>RGBA (Red, Green, Blue, Alpha)</li></ul><p>If not explicitly specified, value is inherited value from the <code>primaryControlLabelColor</code> theming option.</p></td></tr><tr><td valign="top">commentsGap</td><td valign="top"><p>integer &#x3C;int32> [ 0 .. 8 ]</p><p>The gap between two comments, represented in pixels.</p><p>Default value: <code>6</code></p></td></tr><tr><td valign="top">commentsInputColor</td><td valign="top"><p>string</p><p>The font color of the comment input field.</p><p>The value can either be specified as</p><ul><li>Named color according to definition.</li><li>RGB Hexadecimal</li><li>RGB (Red, Green, Blue)</li><li>RGBA (Red, Green, Blue, Alpha)</li></ul><p>Default value: <code>#ffffff</code></p></td></tr><tr><td valign="top">commentsInputFontSize</td><td valign="top"><p>integer &#x3C;int32> [ 10 .. 24 ]</p><p>The font size applied to the comment input field.</p><p>Default value: <code>14</code></p></td></tr><tr><td valign="top">commentsInputLineHeight</td><td valign="top"><p>integer &#x3C;int32> [ 12 .. 32 ]</p><p>The font line-height applied to the comment input field.</p><p>Default value: <code>20</code></p></td></tr><tr><td valign="top">commentsInputPlaceholderColor</td><td valign="top"><p>string</p><p>The font color of the comment input field placeholder.</p><p>The value can either be specified as</p><ul><li>Named color according to definition.</li><li>RGB Hexadecimal</li><li>RGB (Red, Green, Blue)</li><li>RGBA (Red, Green, Blue, Alpha)</li></ul><p>Default value: <code>#ffffff99</code></p></td></tr><tr><td valign="top">commentsLinkColor</td><td valign="top"><p>string</p><p>The font color of a link in a comment.</p><p>The value can either be specified as</p><ul><li>Named color according to definition.</li><li>RGB Hexadecimal</li><li>RGB (Red, Green, Blue)</li><li>RGBA (Red, Green, Blue, Alpha)</li></ul><p>Default value: <code>#d285f1</code></p></td></tr><tr><td valign="top">commentsModeratorBackgroundColor</td><td valign="top"><p>string</p><p>The background color of a comment written by a moderator.</p><p>The value can either be specified as</p><ul><li>Named color according to definition.</li><li>RGB Hexadecimal</li><li>RGB (Red, Green, Blue)</li><li>RGBA (Red, Green, Blue, Alpha)</li></ul><p>Default value: <code>#30083b99</code></p></td></tr><tr><td valign="top">commentsModeratorColor</td><td valign="top"><p>string</p><p>The font color of a comment written by a moderator.</p><p>The value can either be specified as</p><ul><li>Named color according to definition.</li><li>RGB Hexadecimal</li><li>RGB (Red, Green, Blue)</li><li>RGBA (Red, Green, Blue, Alpha)</li></ul><p>Default value: <code>#ffffff</code></p></td></tr><tr><td valign="top">commentsPaddingHorizontal</td><td valign="top"><p>integer &#x3C;int32> [ 0 .. 16 ]</p><p>The horizontal padding of a comment, represented in pixels.</p><p>Default value: <code>8</code></p></td></tr><tr><td valign="top">commentsPaddingVertical</td><td valign="top"><p>integer &#x3C;int32> [ 0 .. 16 ]</p><p>The vertical padding of a comment, represented in pixels.</p><p>Default value: <code>4</code></p></td></tr><tr><td valign="top">commentsPinBackgroundColor</td><td valign="top"><p>string</p><p>The background color of a pinned comment.</p><p>The value can either be specified as</p><ul><li>Named color according to definition.</li><li>RGB Hexadecimal</li><li>RGB (Red, Green, Blue)</li><li>RGBA (Red, Green, Blue, Alpha)</li></ul><p>Default value: <code>#30083b99</code></p></td></tr><tr><td valign="top">commentsPinColor</td><td valign="top"><p>string</p><p>The font color of a pinned comment.</p><p>The value can either be specified as</p><ul><li>Named color according to definition.</li><li>RGB Hexadecimal</li><li>RGB (Red, Green, Blue)</li><li>RGBA (Red, Green, Blue, Alpha)</li></ul><p>Default value: <code>#ffffff</code></p></td></tr><tr><td valign="top">commentsReplyToBackgroundColor</td><td valign="top"><p>string</p><p>The background color of the original message in a reply-to comment.</p><p>The value can either be specified as</p><ul><li>Named color according to definition.</li><li>RGB Hexadecimal</li><li>RGB (Red, Green, Blue)</li><li>RGBA (Red, Green, Blue, Alpha)</li></ul><p>Default value: <code>#00000054</code></p></td></tr><tr><td valign="top">commentsReplyToColor</td><td valign="top"><p>string</p><p>The font color of the original message in a reply-to comment.</p><p>The value can either be specified as</p><ul><li>Named color according to definition.</li><li>RGB Hexadecimal</li><li>RGB (Red, Green, Blue)</li><li>RGBA (Red, Green, Blue, Alpha)</li></ul><p>Default value: <code>#ffffffdd</code></p></td></tr><tr><td valign="top">commentsReplyToFontSize</td><td valign="top"><p>integer &#x3C;int32> [ 10 .. 24 ]</p><p>The font size applied to the original message in a reply-to comment.</p><p>Default value: <code>12</code></p></td></tr><tr><td valign="top">commentsReplyToLineHeight</td><td valign="top"><p>integer &#x3C;int32> [ 12 .. 32 ]</p><p>The font line-height applied to the original message in a reply-to comment.</p><p>Default value: <code>18</code></p></td></tr><tr><td valign="top">creatorAvatarBorderRadius</td><td valign="top"><p>integer &#x3C;int32> [ 0 .. 1 ]</p><p>The shape of the creator avatar corners or the degree of their rounding.</p><p>Allowed values:</p><ul><li><code>0</code> — No border radius</li><li><code>1</code> — Circular creator avatar</li></ul><p>Default value: <code>1</code></p></td></tr><tr><td valign="top">creatorAvatarSize</td><td valign="top"><p>integer &#x3C;int32> [ 24 .. 48 ]</p><p>The size of the creator avatar image, represented in pixels.</p><p>Default value: <code>42</code></p></td></tr><tr><td valign="top">dialogBackdropFilterRadius</td><td valign="top"><p>integer &#x3C;int32> [ 0 .. 16 ]</p><p>The level of distortion applied to the backdrop of a dialog.</p><p>Default value: <code>8</code></p></td></tr><tr><td valign="top">dialogBackgroundColor</td><td valign="top"><p>string</p><p>The background color of a dialog.</p><p>The value can either be specified as</p><ul><li>Named color according to definition.</li><li>RGB Hexadecimal</li><li>RGB (Red, Green, Blue)</li><li>RGBA (Red, Green, Blue, Alpha)</li></ul><p>Default value: <code>#ffffffdd</code></p></td></tr><tr><td valign="top">dialogBorderColor</td><td valign="top"><p>string</p><p>The border color of a dialog.</p><p>The value can either be specified as</p><ul><li>Named color according to definition.</li><li>RGB Hexadecimal</li><li>RGB (Red, Green, Blue)</li><li>RGBA (Red, Green, Blue, Alpha)</li></ul><p>Default value: <code>#dadada80</code></p></td></tr><tr><td valign="top">dialogBorderRadius</td><td valign="top"><p>integer &#x3C;int32> [ 0 .. 32 ]</p><p>The shape of the dialog corners or the degree of their rounding, represented in pixels.</p><p>Default value: <code>16</code></p></td></tr><tr><td valign="top">dialogColor</td><td valign="top"><p>string</p><p>The font color of a dialog.</p><p>The value can either be specified as</p><ul><li>Named color according to definition.</li><li>RGB Hexadecimal</li><li>RGB (Red, Green, Blue)</li><li>RGBA (Red, Green, Blue, Alpha)</li></ul><p>Default value: <code>#222023</code></p></td></tr><tr><td valign="top">dialogFontSize</td><td valign="top"><p>integer &#x3C;int32> [ 10 .. 24 ]</p><p>The font size applied to a dialog.</p><p>Default value: <code>14</code></p></td></tr><tr><td valign="top">dialogGap</td><td valign="top"><p>integer &#x3C;int32> [ 0 .. 16 ]</p><p>The gap between dialog components, represented in pixels.</p><p>Default value: <code>null</code></p></td></tr><tr><td valign="top">dialogLineHeight</td><td valign="top"><p>integer &#x3C;int32> [ 12 .. 32 ]</p><p>The font line-height applied to a dialog.</p><p>Default value: <code>20</code></p></td></tr><tr><td valign="top">dialogMutedFontSize</td><td valign="top"><p>integer &#x3C;int32> [ 10 .. 24 ]</p><p>The font size applied to a muted dialog copy.</p><p>Default value: <code>12</code></p></td></tr><tr><td valign="top">dialogMutedLineHeight</td><td valign="top"><p>integer &#x3C;int32> [ 12 .. 32 ]</p><p>The font line-height applied to a muted dialog copy.</p><p>Default value: <code>18</code></p></td></tr><tr><td valign="top">dialogPadding</td><td valign="top"><p>integer &#x3C;int32> [ 0 .. 32 ]</p><p>The padding of a dialog, represented in pixels.</p><p>Default value: <code>12</code></p></td></tr><tr><td valign="top">dialogTitleFontSize</td><td valign="top"><p>number &#x3C;double> [ 10 .. 24 ]</p><p>The font size applied to a dialog title.</p><p>Default value: <code>14</code></p></td></tr><tr><td valign="top">dialogTitleLineHeight</td><td valign="top"><p>integer &#x3C;int32> [ 12 .. 32 ]</p><p>The font line-height applied to a dialog title.</p><p>Default value: <code>20</code></p></td></tr><tr><td valign="top">mediaItemEmojiCtaBackgroundColor</td><td valign="top"><p>string</p><p>The background color of the media item emoji CTA.</p><p>The value can either be specified as</p><ul><li>Named color according to definition.</li><li>RGB Hexadecimal</li><li>RGB (Red, Green, Blue)</li><li>RGBA (Red, Green, Blue, Alpha)</li></ul><p>If not explicitly specified, value is inherited value from the <code>primaryControlBackgroundColor</code> theming option.</p></td></tr><tr><td valign="top">mediaItemEmojiCtaBorderColor</td><td valign="top"><p>string</p><p>The border color of the media item emoji CTA.</p><p>The value can either be specified as</p><ul><li>Named color according to definition.</li><li>RGB Hexadecimal</li><li>RGB (Red, Green, Blue)</li><li>RGBA (Red, Green, Blue, Alpha)</li></ul><p>If not explicitly specified, value is inherited value from the <code>primaryControlBorderColor</code> theming option.</p></td></tr><tr><td valign="top">mediaItemEmojiCtaIconColor</td><td valign="top"><p>string</p><p>The color of the media item emoji CTA icon.</p><p>The value can either be specified as</p><ul><li>Named color according to definition.</li><li>RGB Hexadecimal</li><li>RGB (Red, Green, Blue)</li><li>RGBA (Red, Green, Blue, Alpha)</li></ul><p>If not explicitly specified, value is inherited value from the <code>primaryControlIconColor</code> theming option.</p></td></tr><tr><td valign="top">mediaItemEmojiCtaLabelColor</td><td valign="top"><p>string</p><p>The color of the media item emoji CTA label.</p><p>The value can either be specified as</p><ul><li>Named color according to definition.</li><li>RGB Hexadecimal</li><li>RGB (Red, Green, Blue)</li><li>RGBA (Red, Green, Blue, Alpha)</li></ul><p>If not explicitly specified, value is inherited value from the <code>primaryControlLabelColor</code> theming option.</p></td></tr><tr><td valign="top">mediaItemEmojiOnColor</td><td valign="top"><p>string</p><p>The color of the media item emoji when it is selected.</p><p>The value can either be specified as</p><ul><li>Named color according to definition.</li><li>RGB Hexadecimal</li><li>RGB (Red, Green, Blue)</li><li>RGBA (Red, Green, Blue, Alpha)</li></ul><p>Default value: <code>#ff0000</code></p></td></tr><tr><td valign="top">mediaItemInfoCreatorFontSize</td><td valign="top"><p>integer &#x3C;int32> [ 8 .. 18 ]</p><p>The font size applied to the media item info creator.</p><p>Default value: <code>14</code></p></td></tr><tr><td valign="top">mediaItemInfoCreatorFontWeight</td><td valign="top"><p>stringEnum: "100" "200" "300" "400" "500" "600" "700" "800" "900"</p><p>The font weight applied to the media item info creator.</p><p><code>&#x3C;font-weight-absolute></code> numeric values [1,1000].</p><ul><li><code>100</code></li><li><code>200</code></li><li><code>300</code></li><li><code>400</code> — normal</li><li><code>500</code></li><li><code>600</code></li><li><code>700</code> — bold</li><li><code>800</code></li><li><code>900</code></li></ul><p>Default value: <code>600</code></p></td></tr><tr><td valign="top">mediaItemInfoCreatorLineHeight</td><td valign="top"><p>integer &#x3C;int32> [ 10 .. 20 ]</p><p>The font line-height applied to the media item info creator.</p><p>Default value: <code>16</code></p></td></tr><tr><td valign="top">mediaItemInfoGap</td><td valign="top"><p>integer &#x3C;int32> [ 0 .. 8 ]</p><p>The gap between media item info components, represented in pixels.</p><p>Default value: <code>4</code></p></td></tr><tr><td valign="top">notificationsBackgroundColor</td><td valign="top"><p>string</p><p>The background color of notifications.</p><p>The value can either be specified as</p><ul><li>Named color according to definition.</li><li>RGB Hexadecimal</li><li>RGB (Red, Green, Blue)</li><li>RGBA (Red, Green, Blue, Alpha)</li></ul><p>Default value: <code>#ffffffcc</code></p></td></tr><tr><td valign="top">notificationsBorderRadius</td><td valign="top"><p>integer &#x3C;int32> [ 0 .. 16 ]</p><p>The shape of the notifications corners or the degree of their rounding, represented in pixels.</p><p>Default value: <code>4</code></p></td></tr><tr><td valign="top">notificationsColor</td><td valign="top"><p>string</p><p>The font color of notifications.</p><p>The value can either be specified as</p><ul><li>Named color according to definition.</li><li>RGB Hexadecimal</li><li>RGB (Red, Green, Blue)</li><li>RGBA (Red, Green, Blue, Alpha)</li></ul><p>Default value: <code>#000000cc</code></p></td></tr><tr><td valign="top">notificationsFontSize</td><td valign="top"><p>integer &#x3C;int32> [ 10 .. 24 ]</p><p>The font size applied to notifications, represented in pixels.</p><p>Default value: <code>12</code></p></td></tr><tr><td valign="top">notificationsIconSize</td><td valign="top"><p>integer &#x3C;int32> [ 10 .. 24 ]</p><p>The size of the notification icon, represented in pixels.</p><p>Default value: <code>20</code></p></td></tr><tr><td valign="top">notificationsLineHeight</td><td valign="top"><p>integer &#x3C;int32> [ 12 .. 32 ]</p><p>The font line-height applied to notifications, represented in pixels.</p><p>Default value: <code>18</code></p></td></tr><tr><td valign="top">notificationsGap</td><td valign="top"><p>integer &#x3C;int32> [ 0 .. 8 ]</p><p>The gap between notifications, represented in pixels.</p><p>Default value: <code>4</code></p></td></tr><tr><td valign="top">notificationsPaddingHorizontal</td><td valign="top"><p>integer &#x3C;int32> [ 0 .. 8 ]</p><p>The horizontal padding of notifications, represented in pixels.</p><p>Default value: <code>4</code></p></td></tr><tr><td valign="top">notificationsPaddingVertical</td><td valign="top"><p>integer &#x3C;int32> [ 0 .. 8 ]</p><p>The vertical padding of notifications, represented in pixels.</p><p>Default value: <code>4</code></p></td></tr><tr><td valign="top">playerCanvasBorderRadius</td><td valign="top"><p>integer &#x3C;int32> [ 0 .. 32 ]</p><p>The shape of the player canvas corners or the degree of their rounding, represented in pixels.</p><p>Default value: <code>16</code></p></td></tr><tr><td valign="top">playerControlCtaGap</td><td valign="top"><p>integer &#x3C;int32> [ 0 .. 16 ]</p><p>The gap between the player control CTAs, represented in pixels.</p><p>Default value: <code>10</code></p></td></tr><tr><td valign="top">playerControlCtaHeight</td><td valign="top"><p>integer &#x3C;int32> [ 24 .. 48 ]</p><p>The height of the player control CTAs, represented in pixels.</p><p>Default value: <code>32</code></p></td></tr><tr><td valign="top">playerControlCtaWidth</td><td valign="top"><p>integer &#x3C;int32> [ 24 .. 48 ]</p><p>The width of the player control CTAs, represented in pixels.</p><p>Default value: <code>32</code></p></td></tr><tr><td valign="top">playerDismissCtaAlignment</td><td valign="top">string</td></tr><tr><td valign="top">playerDismissCtaBackgroundColor</td><td valign="top"><p>string</p><p>The background color of the player dismiss CTA.</p><p>The value can either be specified as</p><ul><li>Named color according to definition.</li><li>RGB Hexadecimal</li><li>RGB (Red, Green, Blue)</li><li>RGBA (Red, Green, Blue, Alpha)</li></ul><p>If not explicitly specified, value is inherited value from the <code>primaryControlBackgroundColor</code> theming option.</p></td></tr><tr><td valign="top">playerDismissCtaBorderColor</td><td valign="top"><p>string</p><p>The border color of the player dismiss CTA.</p><p>The value can either be specified as</p><ul><li>Named color according to definition.</li><li>RGB Hexadecimal</li><li>RGB (Red, Green, Blue)</li><li>RGBA (Red, Green, Blue, Alpha)</li></ul><p>If not explicitly specified, value is inherited value from the <code>primaryControlBorderColor</code> theming option.</p></td></tr><tr><td valign="top">playerDismissCtaIconColor</td><td valign="top"><p>string</p><p>The color of the player dismiss CTA icon.</p><p>The value can either be specified as</p><ul><li>Named color according to definition.</li><li>RGB Hexadecimal</li><li>RGB (Red, Green, Blue)</li><li>RGBA (Red, Green, Blue, Alpha)</li></ul><p>If not explicitly specified, value is inherited value from the <code>primaryControlIconColor</code> theming option.</p></td></tr><tr><td valign="top">playerDismissCtaIconHeight</td><td valign="top"><p>integer &#x3C;int32> [ 24 .. 48 ]</p><p>The height of the player dismiss CTA icon, represented in pixels.</p><p>Default value: <code>24</code></p></td></tr><tr><td valign="top">playerDismissCtaIconWidth</td><td valign="top"><p>integer &#x3C;int32> [ 24 .. 48 ]</p><p>The width of the player dismiss CTA icon, represented in pixels.</p><p>Default value: <code>24</code></p></td></tr><tr><td valign="top">playerDismissCtaMarginHorizontal</td><td valign="top"><p>integer &#x3C;int32> [ 0 .. 24 ]</p><p>The horizontal margin of the player dismiss CTA, represented in pixels.</p><p>If not explicitly specified, value is inherited value from the <code>gap</code> theming option.</p></td></tr><tr><td valign="top">playerDismissCtaMarginVertical</td><td valign="top"><p>integer &#x3C;int32> [ 0 .. 24 ]</p><p>The vertical margin of the player dismiss CTA, represented in pixels.</p><p>If not explicitly specified, value is inherited value from the <code>gap</code> theming option.</p></td></tr><tr><td valign="top">playerDismissCtaSize</td><td valign="top"><p>integer &#x3C;int32> [ 24 .. 48 ]</p><p>The size of the player dismiss CTA, represented in pixels.</p><p>If not explicitly specified, value is inherited value from the <code>primaryControlSize</code> theming option.</p></td></tr><tr><td valign="top">playerGap</td><td valign="top"><p>integer &#x3C;int32> [ 0 .. 16 ]</p><p>The default gap between components of the player, represented in pixels.</p><p>Default value: <code>16</code></p></td></tr><tr><td valign="top">playerHeaderColor</td><td valign="top"><p>string</p><p>The color of the player header.</p><p>The value can either be specified as</p><ul><li>Named color according to definition.</li><li>RGB Hexadecimal</li><li>RGB (Red, Green, Blue)</li><li>RGBA (Red, Green, Blue, Alpha)</li></ul><p>Default value: <code>#ffffff</code></p></td></tr><tr><td valign="top">playerHeaderFontSize</td><td valign="top"><p>integer &#x3C;int32> [ 8 .. 18 ]</p><p>The font size applied to the player header.</p><p>Default value: <code>12</code></p></td></tr><tr><td valign="top">playerHeaderGradientOpacity</td><td valign="top"><p>number &#x3C;double> [ 0 .. 1 ]</p><p>The opacity of the player header gradient.</p><p>Default value: <code>0.5</code></p></td></tr><tr><td valign="top">playerHeaderLineHeight</td><td valign="top"><p>integer &#x3C;int32> [ 10 .. 24 ]</p><p>The font line-height applied to the player header.</p><p>Default value: <code>14</code></p></td></tr><tr><td valign="top">playerProgressBarFillColor</td><td valign="top"><p>string</p><p>The color of the player's progress bar.</p><p>The value can either be specified as</p><ul><li>Named color according to definition.</li><li>RGB Hexadecimal</li><li>RGB (Red, Green, Blue)</li><li>RGBA (Red, Green, Blue, Alpha)</li></ul><p>Default value: <code>#ffffff</code></p></td></tr><tr><td valign="top">playerProgressBarGap</td><td valign="top"><p>integer &#x3C;int32> [ 0 .. 8 ]</p><p>The gap between the player progress bar segments, represented in pixels.</p><p>Default value: <code>3</code></p></td></tr><tr><td valign="top">playerProgressBarHeight</td><td valign="top"><p>integer &#x3C;int32> [ 0 .. 4 ]</p><p>The height of the player progress bar, represented in pixels.</p><p>Default value: <code>2</code></p></td></tr><tr><td valign="top">playerProgressBarTrackColor</td><td valign="top"><p>string</p><p>The color of the player's progress bar track.</p><p>The value can either be specified as</p><ul><li>Named color according to definition.</li><li>RGB Hexadecimal</li><li>RGB (Red, Green, Blue)</li><li>RGBA (Red, Green, Blue, Alpha)</li></ul><p>Default value: <code>#00000054</code></p></td></tr><tr><td valign="top">playerSkipItemCtaBackgroundColor</td><td valign="top"><p>string</p><p>The background color of the player skip item CTA.</p><p>The value can either be specified as</p><ul><li>Named color according to definition.</li><li>RGB Hexadecimal</li><li>RGB (Red, Green, Blue)</li><li>RGBA (Red, Green, Blue, Alpha)</li></ul><p>Default value: <code>#ffffff</code></p></td></tr><tr><td valign="top">playerSkipItemCtaHeight</td><td valign="top"><p>integer &#x3C;int32> [ 16 .. 64 ]</p><p>The height of the player skip item CTA, represented in pixels.</p><p>Default value: <code>64</code></p></td></tr><tr><td valign="top">playerSkipItemCtaWidth</td><td valign="top"><p>integer &#x3C;int32> [ 16 .. 64 ]</p><p>The width of the player skip item CTA, represented in pixels.</p><p>Default value: <code>64</code></p></td></tr><tr><td valign="top">playerSkipListCtaColor</td><td valign="top"><p>string</p><p>The color of the player skip list CTA.</p><p>The value can either be specified as</p><ul><li>Named color according to definition.</li><li>RGB Hexadecimal</li><li>RGB (Red, Green, Blue)</li><li>RGBA (Red, Green, Blue, Alpha)</li></ul><p>Default value: <code>#ffffff</code></p></td></tr><tr><td valign="top">playerSkipListCtaHeight</td><td valign="top"><p>integer &#x3C;int32> [ 16 .. 64 ]</p><p>The height of the player skip list CTA, represented in pixels.</p><p>Default value: <code>48</code></p></td></tr><tr><td valign="top">playerSkipListCtaWidth</td><td valign="top"><p>integer &#x3C;int32> [ 16 .. 64 ]</p><p>The width of the player skip list CTA, represented in pixels.</p><p>Default value: <code>48</code></p></td></tr><tr><td valign="top">playerZIndex</td><td valign="top"><p>integer &#x3C;int32> >= 0</p><p>The z-index of the player. All other components' stack positions are calculated based on the player's <code>z-index</code>. Default value: <code>210623</code></p></td></tr><tr><td valign="top">primaryControlBackdropFilterRadius</td><td valign="top"><p>integer &#x3C;int32> [ 0 .. 16 ]</p><p>The level of distortion applied to the backdrop of a primary control.</p><p>Default value: <code>8</code></p></td></tr><tr><td valign="top">primaryControlBackgroundColor</td><td valign="top"><p>string</p><p>The background color of a primary control.</p><p>The value can either be specified as</p><ul><li>Named color according to definition.</li><li>RGB Hexadecimal</li><li>RGB (Red, Green, Blue)</li><li>RGBA (Red, Green, Blue, Alpha)</li></ul><p>Default value: <code>#00000033</code></p></td></tr><tr><td valign="top">primaryControlBorderColor</td><td valign="top"><p>string</p><p>The border color of a primary control.</p><p>The value can either be specified as</p><ul><li>Named color according to definition.</li><li>RGB Hexadecimal</li><li>RGB (Red, Green, Blue)</li><li>RGBA (Red, Green, Blue, Alpha)</li></ul><p>Default value: <code>#00000033</code></p></td></tr><tr><td valign="top">primaryControlBorderWidth</td><td valign="top"><p>number &#x3C;double> [ 0 .. 1 ]</p><p>The width of the primary control border, represented in pixels.</p><p>Default value: <code>0</code></p></td></tr><tr><td valign="top">primaryControlBorderRadius</td><td valign="top"><p>integer &#x3C;int32> [ 0 .. 16 ]</p><p>The shape of the primary control corners or the degree of their rounding, represented in pixels.</p><p>Default value: <code>8</code></p></td></tr><tr><td valign="top">primaryControlIconColor</td><td valign="top"><p>string</p><p>The color of a primary control icon.</p><p>The value can either be specified as</p><ul><li>Named color according to definition.</li><li>RGB Hexadecimal</li><li>RGB (Red, Green, Blue)</li><li>RGBA (Red, Green, Blue, Alpha)</li></ul><p>Default value: <code>#ffffff</code></p></td></tr><tr><td valign="top">primaryControlLabelColor</td><td valign="top"><p>string</p><p>The color of a primary control label.</p><p>The value can either be specified as</p><ul><li>Named color according to definition.</li><li>RGB Hexadecimal</li><li>RGB (Red, Green, Blue)</li><li>RGBA (Red, Green, Blue, Alpha)</li></ul><p>Default value: <code>#ffffff</code></p></td></tr><tr><td valign="top">primaryControlSize</td><td valign="top"><p>integer &#x3C;int32> [ 42 .. 42 ]</p><p>The size of a primary control, represented in pixels.</p><p>Default value: <code>42</code></p></td></tr><tr><td valign="top">productCardBackgroundColor</td><td valign="top"><p>string</p><p>The background colour of the product card.</p><p>The value can either be specified as</p><ul><li>Named color according to definition.</li><li>RGB Hexadecimal</li><li>RGB (Red, Green, Blue)</li><li>RGBA (Red, Green, Blue, Alpha)</li></ul><p>Default value: <code>#ffffff</code></p></td></tr><tr><td valign="top">productCardBorderColor</td><td valign="top"><p>string</p><p>The color of the product card's border.</p><p>The value can either be specified as</p><ul><li>Named color according to definition.</li><li>RGB Hexadecimal</li><li>RGB (Red, Green, Blue)</li><li>RGBA (Red, Green, Blue, Alpha)</li></ul><p>Default value: <code>#e2e8ec</code></p></td></tr><tr><td valign="top">productCardBorderWidth</td><td valign="top"><p>integer &#x3C;int32> [ 0 .. 12 ]</p><p>The width of the product card's border, represented in pixels.</p><p>Default value: <code>1</code></p></td></tr><tr><td valign="top">productCardBorderRadius</td><td valign="top"><p>integer &#x3C;int32> [ 0 .. 24 ]</p><p>The shape of the product card's corners or the degree of their rounding, represented in pixels.</p><p>Default value: <code>null</code> If not explicitly specified, value is inherited from the general <code>borderRadius</code> theming option.</p></td></tr><tr><td valign="top">productCardBrandColor</td><td valign="top"><p>string</p><p>The font color applied to the product's brand name.</p><p>The value can either be specified as</p><ul><li>Named color according to definition.</li><li>RGB Hexadecimal</li><li>RGB (Red, Green, Blue)</li><li>RGBA (Red, Green, Blue, Alpha)</li></ul><p>Default value: <code>#3e5b71</code></p></td></tr><tr><td valign="top">productCardBrandFontFamily</td><td valign="top"><p>string</p><p>The font family applied to the product's brand name.</p><p>If not explicitly specified, value is inherited value from the <code>productCardFontFamily</code> theming option.</p></td></tr><tr><td valign="top">productCardBrandFontSize</td><td valign="top"><p>integer &#x3C;int32> [ 8 .. 16 ]</p><p>The font size applied to the product's brand name, specified in pixels.</p><p>If not explicitly specified, value is inherited value from the <code>productCardFontSize</code> theming option.</p></td></tr><tr><td valign="top">productCardBrandFontWeight</td><td valign="top"><p>stringEnum: "100" "200" "300" "400" "500" "600" "700" "800" "900"</p><p>The font weight applied to the product's brand name.</p><p><code>&#x3C;font-weight-absolute></code> numeric values [1,1000].</p><ul><li><code>100</code></li><li><code>200</code></li><li><code>300</code></li><li><code>400</code> — normal</li><li><code>500</code></li><li><code>600</code></li><li><code>700</code> — bold</li><li><code>800</code></li><li><code>900</code></li></ul><p>Default value: <code>400</code></p></td></tr><tr><td valign="top">productCardBrandLineHeight</td><td valign="top"><p>integer &#x3C;int32> [ 10 .. 24 ]</p><p>The font line-height applied to the product's brand name, specified in pixels.</p><p>If not explicitly specified, value is inherited value from the <code>productCardLineHeight</code> theming option.</p></td></tr><tr><td valign="top">productCardBrandMarginBottom</td><td valign="top"><p>integer &#x3C;int32> [ 0 .. 8 ]</p><p>The outer spacing added below the product card's brand name component, specified in pixels.</p><p>Default value: <code>0</code></p></td></tr><tr><td valign="top">productCardBrandMarginTop</td><td valign="top"><p>integer &#x3C;int32> [ 0 .. 8 ]</p><p>The outer spacing added above the product card's brand name component, specified in pixels.</p><p>Default value: <code>0</code></p></td></tr><tr><td valign="top">productCardChapterMarkerColor</td><td valign="top"><p>string</p><p>The color of the product card's chapter marker.</p><p>The value can either be specified as</p><ul><li>Named color according to definition.</li><li>RGB Hexadecimal</li><li>RGB (Red, Green, Blue)</li><li>RGBA (Red, Green, Blue, Alpha)</li></ul><p>Default value: <code>#ffffff</code></p></td></tr><tr><td valign="top">productCardChapterMarkerIconColor</td><td valign="top"><p>string</p><p>The color of the product card's chapter marker icon.</p><p>The value can either be specified as</p><ul><li>Named color according to definition.</li><li>RGB Hexadecimal</li><li>RGB (Red, Green, Blue)</li><li>RGBA (Red, Green, Blue, Alpha)</li></ul><p>Default value: <code>#ffffff</code></p></td></tr><tr><td valign="top">productCardChapterMarkerOffBackgroundColor</td><td valign="top"><p>string</p><p>The background color of the product card's chapter marker when it is not focused.</p><p>The value can either be specified as</p><ul><li>Named color according to definition.</li><li>RGB Hexadecimal</li><li>RGB (Red, Green, Blue)</li><li>RGBA (Red, Green, Blue, Alpha)</li></ul><p>Default value: <code>#00000033</code></p></td></tr><tr><td valign="top">productCardChapterMarkerOnBackgroundColor</td><td valign="top"><p>string</p><p>The background color of the product card's chapter marker when it is focused.</p><p>The value can either be specified as</p><ul><li>Named color according to definition.</li><li>RGB Hexadecimal</li><li>RGB (Red, Green, Blue)</li><li>RGBA (Red, Green, Blue, Alpha)</li></ul><p>Default value: <code>#00000066</code></p></td></tr><tr><td valign="top">productCardColor</td><td valign="top"><p>string</p><p>The default font color applied to the product card.</p><p>The value can either be specified as</p><ul><li>Named color according to definition.</li><li>RGB Hexadecimal</li><li>RGB (Red, Green, Blue)</li><li>RGBA (Red, Green, Blue, Alpha)</li></ul><p>Default value: <code>#0c1f2d</code></p></td></tr><tr><td valign="top">productCardCtaAlignment</td><td valign="top"><p>stringEnum: "flex-end" "flex-start"</p><p>The vertical alignment of the product card's CTA component.</p><p>Default value: <code>flex-end</code></p></td></tr><tr><td valign="top">productCardCtaBackgroundColor</td><td valign="top"><p>string</p><p>The background color applied to the product card CTA.</p><p>The value can either be specified as</p><ul><li>Named color according to definition.</li><li>RGB Hexadecimal</li><li>RGB (Red, Green, Blue)</li><li>RGBA (Red, Green, Blue, Alpha)</li></ul><p>Default value: <code>#ffffff</code></p></td></tr><tr><td valign="top">productCardCtaBorderColor</td><td valign="top"><p>string</p><p>The border color applied to the product card CTA.</p><p>The value can either be specified as</p><ul><li>Named color according to definition.</li><li>RGB Hexadecimal</li><li>RGB (Red, Green, Blue)</li><li>RGBA (Red, Green, Blue, Alpha)</li></ul><p>Default value: <code>#e2e8ec</code></p></td></tr><tr><td valign="top">productCardCtaBorderRadius</td><td valign="top"><p>integer &#x3C;int32> [ 0 .. 16 ]</p><p>The border radius applied to the product card CTA.</p><p>To ensure a smooth and consistent border radius, the default value results from subtracting the sum of</p><ul><li><code>productCardPadding</code>,</li><li><code>productCardInfoMarginBottom</code> and</li><li><code>productCardCtaMargin</code></li></ul><p>from the product card’s border radius.</p></td></tr><tr><td valign="top">productCardCtaBorderWidth</td><td valign="top"><p>integer &#x3C;int32> [ 0 .. 12 ]</p><p>The width of the product card CTA's border, represented in pixels.</p><p>Default value: <code>1</code></p></td></tr><tr><td valign="top">productCardCtaColor</td><td valign="top"><p>string</p><p>The font color applied to the product card CTA.</p><p>The value can either be specified as</p><ul><li>Named color according to definition.</li><li>RGB Hexadecimal</li><li>RGB (Red, Green, Blue)</li><li>RGBA (Red, Green, Blue, Alpha)</li></ul><p>Default value: <code>#0c1f2d</code></p></td></tr><tr><td valign="top">productCardCtaDisabledBackgroundColor</td><td valign="top"><p>string</p><p>The background color applied to the product card CTA in disabled state.</p><p>The value can either be specified as</p><ul><li>Named color according to definition.</li><li>RGB Hexadecimal</li><li>RGB (Red, Green, Blue)</li><li>RGBA (Red, Green, Blue, Alpha)</li></ul><p>Default value: <code>#f1f0f1</code></p></td></tr><tr><td valign="top">productCardCtaDisabledBorderColor</td><td valign="top"><p>string</p><p>The border color applied to the product card CTA in disabled state.</p><p>The value can either be specified as</p><ul><li>Named color according to definition.</li><li>RGB Hexadecimal</li><li>RGB (Red, Green, Blue)</li><li>RGBA (Red, Green, Blue, Alpha)</li></ul><p>Default value: <code>#d9d9d9</code></p></td></tr><tr><td valign="top">productCardCtaDisabledColor</td><td valign="top"><p>string</p><p>The font color applied to the product card CTA in disabled state.</p><p>The value can either be specified as</p><ul><li>Named color according to definition.</li><li>RGB Hexadecimal</li><li>RGB (Red, Green, Blue)</li><li>RGBA (Red, Green, Blue, Alpha)</li></ul><p>Default value: <code>#89838b</code></p></td></tr><tr><td valign="top">productCardCtaFontFamily</td><td valign="top"><p>string</p><p>The font family applied to the product card CTA.</p><p>If not explicitly specified, value is inherited value from the <code>productCardFontFamily</code> theming option.</p></td></tr><tr><td valign="top">productCardCtaFontSize</td><td valign="top"><p>integer &#x3C;int32> [ 8 .. 16 ]</p><p>The font size applied to the product card CTA, represented in pixels.</p><p>If not explicitly specified, value is inherited value from the <code>productCardFontSize</code> theming option.</p></td></tr><tr><td valign="top">productCardCtaFontWeight</td><td valign="top"><p>stringEnum: "100" "200" "300" "400" "500" "600" "700" "800" "900"</p><p>The font weight applied to the product card CTA.</p><p><code>&#x3C;font-weight-absolute></code> numeric values [1,1000].</p><ul><li><code>100</code></li><li><code>200</code></li><li><code>300</code></li><li><code>400</code> — normal</li><li><code>500</code></li><li><code>600</code></li><li><code>700</code> — bold</li><li><code>800</code></li><li><code>900</code></li></ul><p>Default value: <code>700</code></p></td></tr><tr><td valign="top">productCardCtaLineHeight</td><td valign="top"><p>integer &#x3C;int32> [ 10 .. 24 ]</p><p>The font line-height applied to the product card CTA, represented in pixels.</p><p>If not explicitly specified, value is inherited value from the <code>productCardLineHeight</code> theming option.</p></td></tr><tr><td valign="top">productCardCtaMargin</td><td valign="top"><p>integer &#x3C;int32> [ 0 .. 8 ]</p><p>The outer spacing added evenly to all edges of the product card CTA, represented in pixels.</p><p>Default value: <code>4</code></p></td></tr><tr><td valign="top">productCardCtaPadding</td><td valign="top"><p>integer &#x3C;int32> [ 0 .. 16 ]</p><p>The inner spacing added evenly to all edges of the product card CTA, represented in pixels.</p><p>Default value: <code>6</code></p></td></tr><tr><td valign="top">productCardCurrentPriceFontSize</td><td valign="top"><p>integer &#x3C;int32> [ 8 .. 16 ]</p><p>The font size applied to the product card's current price row, represented in pixels.</p><p>If not explicitly specified, value is inherited value from the <code>productCardFontSize</code> theming option.</p></td></tr><tr><td valign="top">productCardCurrentPriceFontWeight</td><td valign="top"><p>stringEnum: "100" "200" "300" "400" "500" "600" "700" "800" "900"</p><p>The font weight applied to the product card's current price row.</p><p><code>&#x3C;font-weight-absolute></code> numeric values [1,1000].</p><ul><li><code>100</code></li><li><code>200</code></li><li><code>300</code></li><li><code>400</code> — normal</li><li><code>500</code></li><li><code>600</code></li><li><code>700</code> — bold</li><li><code>800</code></li><li><code>900</code></li></ul><p>Default value: <code>700</code></p></td></tr><tr><td valign="top">productCardCurrentPriceLineHeight</td><td valign="top"><p>integer &#x3C;int32> [ 10 .. 24 ]</p><p>The font line-height applied to the product card's current price row, represented in pixels.</p><p>If not explicitly specified, value is inherited value from the <code>productCardLineHeight</code> theming option.</p></td></tr><tr><td valign="top">productCardCurrentPriceMarginBottom</td><td valign="top"><p>integer &#x3C;int32> [ 0 .. 8 ]</p><p>The outer spacing added below the product card's current price component, specified in pixels.</p><p>Default value: <code>0</code></p></td></tr><tr><td valign="top">productCardCurrentPriceMarginTop</td><td valign="top"><p>integer &#x3C;int32> [ 0 .. 8 ]</p><p>The outer spacing added above the product card's current price component, specified in pixels.</p><p>Default value: <code>0</code></p></td></tr><tr><td valign="top">productCardDiscountFontSize</td><td valign="top"><p>integer &#x3C;int32> [ 8 .. 16 ]</p><p>The font size applied to the product card's discount row, represented in pixels.</p><p>If not explicitly specified, value is inherited value from the <code>productCardFontSize</code> theming option.</p></td></tr><tr><td valign="top">productCardDiscountLineHeight</td><td valign="top"><p>integer &#x3C;int32> [ 10 .. 24 ]</p><p>The font line-height applied to the product card's discount row, represented in pixels.</p><p>If not explicitly specified, value is inherited value from the <code>productCardLineHeight</code> theming option.</p></td></tr><tr><td valign="top">productCardDiscountMarginBottom</td><td valign="top"><p>integer &#x3C;int32> [ 0 .. 8 ]</p><p>The outer spacing added below the product card's discount component, specified in pixels.</p><p>Default value: <code>0</code></p></td></tr><tr><td valign="top">productCardDiscountMarginTop</td><td valign="top"><p>integer &#x3C;int32> [ 0 .. 8 ]</p><p>The outer spacing added above the product card's discount component, specified in pixels.</p><p>Default value: <code>0</code></p></td></tr><tr><td valign="top">productCardEmojiColor</td><td valign="top"><p>string</p><p>The font color applied to the product card's emoji icon.</p><p>The value can either be specified as</p><ul><li>Named color according to definition.</li><li>RGB Hexadecimal</li><li>RGB (Red, Green, Blue)</li><li>RGBA (Red, Green, Blue, Alpha)</li></ul><p>Default value: <code>#222023</code></p></td></tr><tr><td valign="top">productCardEmojiMarginHorizontal</td><td valign="top"><p>integer &#x3C;int32> [ 0 .. 12 ]</p><p>The horizontal outer spacing added evenly to all edges of the product card's emoji component, specified in pixels.</p><p>The emoji component renders the CTA used to add a product to wish list.</p><p>Default value: <code>4</code></p></td></tr><tr><td valign="top">productCardEmojiMarginVertical</td><td valign="top"><p>integer &#x3C;int32> [ 0 .. 12 ]</p><p>The vertical outer spacing added evenly to all edges of the product card's emoji component, specified in pixels.</p><p>The emoji component renders the CTA used to add a product to wish list.</p><p>Default value: <code>0</code></p></td></tr><tr><td valign="top">productCardEmojiOnColor</td><td valign="top"><p>string</p><p>The color of the product card's emoji icon when it is selected.</p><p>The value can either be specified as</p><ul><li>Named color according to definition.</li><li>RGB Hexadecimal</li><li>RGB (Red, Green, Blue)</li><li>RGBA (Red, Green, Blue, Alpha)</li></ul><p>Default value: <code>#ff6b9f</code></p></td></tr><tr><td valign="top">productCardFeaturedBackdropFilterRadius</td><td valign="top"><p>integer &#x3C;int32> [ 0 .. 16 ]</p><p>The level of distortion applied to the backdrop of a featured product card.</p><p>Default value: <code>4</code></p></td></tr><tr><td valign="top">productCardFeaturedBackgroundColor</td><td valign="top"><p>string</p><p>The background color of a featured product card.</p><p>The value can either be specified as</p><ul><li>Named color according to definition.</li><li>RGB Hexadecimal</li><li>RGB (Red, Green, Blue)</li><li>RGBA (Red, Green, Blue, Alpha)</li></ul><p>Default value: <code>#00000066</code></p></td></tr><tr><td valign="top">productCardFeaturedBorderColor</td><td valign="top"><p>string</p><p>The border color of a featured product card.</p><p>The value can either be specified as</p><ul><li>Named color according to definition.</li><li>RGB Hexadecimal</li><li>RGB (Red, Green, Blue)</li><li>RGBA (Red, Green, Blue, Alpha)</li></ul><p>Default value: <code>transparent</code></p></td></tr><tr><td valign="top">productCardFeaturedBrandColor</td><td valign="top"><p>string</p><p>The font color applied to the featured product's brand name.</p><p>The value can either be specified as</p><ul><li>Named color according to definition.</li><li>RGB Hexadecimal</li><li>RGB (Red, Green, Blue)</li><li>RGBA (Red, Green, Blue, Alpha)</li></ul><p>Default value: <code>#ffffff</code></p></td></tr><tr><td valign="top">productCardFeaturedColor</td><td valign="top"><p>string</p><p>The default font color applied to the featured product card.</p><p>The value can either be specified as</p><ul><li>Named color according to definition.</li><li>RGB Hexadecimal</li><li>RGB (Red, Green, Blue)</li><li>RGBA (Red, Green, Blue, Alpha)</li></ul><p>Default value: <code>#ffffff</code></p></td></tr><tr><td valign="top">productCardFeaturedCtaBackgroundColor</td><td valign="top"><p>string</p><p>The background color applied to the featured product card CTA.</p><p>The value can either be specified as</p><ul><li>Named color according to definition.</li><li>RGB Hexadecimal</li><li>RGB (Red, Green, Blue)</li><li>RGBA (Red, Green, Blue, Alpha)</li></ul><p>Default value: <code>transparent</code></p></td></tr><tr><td valign="top">productCardFeaturedCtaBorderColor</td><td valign="top"><p>string</p><p>The border color applied to the featured product card CTA.</p><p>The value can either be specified as</p><ul><li>Named color according to definition.</li><li>RGB Hexadecimal</li><li>RGB (Red, Green, Blue)</li><li>RGBA (Red, Green, Blue, Alpha)</li></ul><p>Default value: <code>#ffffff</code></p></td></tr><tr><td valign="top">productCardFeaturedCtaColor</td><td valign="top"><p>string</p><p>The font color applied to the featured product card CTA.</p><p>The value can either be specified as</p><ul><li>Named color according to definition.</li><li>RGB Hexadecimal</li><li>RGB (Red, Green, Blue)</li><li>RGBA (Red, Green, Blue, Alpha)</li></ul><p>Default value: <code>#ffffff</code></p></td></tr><tr><td valign="top">productCardFeaturedCtaDisabledBackgroundColor</td><td valign="top"><p>string</p><p>The background color applied to the featured product card CTA in disabled state.</p><p>The value can either be specified as</p><ul><li>Named color according to definition.</li><li>RGB Hexadecimal</li><li>RGB (Red, Green, Blue)</li><li>RGBA (Red, Green, Blue, Alpha)</li></ul><p>Default value: <code>#f1f0f1</code></p></td></tr><tr><td valign="top">productCardFeaturedCtaDisabledBorderColor</td><td valign="top"><p>string</p><p>The border color applied to the featured product card CTA in disabled state.</p><p>The value can either be specified as</p><ul><li>Named color according to definition.</li><li>RGB Hexadecimal</li><li>RGB (Red, Green, Blue)</li><li>RGBA (Red, Green, Blue, Alpha)</li></ul><p>Default value: <code>#d9d9d9</code></p></td></tr><tr><td valign="top">productCardFeaturedCtaDisabledColor</td><td valign="top"><p>string</p><p>The font color applied to the featured product card CTA in disabled state.</p><p>The value can either be specified as</p><ul><li>Named color according to definition.</li><li>RGB Hexadecimal</li><li>RGB (Red, Green, Blue)</li><li>RGBA (Red, Green, Blue, Alpha)</li></ul><p>Default value: <code>#89838b</code></p></td></tr><tr><td valign="top">productCardFeaturedEmojiColor</td><td valign="top"><p>string</p><p>The font color applied to the featured product card's emoji icon.</p><p>The value can either be specified as</p><ul><li>Named color according to definition.</li><li>RGB Hexadecimal</li><li>RGB (Red, Green, Blue)</li><li>RGBA (Red, Green, Blue, Alpha)</li></ul><p>Default value: <code>#ffffff</code></p></td></tr><tr><td valign="top">productCardFeaturedEmojiOnColor</td><td valign="top"><p>string</p><p>The color of the featured product card's emoji icon when it is selected.</p><p>The value can either be specified as</p><ul><li>Named color according to definition.</li><li>RGB Hexadecimal</li><li>RGB (Red, Green, Blue)</li><li>RGBA (Red, Green, Blue, Alpha)</li></ul><p>Default value: <code>#ffffff</code></p></td></tr><tr><td valign="top">productCardFeaturedPriceColor</td><td valign="top"><p>string</p><p>The font color applied to the featured product's price.</p><p>The value can either be specified as</p><ul><li>Named color according to definition.</li><li>RGB Hexadecimal</li><li>RGB (Red, Green, Blue)</li><li>RGBA (Red, Green, Blue, Alpha)</li></ul><p>Default value: <code>#ffffff</code></p></td></tr><tr><td valign="top">productCardFeaturedTitleColor</td><td valign="top"><p>string</p><p>The font color applied to the featured product's title.</p><p>The value can either be specified as</p><ul><li>Named color according to definition.</li><li>RGB Hexadecimal</li><li>RGB (Red, Green, Blue)</li><li>RGBA (Red, Green, Blue, Alpha)</li></ul><p>Default value: <code>#ffffff</code></p></td></tr><tr><td valign="top">productCardFontFamily</td><td valign="top"><p>string</p><p>The default font family applied to the product card.</p><p>If not explicitly specified, value is inherited from the general <code>primaryFontFamily</code> theming option.</p></td></tr><tr><td valign="top">productCardFontSize</td><td valign="top"><p>integer &#x3C;int32> [ 8 .. 16 ]</p><p>The default font size applied to the product card, represented in pixels.</p><p>If not explicitly specified, value is inherited value from the general <code>primaryFontSize</code> theming option.</p></td></tr><tr><td valign="top">productCardGap</td><td valign="top"><p>integer &#x3C;int32> [ 0 .. 24 ]</p><p>The gap between the the product card's thumbnail and product info components, represented in pixels.</p><p>Default value: <code>8</code></p></td></tr><tr><td valign="top">productCardHighlightBorderColor</td><td valign="top"><p>string</p><p>The border color of a highlighted product card.</p><p>The value can either be specified as</p><ul><li>Named color according to definition.</li><li>RGB Hexadecimal</li><li>RGB (Red, Green, Blue)</li><li>RGBA (Red, Green, Blue, Alpha)</li></ul><p>Default value: <code>#e2e8ec</code></p></td></tr><tr><td valign="top">productCardHighlightBoxShadowBlurRadius</td><td valign="top"><p>integer &#x3C;int32> [ 0 .. 24 ]</p><p>The blur radius of the box shadow applied to a highlighted product card.</p><p>Default value: <code>8</code></p></td></tr><tr><td valign="top">productCardHighlightBoxShadowColor</td><td valign="top"><p>string</p><p>The color of the box shadow applied to a highlighted product card.</p><p>The value can either be specified as</p><ul><li>Named color according to definition.</li><li>RGB Hexadecimal</li><li>RGB (Red, Green, Blue)</li><li>RGBA (Red, Green, Blue, Alpha)</li></ul><p>Default value: <code>#d285f1</code></p></td></tr><tr><td valign="top">productCardHighlightBoxShadowOffsetX</td><td valign="top"><p>integer &#x3C;int32> [ 0 .. 8 ]</p><p>The horizontal offset of the box shadow applied to a highlighted product card.</p><p>Default value: <code>0</code></p></td></tr><tr><td valign="top">productCardHighlightBoxShadowOffsetY</td><td valign="top"><p>integer &#x3C;int32> [ 0 .. 8 ]</p><p>The vertical offset of the box shadow applied to a highlighted product card.</p><p>Default value: <code>1</code></p></td></tr><tr><td valign="top">productCardHighlightBoxShadowSpreadRadius</td><td valign="top"><p>integer &#x3C;int32> [ 0 .. 48 ]</p><p>The spread radius of the box shadow applied to a highlighted product card.</p><p>Default value: <code>0</code></p></td></tr><tr><td valign="top">productCardInfoMarginBottom</td><td valign="top"><p>integer &#x3C;int32> [ 0 .. 8 ]</p><p>The outer spacing added below the product card's product info component, specified in pixels.</p><p>Default value: <code>2</code></p></td></tr><tr><td valign="top">productCardInfoMarginTop</td><td valign="top"><p>integer &#x3C;int32> [ 0 .. 8 ]</p><p>The outer spacing added above the product card's product info component, specified in pixels.</p><p>Default value: <code>2</code></p></td></tr><tr><td valign="top">productCardLineHeight</td><td valign="top"><p>integer &#x3C;int32> [ 10 .. 24 ]</p><p>The default font line-height applied to the product card, represented in pixels.</p><p>If not explicitly specified, value is inherited value from the general <code>primaryLineHeight</code> theming option.</p></td></tr><tr><td valign="top">productCardMinHeight</td><td valign="top"><p>integer &#x3C;int32> [ 60 .. 120 ]</p><p>The minimum height of the product card, represented in pixels.</p><p>Default value: <code>60</code></p></td></tr><tr><td valign="top">productCardPadding</td><td valign="top"><p>integer &#x3C;int32> [ 0 .. 16 ]</p><p>The inner spacing added evenly to all edges the product card, specified in pixels.</p><p>Default value: <code>4</code></p></td></tr><tr><td valign="top">productCardPriceAlignment</td><td valign="top"><p>stringEnum: "flex-end" "flex-start"</p><p>The vertical alignment of the product card's price info component.</p><p>Default value: <code>flex-end</code></p></td></tr><tr><td valign="top">productCardPriceColor</td><td valign="top"><p>string</p><p>The font color applied to the current price, if it represents the original price of the product.</p><p>The value can either be specified as</p><ul><li>Named color according to definition.</li><li>RGB Hexadecimal</li><li>RGB (Red, Green, Blue)</li><li>RGBA (Red, Green, Blue, Alpha)</li></ul><p>Default value: <code>#3e5b71</code></p></td></tr><tr><td valign="top">productCardSalePriceColor</td><td valign="top"><p>string</p><p>The font color applied to the current price, if it represents the sale price of the product.</p><p>The value can either be specified as</p><ul><li>Named color according to definition.</li><li>RGB Hexadecimal</li><li>RGB (Red, Green, Blue)</li><li>RGBA (Red, Green, Blue, Alpha)</li></ul><p>Default value: <code>#f42660</code></p></td></tr><tr><td valign="top">productCardThumbnailBorderRadius</td><td valign="top"><p>integer &#x3C;int32> [ 0 .. 16 ]</p><p>The border radius applied to the product card thumbnail.</p><p>To ensure a smooth and consistent border radius, the default value results from subtracting the sum of</p><ul><li><code>productCardPadding</code> and</li><li><code>productCardThumbnailMargin</code></li></ul><p>from the product card’s border radius.</p></td></tr><tr><td valign="top">productCardThumbnailMargin</td><td valign="top"><p>integer &#x3C;int32> [ 0 .. 16 ]</p><p>The outer spacing added evenly to all edges of the product card thumbnail, represented in pixels.</p><p>Default value: <code>4</code></p></td></tr><tr><td valign="top">productCardTitleColor</td><td valign="top"><p>string</p><p>The font color applied to the product's title.</p><p>The value can either be specified as</p><ul><li>Named color according to definition.</li><li>RGB Hexadecimal</li><li>RGB (Red, Green, Blue)</li><li>RGBA (Red, Green, Blue, Alpha)</li></ul><p>Default value: <code>#0c1f2d</code></p></td></tr><tr><td valign="top">productCardTitleFontFamily</td><td valign="top"><p>string</p><p>The font family applied to the product's title.</p><p>If not explicitly specified, value is inherited value from the <code>productCardFontFamily</code> theming option.</p></td></tr><tr><td valign="top">productCardTitleFontWeight</td><td valign="top"><p>stringEnum: "100" "200" "300" "400" "500" "600" "700" "800" "900"</p><p>The font weight applied to the product's title.</p><p><code>&#x3C;font-weight-absolute></code> numeric values [1,1000].</p><ul><li><code>100</code></li><li><code>200</code></li><li><code>300</code></li><li><code>400</code> — normal</li><li><code>500</code></li><li><code>600</code></li><li><code>700</code> — bold</li><li><code>800</code></li><li><code>900</code></li></ul><p>Default value: <code>400</code></p></td></tr><tr><td valign="top">productCardTitleMarginBottom</td><td valign="top"><p>integer &#x3C;int32> [ 0 .. 8 ]</p><p>The outer spacing added below the product card's title component, specified in pixels.</p><p>Default value: <code>0</code></p></td></tr><tr><td valign="top">productCardTitleMarginTop</td><td valign="top"><p>integer &#x3C;int32> [ 0 .. 8 ]</p><p>The outer spacing added above the product card's title component, specified in pixels.</p><p>Default value: <code>0</code></p></td></tr><tr><td valign="top">productCardUnitPriceFontSize</td><td valign="top"><p>integer &#x3C;int32> [ 10 .. 24 ]</p><p>The font size applied to the product card's unit pricing row, represented in pixels.</p><p>If not explicitly specified, value is inherited value from the <code>productCardFontSize</code> theming option.</p></td></tr><tr><td valign="top">productCardUnitPriceLineHeight</td><td valign="top"><p>integer &#x3C;int32> [ 10 .. 24 ]</p><p>The font line-height applied to the product card's unit pricing row, represented in pixels.</p><p>If not explicitly specified, value is inherited value from the <code>productCardLineHeight</code> theming option.</p></td></tr><tr><td valign="top">productCardUnitPriceMarginBottom</td><td valign="top"><p>integer &#x3C;int32> [ 0 .. 8 ]</p><p>The outer spacing added below the product card's unit pricing component, specified in pixels.</p><p>Default value: <code>0</code></p></td></tr><tr><td valign="top">productCardUnitPriceMarginTop</td><td valign="top"><p>integer &#x3C;int32> [ 0 .. 8 ]</p><p>The outer spacing added above the product card's unit pricing component, specified in pixels.</p><p>Default value: <code>0</code></p></td></tr><tr><td valign="top">productListCtaBackgroundColor</td><td valign="top"><p>string</p><p>The background color applied to the product list CTA.</p><p>The value can either be specified as</p><ul><li>Named color according to definition.</li><li>RGB Hexadecimal</li><li>RGB (Red, Green, Blue)</li><li>RGBA (Red, Green, Blue, Alpha)</li></ul><p>If not explicitly specified, value is inherited value from the <code>primaryControlBackgroundColor</code> theming option.</p></td></tr><tr><td valign="top">productListCtaBorderColor</td><td valign="top"><p>string</p><p>The border color applied to the product list CTA.</p><p>The value can either be specified as</p><ul><li>Named color according to definition.</li><li>RGB Hexadecimal</li><li>RGB (Red, Green, Blue)</li><li>RGBA (Red, Green, Blue, Alpha)</li></ul><p>If not explicitly specified, value is inherited value from the <code>primaryControlBorderColor</code> theming option.</p></td></tr><tr><td valign="top">productListCtaIconColor</td><td valign="top"><p>string</p><p>The color of the product list CTA's icon.</p><p>The value can either be specified as</p><ul><li>Named color according to definition.</li><li>RGB Hexadecimal</li><li>RGB (Red, Green, Blue)</li><li>RGBA (Red, Green, Blue, Alpha)</li></ul><p>If not explicitly specified, value is inherited value from the <code>primaryControlIconColor</code> theming option.</p></td></tr><tr><td valign="top">productListCtaLabelColor</td><td valign="top"><p>string</p><p>The font color applied to the product list CTA's label.</p><p>The value can either be specified as</p><ul><li>Named color according to definition.</li><li>RGB Hexadecimal</li><li>RGB (Red, Green, Blue)</li><li>RGBA (Red, Green, Blue, Alpha)</li></ul><p>If not explicitly specified, value is inherited value from the <code>primaryControlLabelColor</code> theming option.</p></td></tr><tr><td valign="top">settingsAccentColor</td><td valign="top"><p>string</p><p>The color applied to the settings components in selected/active state.</p><p>The value can either be specified as</p><ul><li>Named color according to definition.</li><li>RGB Hexadecimal</li><li>RGB (Red, Green, Blue)</li><li>RGBA (Red, Green, Blue, Alpha)</li></ul><p>Default value: <code>#c23eea</code></p></td></tr><tr><td valign="top">settingsCtaBackgroundColor</td><td valign="top"><p>string</p><p>The background color applied to a settings CTA.</p><p>The value can either be specified as</p><ul><li>Named color according to definition.</li><li>RGB Hexadecimal</li><li>RGB (Red, Green, Blue)</li><li>RGBA (Red, Green, Blue, Alpha)</li></ul><p>Default value: <code>#f1f0f1</code></p></td></tr><tr><td valign="top">settingsCtaBorderColor</td><td valign="top"><p>string</p><p>The border color applied to a settings CTA.</p><p>The value can either be specified as</p><ul><li>Named color according to definition.</li><li>RGB Hexadecimal</li><li>RGB (Red, Green, Blue)</li><li>RGBA (Red, Green, Blue, Alpha)</li></ul><p>Default value: <code>#d9d9d9</code></p></td></tr><tr><td valign="top">settingsCtaBorderRadius</td><td valign="top"><p>integer &#x3C;int32> [ 0 .. 16 ]</p><p>The border radius applied to a settings CTA.</p><p>Default value: <code>8</code></p></td></tr><tr><td valign="top">settingsCtaColor</td><td valign="top"><p>string</p><p>The font color applied to a settings CTA.</p><p>The value can either be specified as</p><ul><li>Named color according to definition.</li><li>RGB Hexadecimal</li><li>RGB (Red, Green, Blue)</li><li>RGBA (Red, Green, Blue, Alpha)</li></ul><p>Default value: <code>#ffffff</code></p></td></tr><tr><td valign="top">settingsCtaDisabledBackgroundColor</td><td valign="top"><p>string</p><p>The background color applied to a settings CTA in disabled state.</p><p>The value can either be specified as</p><ul><li>Named color according to definition.</li><li>RGB Hexadecimal</li><li>RGB (Red, Green, Blue)</li><li>RGBA (Red, Green, Blue, Alpha)</li></ul><p>Default value: <code>#f1f0f1</code></p></td></tr><tr><td valign="top">settingsCtaDisabledBorderColor</td><td valign="top"><p>string</p><p>The border color applied to a settings CTA in disabled state.</p><p>The value can either be specified as</p><ul><li>Named color according to definition.</li><li>RGB Hexadecimal</li><li>RGB (Red, Green, Blue)</li><li>RGBA (Red, Green, Blue, Alpha)</li></ul><p>Default value: <code>#d9d9d9</code></p></td></tr><tr><td valign="top">settingsCtaDisabledColor</td><td valign="top"><p>string</p><p>The font color applied to a settings CTA in disabled state.</p><p>The value can either be specified as</p><ul><li>Named color according to definition.</li><li>RGB Hexadecimal</li><li>RGB (Red, Green, Blue)</li><li>RGBA (Red, Green, Blue, Alpha)</li></ul><p>Default value: <code>#89838b</code></p></td></tr><tr><td valign="top">settingsCtaFontSize</td><td valign="top"><p>integer &#x3C;int32> [ 8 .. 16 ]</p><p>The font size applied to a settings CTA, represented in pixels.</p><p>Default value: <code>14</code></p></td></tr><tr><td valign="top">settingsCtaFontWeight</td><td valign="top"><p>stringEnum: "100" "200" "300" "400" "500" "600" "700" "800" "900"</p><p>The font weight applied to a settings CTA.</p><p><code>&#x3C;font-weight-absolute></code> numeric values [1,1000].</p><ul><li><code>100</code></li><li><code>200</code></li><li><code>300</code></li><li><code>400</code> — normal</li><li><code>500</code></li><li><code>600</code></li><li><code>700</code> — bold</li><li><code>800</code></li><li><code>900</code></li></ul><p>Default value: <code>600</code></p></td></tr><tr><td valign="top">settingsCtaLineHeight</td><td valign="top"><p>integer &#x3C;int32> [ 10 .. 24 ]</p><p>The font line-height applied to a settings CTA, represented in pixels.</p><p>Default value: <code>20</code></p></td></tr><tr><td valign="top">settingsCtaPaddingHorizontal</td><td valign="top"><p>integer &#x3C;int32> [ 0 .. 16 ]</p><p>The horizontal padding applied to a settings CTA, represented in pixels.</p><p>Default value: <code>16</code></p></td></tr><tr><td valign="top">settingsCtaPaddingVertical</td><td valign="top"><p>integer &#x3C;int32> [ 0 .. 16 ]</p><p>The vertical padding applied to a settings CTA, represented in pixels.</p><p>Default value: <code>12</code></p></td></tr><tr><td valign="top">settingsInputActiveBorderColor</td><td valign="top"><p>string</p><p>The border color applied to a settings input in focused/active state.</p><p>The value can either be specified as</p><ul><li>Named color according to definition.</li><li>RGB Hexadecimal</li><li>RGB (Red, Green, Blue)</li><li>RGBA (Red, Green, Blue, Alpha)</li></ul><p>Default value: <code>#c23eea</code></p></td></tr><tr><td valign="top">settingsInputBackgroundColor</td><td valign="top"><p>string</p><p>The background color applied to a settings input.</p><p>The value can either be specified as</p><ul><li>Named color according to definition.</li><li>RGB Hexadecimal</li><li>RGB (Red, Green, Blue)</li><li>RGBA (Red, Green, Blue, Alpha)</li></ul><p>Default value: <code>#ffffff</code></p></td></tr><tr><td valign="top">settingsInputBorderColor</td><td valign="top"><p>string</p><p>The border color applied to a settings input.</p><p>The value can either be specified as</p><ul><li>Named color according to definition.</li><li>RGB Hexadecimal</li><li>RGB (Red, Green, Blue)</li><li>RGBA (Red, Green, Blue, Alpha)</li></ul><p>Default value: <code>#e2e8ec</code></p></td></tr><tr><td valign="top">settingsInputBorderRadius</td><td valign="top"><p>integer &#x3C;int32> [ 0 .. 16 ]</p><p>The shape of a settings input's corners or the degree of their rounding, represented in pixels.</p><p>Default value: <code>8</code></p></td></tr><tr><td valign="top">settingsInputColor</td><td valign="top"><p>string</p><p>The font color applied to a settings input.</p><p>The value can either be specified as</p><ul><li>Named color according to definition.</li><li>RGB Hexadecimal</li><li>RGB (Red, Green, Blue)</li><li>RGBA (Red, Green, Blue, Alpha)</li></ul><p>Default value: <code>#30083b</code></p></td></tr><tr><td valign="top">settingsInputDisabledBackgroundColor</td><td valign="top"><p>string</p><p>The background color applied to a settings input in disabled state.</p><p>The value can either be specified as</p><ul><li>Named color according to definition.</li><li>RGB Hexadecimal</li><li>RGB (Red, Green, Blue)</li><li>RGBA (Red, Green, Blue, Alpha)</li></ul><p>Default value: <code>#f4f6f8</code></p></td></tr><tr><td valign="top">settingsInputDisabledBorderColor</td><td valign="top"><p>string</p><p>The border color applied to a settings input in disabled state.</p><p>The value can either be specified as</p><ul><li>Named color according to definition.</li><li>RGB Hexadecimal</li><li>RGB (Red, Green, Blue)</li><li>RGBA (Red, Green, Blue, Alpha)</li></ul><p>Default value: <code>#e2e8ec</code></p></td></tr><tr><td valign="top">settingsInputDisabledColor</td><td valign="top"><p>string</p><p>The font color applied to a settings input in disabled state.</p><p>The value can either be specified as</p><ul><li>Named color according to definition.</li><li>RGB Hexadecimal</li><li>RGB (Red, Green, Blue)</li><li>RGBA (Red, Green, Blue, Alpha)</li></ul><p>Default value: <code>#89838b</code></p></td></tr><tr><td valign="top">settingsInputFontSize</td><td valign="top"><p>integer &#x3C;int32> [ 8 .. 16 ]</p><p>The font size applied to a settings input, represented in pixels.</p><p>Default value: <code>14</code></p></td></tr><tr><td valign="top">settingsInputLineHeight</td><td valign="top"><p>integer &#x3C;int32> [ 10 .. 24 ]</p><p>The font line-height applied to a settings input, represented in pixels.</p><p>Default value: <code>20</code></p></td></tr><tr><td valign="top">settingsInputPaddingHorizontal</td><td valign="top"><p>integer &#x3C;int32> [ 0 .. 16 ]</p><p>The horizontal padding applied to a settings input, represented in pixels.</p><p>Default value: <code>16</code></p></td></tr><tr><td valign="top">settingsInputPaddingVertical</td><td valign="top"><p>integer &#x3C;int32> [ 0 .. 16 ]</p><p>The vertical padding applied to a settings input, represented in pixels.</p><p>Default value: <code>12</code></p></td></tr><tr><td valign="top">settingsNeutralColor</td><td valign="top"><p>string</p><p>The color applied to the settings components in neutral/in-active state.</p><p>The value can either be specified as</p><ul><li>Named color according to definition.</li><li>RGB Hexadecimal</li><li>RGB (Red, Green, Blue)</li><li>RGBA (Red, Green, Blue, Alpha)</li></ul><p>Default value: <code>#89838b</code></p></td></tr><tr><td valign="top">settingsOptionBackgroundColor</td><td valign="top"><p>string</p><p>The background color applied to a settings option.</p><p>The value can either be specified as</p><ul><li>Named color according to definition.</li><li>RGB Hexadecimal</li><li>RGB (Red, Green, Blue)</li><li>RGBA (Red, Green, Blue, Alpha)</li></ul><p>Default value: <code>#ffffff</code></p></td></tr><tr><td valign="top">settingsOptionBorderColor</td><td valign="top"><p>string</p><p>The border color applied to a settings option.</p><p>The value can either be specified as</p><ul><li>Named color according to definition.</li><li>RGB Hexadecimal</li><li>RGB (Red, Green, Blue)</li><li>RGBA (Red, Green, Blue, Alpha)</li></ul><p>Default value: <code>transparent</code></p></td></tr><tr><td valign="top">settingsOptionBorderWidth</td><td valign="top"><p>integer &#x3C;int32> [ 0 .. 10 ]</p><p>The width of the border applied to a settings option, represented in pixels.</p><p>Default value: <code>1</code></p></td></tr><tr><td valign="top">settingsOptionBorderRadius</td><td valign="top"><p>integer &#x3C;int32> [ 0 .. 16 ]</p><p>The shape of a settings options's corners or the degree of their rounding, represented in pixels.</p><p>Default value: <code>8</code></p></td></tr><tr><td valign="top">settingsOptionGap</td><td valign="top"><p>integer &#x3C;int32> [ 0 .. 16 ]</p><p>The spacing between settings options, represented in pixels.</p><p>Default value: <code>12</code></p></td></tr><tr><td valign="top">settingsOptionPaddingHorizontal</td><td valign="top"><p>integer &#x3C;int32> [ 0 .. 16 ]</p><p>The horizontal padding applied to a settings option, represented in pixels.</p><p>Default value: <code>12</code></p></td></tr><tr><td valign="top">settingsOptionPaddingVertical</td><td valign="top"><p>integer &#x3C;int32> [ 0 .. 16 ]</p><p>The verticla padding applied to a settings option, represented in pixels.</p><p>Default value: <code>12</code></p></td></tr><tr><td valign="top">shoppingCartCtaBackgroundColor</td><td valign="top"><p>string</p><p>The background color applied to the shopping cart CTA.</p><p>The value can either be specified as</p><ul><li>Named color according to definition.</li><li>RGB Hexadecimal</li><li>RGB (Red, Green, Blue)</li><li>RGBA (Red, Green, Blue, Alpha)</li></ul><p>If not explicitly specified, value is inherited value from the <code>primaryControlBackgroundColor</code> theming option.</p></td></tr><tr><td valign="top">shoppingCartCtaBorderColor</td><td valign="top"><p>string</p><p>The border color applied to the shopping cart CTA.</p><p>The value can either be specified as</p><ul><li>Named color according to definition.</li><li>RGB Hexadecimal</li><li>RGB (Red, Green, Blue)</li><li>RGBA (Red, Green, Blue, Alpha)</li></ul><p>If not explicitly specified, value is inherited value from the <code>primaryControlBorderColor</code> theming option.</p></td></tr><tr><td valign="top">shoppingCartCtaIconColor</td><td valign="top"><p>string</p><p>The color of the shopping cart CTA's icon.</p><p>The value can either be specified as</p><ul><li>Named color according to definition.</li><li>RGB Hexadecimal</li><li>RGB (Red, Green, Blue)</li><li>RGBA (Red, Green, Blue, Alpha)</li></ul><p>If not explicitly specified, value is inherited value from the <code>primaryControlIconColor</code> theming option.</p></td></tr><tr><td valign="top">shoppingCartCtaLabelColor</td><td valign="top"><p>string</p><p>The font color applied to the shopping cart CTA's label.</p><p>The value can either be specified as</p><ul><li>Named color according to definition.</li><li>RGB Hexadecimal</li><li>RGB (Red, Green, Blue)</li><li>RGBA (Red, Green, Blue, Alpha)</li></ul><p>If not explicitly specified, value is inherited value from the <code>primaryControlLabelColor</code> theming option.</p></td></tr><tr><td valign="top">socialSharingCtaBackgroundColor</td><td valign="top"><p>string</p><p>The background color applied to the social sharing CTA.</p><p>The value can either be specified as</p><ul><li>Named color according to definition.</li><li>RGB Hexadecimal</li><li>RGB (Red, Green, Blue)</li><li>RGBA (Red, Green, Blue, Alpha)</li></ul><p>If not explicitly specified, value is inherited value from the <code>primaryControlBackgroundColor</code> theming option.</p></td></tr><tr><td valign="top">socialSharingCtaBorderColor</td><td valign="top"><p>string</p><p>The border color applied to the social sharing CTA.</p><p>The value can either be specified as</p><ul><li>Named color according to definition.</li><li>RGB Hexadecimal</li><li>RGB (Red, Green, Blue)</li><li>RGBA (Red, Green, Blue, Alpha)</li></ul><p>If not explicitly specified, value is inherited value from the <code>primaryControlBorderColor</code> theming option.</p></td></tr><tr><td valign="top">socialSharingCtaIconColor</td><td valign="top"><p>string</p><p>The color of the social sharing CTA's icon.</p><p>The value can either be specified as</p><ul><li>Named color according to definition.</li><li>RGB Hexadecimal</li><li>RGB (Red, Green, Blue)</li><li>RGBA (Red, Green, Blue, Alpha)</li></ul><p>If not explicitly specified, value is inherited value from the <code>primaryControlIconColor</code> theming option.</p></td></tr><tr><td valign="top">socialSharingCtaLabelColor</td><td valign="top"><p>string</p><p>The font color applied to the social sharing CTA's label.</p><p>The value can either be specified as</p><ul><li>Named color according to definition.</li><li>RGB Hexadecimal</li><li>RGB (Red, Green, Blue)</li><li>RGBA (Red, Green, Blue, Alpha)</li></ul><p>If not explicitly specified, value is inherited value from the <code>primaryControlLabelColor</code> theming option.</p></td></tr><tr><td valign="top">sponsorBadgeColor</td><td valign="top"><p>string</p><p>The font colour of the sponsor badge.</p><p>The value can either be specified as</p><ul><li>Named color according to definition.</li><li>RGB Hexadecimal</li><li>RGB (Red, Green, Blue)</li><li>RGBA (Red, Green, Blue, Alpha)</li></ul><p>If not explicitly specified, value is inherited value from the <code>playerHeaderColor</code> theming option.</p></td></tr><tr><td valign="top">sponsorBadgeFontFamily</td><td valign="top"><p>string</p><p>The font family applied to the sponsor badge.</p><p>If not explicitly specified, value is inherited value from the <code>primaryFontFamily</code> theming option.</p></td></tr><tr><td valign="top">sponsorBadgeFontSize</td><td valign="top"><p>integer &#x3C;int32> [ 8 .. 18 ]</p><p>The font size of the sponsor badge, specified in pixels.</p><p>If not explicitly specified, value is inherited value from the <code>playerHeaderFontSize</code> theming option.</p></td></tr><tr><td valign="top">sponsorBadgeIconColor</td><td valign="top"><p>string</p><p>The colour of the sponsor badge icon.</p><p>The value can either be specified as</p><ul><li>Named color according to definition.</li><li>RGB Hexadecimal</li><li>RGB (Red, Green, Blue)</li><li>RGBA (Red, Green, Blue, Alpha)</li></ul><p>If not explicitly specified, value is inherited value from the <code>sponsorBadgeColor</code> theming option.</p></td></tr><tr><td valign="top">sponsorBadgeIconSize</td><td valign="top"><p>integer &#x3C;int32> [ 10 .. 24 ]</p><p>The size of the sponsor badge icon, specified in pixels.</p><p>Default value: <code>18</code></p></td></tr><tr><td valign="top">sponsorBadgeLineHeight</td><td valign="top"><p>integer &#x3C;int32> [ 10 .. 24 ]</p><p>The font line-height of the sponsor badge, specified in pixels.</p><p>If not explicitly specified, value is inherited value from the <code>playerHeaderLineHeight</code> theming option.</p></td></tr><tr><td valign="top">stickerBadgeBackgroundColor</td><td valign="top"><p>string</p><p>The background color applied to the sticker badge.</p><p>The value can either be specified as</p><ul><li>Named color according to definition.</li><li>RGB Hexadecimal</li><li>RGB (Red, Green, Blue)</li><li>RGBA (Red, Green, Blue, Alpha)</li></ul><p>If not explicitly specified, value is inherited value from the <code>primaryControlBackgroundColor</code> theming option.</p></td></tr><tr><td valign="top">stickerBadgeBorderColor</td><td valign="top"><p>string</p><p>The border color applied to the sticker badge.</p><p>The value can either be specified as</p><ul><li>Named color according to definition.</li><li>RGB Hexadecimal</li><li>RGB (Red, Green, Blue)</li><li>RGBA (Red, Green, Blue, Alpha)</li></ul><p>If not explicitly specified, value is inherited value from the <code>primaryControlBorderColor</code> theming option.</p></td></tr><tr><td valign="top">stickerBadgeColor</td><td valign="top"><p>string</p><p>The font color of the sticker badge label.</p><p>The value can either be specified as</p><ul><li>Named color according to definition.</li><li>RGB Hexadecimal</li><li>RGB (Red, Green, Blue)</li><li>RGBA (Red, Green, Blue, Alpha)</li></ul><p>If not explicitly specified, value is inherited value from the <code>primaryColor</code> theming option. Please see <code>primaryColor</code> for its default value.</p></td></tr><tr><td valign="top">stickerBadgeFontFamily</td><td valign="top"><p>string</p><p>The font family of the sticker badge label.</p><p>If not explicitly specified, value is inherited value from the <code>primaryFontFamily</code> theming option.</p></td></tr><tr><td valign="top">stickerBadgeFontSize</td><td valign="top"><p>integer &#x3C;int32> [ 8 .. 16 ]</p><p>The font size applied to the sticker's badge value, specified in pixels.</p><p>If not explicitly specified, value is inherited value from the <code>primaryFontSize</code> theming option.</p></td></tr><tr><td valign="top">stickerBadgeIconBackgroundColor</td><td valign="top"><p>string</p><p>The background colour of the sticker badge icon.</p><p>The value can either be specified as</p><ul><li>Named color according to definition.</li><li>RGB Hexadecimal</li><li>RGB (Red, Green, Blue)</li><li>RGBA (Red, Green, Blue, Alpha)</li></ul><p>Default value: <code>#0c1f2d</code></p></td></tr><tr><td valign="top">stickerBadgeIconColor</td><td valign="top"><p>string</p><p>The color of the sticker badge's icon.</p><p>The value can either be specified as</p><ul><li>Named color according to definition.</li><li>RGB Hexadecimal</li><li>RGB (Red, Green, Blue)</li><li>RGBA (Red, Green, Blue, Alpha)</li></ul><p>If not explicitly specified, value is inherited value from the <code>primaryControlIconColor</code> theming option.</p></td></tr><tr><td valign="top">stickerBadgeIconShadowColor</td><td valign="top"><p>string</p><p>The shadow/stoke colour of the sticker badge icon.</p><p>The value can either be specified as</p><ul><li>Named color according to definition.</li><li>RGB Hexadecimal</li><li>RGB (Red, Green, Blue)</li><li>RGBA (Red, Green, Blue, Alpha)</li></ul><p>Default value: <code>#000000</code></p></td></tr><tr><td valign="top">stickerBadgeIconShadowVerticalLength</td><td valign="top"><p>integer &#x3C;int32> [ 0 .. 10 ]</p><p>The the shadow/stoke size of the sticker's badge icon, represented in pixels.</p><p>Default value: <code>2</code></p></td></tr><tr><td valign="top">stickerBadgeLabelColor</td><td valign="top"><p>string</p><p>The font color applied to the sticker badge's label.</p><p>The value can either be specified as</p><ul><li>Named color according to definition.</li><li>RGB Hexadecimal</li><li>RGB (Red, Green, Blue)</li><li>RGBA (Red, Green, Blue, Alpha)</li></ul><p>If not explicitly specified, value is inherited value from the <code>primaryControlLabelColor</code> theming option.</p></td></tr><tr><td valign="top">stickerBadgeLineHeight</td><td valign="top"><p>integer &#x3C;int32> [ 10 .. 24 ]</p><p>The font line-height of the sticker badge label, specified in pixels.</p><p>If not explicitly specified, value is inherited value from the <code>primaryLineHeight</code> theming option.</p></td></tr><tr><td valign="top">stickerBadgeShadowColor</td><td valign="top"><p>string</p><p>The shadow/stroke color of the sticker badge.</p><p>The value can either be specified as</p><ul><li>Named color according to definition.</li><li>RGB Hexadecimal</li><li>RGB (Red, Green, Blue)</li><li>RGBA (Red, Green, Blue, Alpha)</li></ul><p>Default value: <code>#bcbcba</code></p></td></tr><tr><td valign="top">stickerBadgeShadowVerticalLength</td><td valign="top"><p>integer &#x3C;int32> [ 0 .. 10 ]</p><p>The shadow/stroke size of the sticker badge, represented in pixels.</p><p>Default value: <code>2</code></p></td></tr><tr><td valign="top">stickerCardBackgroundColor</td><td valign="top"><p>string</p><p>The background colour of the sticker card.</p><p>The value can either be specified as</p><ul><li>Named color according to definition.</li><li>RGB Hexadecimal</li><li>RGB (Red, Green, Blue)</li><li>RGBA (Red, Green, Blue, Alpha)</li></ul><p>Default value: <code>#ffffff</code></p></td></tr><tr><td valign="top">stickerCardBorderRadius</td><td valign="top"><p>integer &#x3C;int32> [ 0 .. 24 ]</p><p>The shape of the corners or the degree of their rounding of the sticker card, represented in pixels.</p><p>If not explicitly specified, value is inherited from the general <code>borderRadius</code> theming option.</p></td></tr><tr><td valign="top">stickerCardChoiceBackgroundColor</td><td valign="top"><p>string</p><p>The background colour of the sticker card choice CTA.</p><p>The value can either be specified as</p><ul><li>Named color according to definition.</li><li>RGB Hexadecimal</li><li>RGB (Red, Green, Blue)</li><li>RGBA (Red, Green, Blue, Alpha)</li></ul><p>Default value: <code>#ffffff</code></p></td></tr><tr><td valign="top">stickerCardChoiceBorderColor</td><td valign="top"><p>string</p><p>The border colour of the sticker card choice CTA.</p><p>The value can either be specified as</p><ul><li>Named color according to definition.</li><li>RGB Hexadecimal</li><li>RGB (Red, Green, Blue)</li><li>RGBA (Red, Green, Blue, Alpha)</li></ul><p>If not explicitly specified, value is inherited value from the <code>settingsOptionBorderColor</code> theming option.</p></td></tr><tr><td valign="top">stickerCardChoiceBorderRadius</td><td valign="top"><p>integer &#x3C;int32> [ 0 .. 24 ]</p><p>The border radius of the sticker card choice CTA, specified in pixels.</p><p>If not explicitly specified, value is inherited value from the <code>settingsOptionBorderRadius</code> theming option.</p></td></tr><tr><td valign="top">stickerCardChoiceBorderWidth</td><td valign="top"><p>integer &#x3C;int32> [ 0 .. 10 ]</p><p>The border width of the sticker card choice CTA, specified in pixels.</p><p>If not explicitly specified, value is inherited value from the <code>settingsOptionBorderWidth</code> theming option.</p></td></tr><tr><td valign="top">stickerCardChoiceColor</td><td valign="top"><p>string</p><p>The font colour of the sticker card choice CTA.</p><p>The value can either be specified as</p><ul><li>Named color according to definition.</li><li>RGB Hexadecimal</li><li>RGB (Red, Green, Blue)</li><li>RGBA (Red, Green, Blue, Alpha)</li></ul><p>If not explicitly specified, value is inherited value from the <code>stickerCardColor</code> theming option.</p></td></tr><tr><td valign="top">stickerCardChoiceFontFamily</td><td valign="top"><p>string</p><p>The font family of the sticker card choice CTA.</p><p>If not explicitly specified, value is inherited value from the <code>stickerCardFontFamily</code> theming option.</p></td></tr><tr><td valign="top">stickerCardChoiceFontSize</td><td valign="top"><p>integer &#x3C;int32> [ 8 .. 18 ]</p><p>The font size of the sticker card choice CTA, specified in pixels.</p><p>If not explicitly specified, value is inherited value from the <code>dialogFontSize</code> theming option.</p></td></tr><tr><td valign="top">stickerCardChoiceGap</td><td valign="top"><p>integer &#x3C;int32> [ 0 .. 16 ]</p><p>The spacing between components of a sticker card choice CTA, specified in pixels.</p><p>Default value: <code>8</code></p></td></tr><tr><td valign="top">stickerCardChoiceLineHeight</td><td valign="top"><p>integer &#x3C;int32> [ 10 .. 24 ]</p><p>The line-height of the sticker card choice CTA, specified in pixels.</p><p>If not explicitly specified, value is inherited value from the <code>dialogLineHeight</code> theming option.</p></td></tr><tr><td valign="top">stickerCardChoicePaddingHorizontal</td><td valign="top"><p>integer &#x3C;int32> [ 0 .. 16 ]</p><p>The horizontal padding of the sticker card choice CTA, specified in pixels.</p><p>If not explicitly specified, value is inherited value from the <code>settingsOptionPaddingHorizontal</code> theming option.</p></td></tr><tr><td valign="top">stickerCardChoicePaddingVertical</td><td valign="top"><p>integer &#x3C;int32> [ 0 .. 16 ]</p><p>The vertical padding of the sticker card choice CTA, specified in pixels.</p><p>If not explicitly specified, value is inherited value from the <code>settingsOptionPaddingVertical</code> theming option.</p></td></tr><tr><td valign="top">stickerCardChoiceResultBackgroundColor</td><td valign="top"><p>string</p><p>The background color of the sticker card choice CTA in result display mode.</p><p>The value can either be specified as</p><ul><li>Named color according to definition.</li><li>RGB Hexadecimal</li><li>RGB (Red, Green, Blue)</li><li>RGBA (Red, Green, Blue, Alpha)</li></ul><p>Default value: <code>#91ef19</code></p></td></tr><tr><td valign="top">stickerCardChoiceShadowColor</td><td valign="top"><p>string</p><p>The shadow/stroke colour of the sticker card choice CTA.</p><p>The value can either be specified as</p><ul><li>Named color according to definition.</li><li>RGB Hexadecimal</li><li>RGB (Red, Green, Blue)</li><li>RGBA (Red, Green, Blue, Alpha)</li></ul><p>Default value: <code>#e2e8ec</code></p></td></tr><tr><td valign="top">stickerCardChoiceShadowVerticalLength</td><td valign="top"><p>integer &#x3C;int32> [ 0 .. 10 ]</p><p>The shadow/stroke size of the sticker card choice CTA, represented in pixels.</p><p>Default value: <code>2</code></p></td></tr><tr><td valign="top">stickerCardColor</td><td valign="top"><p>string</p><p>The font color of the sticker card.</p><p>The value can either be specified as</p><ul><li>Named color according to definition.</li><li>RGB Hexadecimal</li><li>RGB (Red, Green, Blue)</li><li>RGBA (Red, Green, Blue, Alpha)</li></ul><p>If not explicitly specified, value is inherited value from the <code>primaryColor</code> theming option.</p></td></tr><tr><td valign="top">stickerCardCtaBackgroundColor</td><td valign="top"><p>string</p><p>The background colour of the sticker card CTA.</p><p>The value can either be specified as</p><ul><li>Named color according to definition.</li><li>RGB Hexadecimal</li><li>RGB (Red, Green, Blue)</li><li>RGBA (Red, Green, Blue, Alpha)</li></ul><p>Default value: <code>#0c1f2d</code></p></td></tr><tr><td valign="top">stickerCardCtaBorderColor</td><td valign="top"><p>string</p><p>The border colour of the sticker card CTA.</p><p>The value can either be specified as</p><ul><li>Named color according to definition.</li><li>RGB Hexadecimal</li><li>RGB (Red, Green, Blue)</li><li>RGBA (Red, Green, Blue, Alpha)</li></ul><p>Default value: <code>transparent</code></p></td></tr><tr><td valign="top">stickerCardCtaBorderRadius</td><td valign="top"><p>integer &#x3C;int32> [ 0 .. 24 ]</p><p>The border radius of the sticker card CTA, specified in pixels.</p><p>If not explicitly specified, value is inherited value from the <code>settingsOptionBorderRadius</code> theming option.</p></td></tr><tr><td valign="top">stickerCardCtaBorderWidth</td><td valign="top"><p>integer &#x3C;int32> [ 0 .. 10 ]</p><p>The border width of the sticker card CTA, specified in pixels.</p><p>If not explicitly specified, value is inherited value from the <code>settingsOptionBorderWidth</code> theming option.</p></td></tr><tr><td valign="top">stickerCardCtaColor</td><td valign="top"><p>string</p><p>The font colour of the sticker card CTA.</p><p>The value can either be specified as</p><ul><li>Named color according to definition.</li><li>RGB Hexadecimal</li><li>RGB (Red, Green, Blue)</li><li>RGBA (Red, Green, Blue, Alpha)</li></ul><p>Default value: <code>#ffffff</code></p></td></tr><tr><td valign="top">stickerCardCtaFontFamily</td><td valign="top"><p>string</p><p>The cta font family applied to the sticker card.</p><p>If not explicitly specified, value is inherited value from the <code>stickerCardFontFamily</code> theming option.</p></td></tr><tr><td valign="top">stickerCardCtaFontSize</td><td valign="top"><p>integer &#x3C;int32> [ 8 .. 18 ]</p><p>The font size of the sticker card CTA, specified in pixels.</p><p>If not explicitly specified, value is inherited value from the <code>dialogFontSize</code> theming option.</p></td></tr><tr><td valign="top">stickerCardCtaLineHeight</td><td valign="top"><p>integer &#x3C;int32> [ 10 .. 24 ]</p><p>The font line-height of the sticker card CTA, specified in pixels.</p><p>If not explicitly specified, value is inherited value from the <code>dialogLineHeight</code> theming option.</p></td></tr><tr><td valign="top">stickerCardCtaPaddingHorizontal</td><td valign="top"><p>integer &#x3C;int32> [ 0 .. 16 ]</p><p>The horizontal padding of the sticker card CTA, specified in pixels.</p><p>If not explicitly specified, value is inherited value from the <code>settingsOptionPaddingHorizontal</code> theming option.</p></td></tr><tr><td valign="top">stickerCardCtaPaddingVertical</td><td valign="top"><p>integer &#x3C;int32> [ 0 .. 16 ]</p><p>The vertical padding of the sticker card CTA, specified in pixels.</p><p>If not explicitly specified, value is inherited value from the <code>settingsOptionPaddingVertical</code> theming option.</p></td></tr><tr><td valign="top">stickerCardFontFamily</td><td valign="top"><p>string</p><p>The font family of the sticker card.</p><p>If not explicitly specified, value is inherited value from the <code>primaryFontFamily</code> theming option.</p></td></tr><tr><td valign="top">stickerCardFontSize</td><td valign="top"><p>integer &#x3C;int32> [ 8 .. 16 ]</p><p>The font size of the sticker card, specified in pixels.</p><p>If not explicitly specified, value is inherited value from the <code>primaryFontSize</code> theming option.</p></td></tr><tr><td valign="top">stickerCardHeaderBackgroundColor</td><td valign="top"><p>string</p><p>The background colour of the sticker card header.</p><p>The value can either be specified as</p><ul><li>Named color according to definition.</li><li>RGB Hexadecimal</li><li>RGB (Red, Green, Blue)</li><li>RGBA (Red, Green, Blue, Alpha)</li></ul><p>Default value: <code>#f4f6f8</code></p></td></tr><tr><td valign="top">stickerCardHeaderBorderColor</td><td valign="top"><p>string</p><p>The border colour of the sticker card header.</p><p>The value can either be specified as</p><ul><li>Named color according to definition.</li><li>RGB Hexadecimal</li><li>RGB (Red, Green, Blue)</li><li>RGBA (Red, Green, Blue, Alpha)</li></ul><p>Default value: <code>#e2e8ec</code></p></td></tr><tr><td valign="top">stickerCardHeaderBorderWidth</td><td valign="top"><p>integer &#x3C;int32> [ 0 .. 10 ]</p><p>The border width of the sticker card header, represented in pixels.</p><p>Default value: <code>1</code></p></td></tr><tr><td valign="top">stickerCardLineHeight</td><td valign="top"><p>integer &#x3C;int32> [ 10 .. 24 ]</p><p>The font line-height if the sticker card, specified in pixels.</p><p>If not explicitly specified, value is inherited value from the <code>primaryLineHeight</code> theming option.</p></td></tr><tr><td valign="top">stickerCardShadowColor</td><td valign="top"><p>string</p><p>The shadow/stroke color of the sticker card.</p><p>The value can either be specified as</p><ul><li>Named color according to definition.</li><li>RGB Hexadecimal</li><li>RGB (Red, Green, Blue)</li><li>RGBA (Red, Green, Blue, Alpha)</li></ul><p>Default value: <code>#bcbcba</code></p></td></tr><tr><td valign="top">stickerCardShadowVerticalLength</td><td valign="top"><p>integer &#x3C;int32> [ 0 .. 16 ]</p><p>The shadow/stroke size of the sticker card, represented in pixels.</p><p>Default value: <code>4</code></p></td></tr><tr><td valign="top">stickerCardSubtitleColor</td><td valign="top"><p>string</p><p>The font colour of the sticker card subtitle.</p><p>The value can either be specified as</p><ul><li>Named color according to definition.</li><li>RGB Hexadecimal</li><li>RGB (Red, Green, Blue)</li><li>RGBA (Red, Green, Blue, Alpha)</li></ul><p>If not explicitly specified, value is inherited value from the <code>stickerCardColor</code> theming option.</p></td></tr><tr><td valign="top">stickerCardSubtitleFontFamily</td><td valign="top"><p>string</p><p>The font family of the sticker card subtitle.</p><p>If not explicitly specified, value is inherited value from the <code>stickerCardFontFamily</code> theming option.</p></td></tr><tr><td valign="top">stickerCardSubtitleFontSize</td><td valign="top"><p>number &#x3C;double> [ 8 .. 18 ]</p><p>The font size of the sticker card subtitle, specified in pixels.</p><p>Default value: <code>10</code></p></td></tr><tr><td valign="top">stickerCardSubtitleLineHeight</td><td valign="top"><p>number &#x3C;double> [ 10 .. 24 ]</p><p>The line-height of the sticker card subtitle, specified in pixels.</p><p>Default value: <code>14</code></p></td></tr><tr><td valign="top">stickerCardThankYouMessageColor</td><td valign="top"><p>string</p><p>The font color of the sticker card thank you message.</p><p>The value can either be specified as</p><ul><li>Named color according to definition.</li><li>RGB Hexadecimal</li><li>RGB (Red, Green, Blue)</li><li>RGBA (Red, Green, Blue, Alpha)</li></ul><p>If not explicitly specified, value is inherited value from the <code>stickerCardColor</code> theming option.</p></td></tr><tr><td valign="top">stickerCardThankYouMessageFontFamily</td><td valign="top"><p>string</p><p>The font family of the sticker card thank you message.</p><p>If not explicitly specified, value is inherited value from the <code>stickerCardFontFamily</code> theming option.</p></td></tr><tr><td valign="top">stickerCardThankYouMessageFontSize</td><td valign="top"><p>integer &#x3C;int32> [ 8 .. 18 ]</p><p>The font size of the sticker card thank you message.</p><p>If not explicitly specified, value is inherited value from the <code>stickerCardFontSize</code> theming option.</p></td></tr><tr><td valign="top">stickerCardThankYouMessageLineHeight</td><td valign="top"><p>integer &#x3C;int32> [ 10 .. 24 ]</p><p>The line height of the sticker card thank you message.</p><p>If not explicitly specified, value is inherited value from the <code>stickerCardLineHeight</code> theming option.</p></td></tr><tr><td valign="top">stickerCardTimerBackgroundColor</td><td valign="top"><p>string</p><p>The background colour of the sticker card timer.</p><p>The value can either be specified as</p><ul><li>Named color according to definition.</li><li>RGB Hexadecimal</li><li>RGB (Red, Green, Blue)</li><li>RGBA (Red, Green, Blue, Alpha)</li></ul><p>Default value: <code>#ffffff</code></p></td></tr><tr><td valign="top">stickerCardTimerColor</td><td valign="top"><p>string</p><p>The font colour of the sticker card timer.</p><p>The value can either be specified as</p><ul><li>Named color according to definition.</li><li>RGB Hexadecimal</li><li>RGB (Red, Green, Blue)</li><li>RGBA (Red, Green, Blue, Alpha)</li></ul><p>If not explicitly specified, value is inherited value from the <code>stickerCardColor</code> theming option.</p></td></tr><tr><td valign="top">stickerCardTimerDigitBackgroundColor</td><td valign="top"><p>string</p><p>The background colour of the sticker card timer digit.</p><p>The value can either be specified as</p><ul><li>Named color according to definition.</li><li>RGB Hexadecimal</li><li>RGB (Red, Green, Blue)</li><li>RGBA (Red, Green, Blue, Alpha)</li></ul><p>Default value: <code>#0c1f2d</code></p></td></tr><tr><td valign="top">stickerCardTimerDigitColor</td><td valign="top"><p>string</p><p>The font colour of the sticker card timer digit.</p><p>The value can either be specified as</p><ul><li>Named color according to definition.</li><li>RGB Hexadecimal</li><li>RGB (Red, Green, Blue)</li><li>RGBA (Red, Green, Blue, Alpha)</li></ul><p>Default value: <code>#ffffff</code></p></td></tr><tr><td valign="top">stickerCardTimerDigitFontFamily</td><td valign="top"><p>string</p><p>The font family applied to the sticker card timer digit.</p><p>If not explicitly specified, value is inherited value from the <code>stickerCardFontFamily</code> theming option.</p></td></tr><tr><td valign="top">stickerCardTimerDigitFontSize</td><td valign="top"><p>integer &#x3C;int32> [ 8 .. 18 ]</p><p>The font size of the sticker card timer digit, specified in pixels.</p><p>Default value: <code>14</code></p></td></tr><tr><td valign="top">stickerCardTimerDigitLineHeight</td><td valign="top"><p>integer &#x3C;int32> [ 10 .. 24 ]</p><p>The line-height of the sticker card timer digit, specified in pixels.</p><p>Default value: <code>18</code></p></td></tr><tr><td valign="top">stickerCardTimerFontFamily</td><td valign="top"><p>string</p><p>The font family of the sticker card timer.</p><p>If not explicitly specified, value is inherited value from the <code>stickerCardFontFamily</code> theming option.</p></td></tr><tr><td valign="top">stickerCardTimerFontSize</td><td valign="top"><p>integer &#x3C;int32> [ 8 .. 18 ]</p><p>The font size of the sticker card timer, specified in pixels.</p><p>Default value: <code>10</code></p></td></tr><tr><td valign="top">stickerCardTimerLineHeight</td><td valign="top"><p>integer &#x3C;int32> [ 10 .. 18 ]</p><p>The line-height of the sticker card timer, specified in pixels.</p><p>Default value: <code>14</code></p></td></tr><tr><td valign="top">stickerCardTimerShadowColor</td><td valign="top"><p>string</p><p>The shadow/stroke colour of the sticker card timer.</p><p>The value can either be specified as</p><ul><li>Named color according to definition.</li><li>RGB Hexadecimal</li><li>RGB (Red, Green, Blue)</li><li>RGBA (Red, Green, Blue, Alpha)</li></ul><p>Default value: <code>#b1a9ac</code></p></td></tr><tr><td valign="top">stickerCardTimerShadowVerticalLength</td><td valign="top"><p>integer &#x3C;int32> [ 0 .. 10 ]</p><p>The shadow/stroke size of the sticker card timer, represented in pixels.</p><p>Default value: <code>2</code></p></td></tr><tr><td valign="top">stickerCardTitleColor</td><td valign="top"><p>string</p><p>The font colour of the sticker card title.</p><p>The value can either be specified as</p><ul><li>Named color according to definition.</li><li>RGB Hexadecimal</li><li>RGB (Red, Green, Blue)</li><li>RGBA (Red, Green, Blue, Alpha)</li></ul><p>If not explicitly specified, value is inherited value from the <code>stickerCardColor</code> theming option.</p></td></tr><tr><td valign="top">stickerCardTitleFontFamily</td><td valign="top"><p>string</p><p>The font family of the sticker card title.</p><p>If not explicitly specified, value is inherited value from the <code>stickerCardFontFamily</code> theming option.</p></td></tr><tr><td valign="top">stickerCardTitleFontSize</td><td valign="top"><p>integer &#x3C;int32> [ 8 .. 18 ]</p><p>The font size of the sticker card title, specified in pixels.</p><p>Default value: <code>14</code></p></td></tr><tr><td valign="top">stickerCardTitleLineHeight</td><td valign="top"><p>integer &#x3C;int32> [ 10 .. 24 ]</p><p>The font line-height of the sticker card title, specified in pixels.</p><p>Default value: <code>18</code></p></td></tr><tr><td valign="top">stickerCardTotalAnswersCountColor</td><td valign="top"><p>string</p><p>The font color of the sticker card total answers count.</p><p>If not explicitly specified, value is inherited value from the <code>stickerCardColor</code> theming option.</p></td></tr><tr><td valign="top">stickerCardTotalAnswersCountFontFamily</td><td valign="top"><p>string</p><p>The font family of the sticker card total answers count.</p><p>If not explicitly specified, value is inherited value from the <code>stickerCardFontFamily</code> theming option.</p></td></tr><tr><td valign="top">stickerCardTotalAnswersCountFontSize</td><td valign="top"><p>integer &#x3C;int32> [ 8 .. 18 ]</p><p>The font size of the sticker card total answers count.</p><p>If not explicitly specified, value is inherited value from the <code>stickerCardFontSize</code> theming option.</p></td></tr><tr><td valign="top">stickerCardTotalAnswersCountLineHeight</td><td valign="top"><p>integer &#x3C;int32> [ 10 .. 24 ]</p><p>The line height of the sticker card total answers count.</p><p>If not explicitly specified, value is inherited value from the <code>stickerCardLineHeight</code> theming option.</p></td></tr><tr><td valign="top">subtitlesBackgroundColor</td><td valign="top"><p>string</p><p>The background colour of the subtitles.</p><p>The value can either be specified as</p><ul><li>Named color according to definition.</li><li>RGB Hexadecimal</li><li>RGB (Red, Green, Blue)</li><li>RGBA (Red, Green, Blue, Alpha)</li></ul><p>Default value: <code>#00000099</code></p></td></tr><tr><td valign="top">subtitlesBorderRadius</td><td valign="top"><p>integer &#x3C;int32> [ 0 .. 16 ]</p><p>The shape of the corners or the degree of their rounding of the subtitles, represented in pixels.</p></td></tr><tr><td valign="top">subtitlesColor</td><td valign="top"><p>string</p><p>The font colour of the subtitles.</p><p>The value can either be specified as</p><ul><li>Named color according to definition.</li><li>RGB Hexadecimal</li><li>RGB (Red, Green, Blue)</li><li>RGBA (Red, Green, Blue, Alpha)</li></ul><p>Default value: <code>#ffffff</code></p></td></tr><tr><td valign="top">subtitlesFontSize</td><td valign="top"><p>integer &#x3C;int32> [ 8 .. 18 ]</p><p>The font size of the subtitles, specified in pixels.</p><p>Default value: <code>14</code></p></td></tr><tr><td valign="top">subtitlesFontWeight</td><td valign="top"><p>string</p><p>The font weight of the subtitles.</p><p><code>&#x3C;font-weight-absolute></code> numeric values [1,1000].</p><ul><li><code>100</code></li><li><code>200</code></li><li><code>300</code></li><li><code>400</code> — normal</li><li><code>500</code></li><li><code>600</code></li><li><code>700</code> — bold</li><li><code>800</code></li><li><code>900</code></li></ul><p>Default value: <code>400</code></p></td></tr><tr><td valign="top">subtitlesLineHeight</td><td valign="top"><p>integer &#x3C;int32> [ 10 .. 24 ]</p><p>The line height of the subtitles, specified in pixels.</p><p>Default value: <code>28</code></p></td></tr><tr><td valign="top">subtitlesPaddingHorizontal</td><td valign="top"><p>integer &#x3C;int32> [ 0 .. 16 ]</p><p>The horizontal padding applied to the subtitles, specified in pixels.</p><p>Default value: <code>8</code></p></td></tr><tr><td valign="top">subtitlesPaddingVertical</td><td valign="top"><p>integer &#x3C;int32> [ 0 .. 16 ]</p><p>The vertical padding applied to the subtitles, specified in pixels.</p><p>Default value: <code>4</code></p></td></tr><tr><td valign="top">toastBackgroundColor</td><td valign="top"><p>string</p><p>The background colour of a toast message.</p><p>The value can either be specified as</p><ul><li>Named color according to definition.</li><li>RGB Hexadecimal</li><li>RGB (Red, Green, Blue)</li><li>RGBA (Red, Green, Blue, Alpha)</li></ul><p>Default value: <code>#0006</code></p></td></tr><tr><td valign="top">toastBorderColor</td><td valign="top"><p>string</p><p>The border colour of a toast message.</p><p>The value can either be specified as</p><ul><li>Named color according to definition.</li><li>RGB Hexadecimal</li><li>RGB (Red, Green, Blue)</li><li>RGBA (Red, Green, Blue, Alpha)</li></ul><p>Default value: <code>transparent</code></p></td></tr><tr><td valign="top">toastBorderRadius</td><td valign="top"><p>integer &#x3C;int32> [ 0 .. 16 ]</p><p>The shape of the corners or the degree of their rounding of a toast message, represented in pixels.</p><p>Default value: <code>4</code></p></td></tr><tr><td valign="top">toastBorderWidth</td><td valign="top"><p>integer &#x3C;int32> [ 0 .. 8 ]</p><p>The border width of a toast message, specified in pixels.</p><p>Default value: <code>1</code></p></td></tr><tr><td valign="top">toastColor</td><td valign="top"><p>string</p><p>The font colour of a toast message.</p><p>The value can either be specified as</p><ul><li>Named color according to definition.</li><li>RGB Hexadecimal</li><li>RGB (Red, Green, Blue)</li><li>RGBA (Red, Green, Blue, Alpha)</li></ul><p>Default value: <code>#fffc</code></p></td></tr><tr><td valign="top">toastPaddingHorizontal</td><td valign="top"><p>integer &#x3C;int32> [ 0 .. 16 ]</p><p>The horizontal padding applied to a toast message, specified in pixels.</p><p>Default value: <code>8</code></p></td></tr><tr><td valign="top">toastPaddingVertical</td><td valign="top"><p>integer &#x3C;int32> [ 0 .. 8 ]</p><p>The vertical padding applied to a toast message, specified in pixels.</p><p>Default value: <code>4</code></p></td></tr><tr><td valign="top">videoControlsColor</td><td valign="top"><p>string</p><p>The font colour of the video controls.</p><p>The value can either be specified as</p><ul><li>Named color according to definition.</li><li>RGB Hexadecimal</li><li>RGB (Red, Green, Blue)</li><li>RGBA (Red, Green, Blue, Alpha)</li></ul><p>Default value: <code>#fff</code></p></td></tr><tr><td valign="top">videoControlsFontFamily</td><td valign="top"><p>string</p><p>The font family of the video controls.</p><p>If not explicitly specified, value is inherited value from the <code>primaryFontFamily</code> theming option.</p></td></tr><tr><td valign="top">videoControlsFontSize</td><td valign="top"><p>integer &#x3C;int32> [ 10 .. 18 ]</p><p>The font size of the video controls, specified in pixels.</p><p>Default value: <code>12</code></p></td></tr><tr><td valign="top">videoControlsIconColor</td><td valign="top"><p>string</p><p>The colour of the video controls icons.</p><p>The value can either be specified as</p><ul><li>Named color according to definition.</li><li>RGB Hexadecimal</li><li>RGB (Red, Green, Blue)</li><li>RGBA (Red, Green, Blue, Alpha)</li></ul><p>Default value: <code>#fff</code></p></td></tr><tr><td valign="top">videoControlsLineHeight</td><td valign="top"><p>integer &#x3C;int32> [ 12 .. 24 ]</p><p>The line-height of the video controls, specified in pixels.</p><p>Default value: <code>18</code></p></td></tr><tr><td valign="top">videoControlsProgressBarBaseBackgroundColor</td><td valign="top"><p>string</p><p>The background colour of the video controls progress bar base.</p><p>The value can either be specified as</p><ul><li>Named color according to definition.</li><li>RGB Hexadecimal</li><li>RGB (Red, Green, Blue)</li><li>RGBA (Red, Green, Blue, Alpha)</li></ul><p>Default value: <code>#fff6</code></p></td></tr><tr><td valign="top">videoControlsProgressBarElapsedBackgroundColor</td><td valign="top"><p>string</p><p>The background colour of the video controls progress bar, showing elapsed time.</p><p>The value can either be specified as</p><ul><li>Named color according to definition.</li><li>RGB Hexadecimal</li><li>RGB (Red, Green, Blue)</li><li>RGBA (Red, Green, Blue, Alpha)</li></ul><p>Default value: <code>#ec007a</code></p></td></tr><tr><td valign="top">videoControlsProgressBarHoveredBackgroundColor</td><td valign="top"><p>string</p><p>The background colour of the video controls progress bar when hovered.</p><p>The value can either be specified as</p><ul><li>Named color according to definition.</li><li>RGB Hexadecimal</li><li>RGB (Red, Green, Blue)</li><li>RGBA (Red, Green, Blue, Alpha)</li></ul><p>Default value: <code>#fff9</code></p></td></tr><tr><td valign="top">videoControlsProgressBarThumbColor</td><td valign="top"><p>string</p><p>The colour of the video controls progress bar thumb.</p><p>The value can either be specified as</p><ul><li>Named color according to definition.</li><li>RGB Hexadecimal</li><li>RGB (Red, Green, Blue)</li><li>RGBA (Red, Green, Blue, Alpha)</li></ul><p>Default value: <code>#ec007a</code></p></td></tr><tr><td valign="top">viewerCounterColor</td><td valign="top"><p>string</p><p>The font colour of the viewer counter.</p><p>The value can either be specified as</p><ul><li>Named color according to definition.</li><li>RGB Hexadecimal</li><li>RGB (Red, Green, Blue)</li><li>RGBA (Red, Green, Blue, Alpha)</li></ul><p>If not explicitly specified, value is inherited value from the <code>playerHeaderColor</code> theming option.</p></td></tr><tr><td valign="top">viewerCounterFontSize</td><td valign="top"><p>integer &#x3C;int32> [ 8 .. 18 ]</p><p>The font size of the viewer counter, specified in pixels.</p><p>If not explicitly specified, value is inherited value from the <code>playerHeaderFontSize</code> theming option.</p></td></tr><tr><td valign="top">viewerCounterIconColor</td><td valign="top"><p>string</p><p>The colour of the viewer counter icon.</p><p>The value can either be specified as</p><ul><li>Named color according to definition.</li><li>RGB Hexadecimal</li><li>RGB (Red, Green, Blue)</li><li>RGBA (Red, Green, Blue, Alpha)</li></ul><p>If not explicitly specified, value is inherited value from the <code>viewerCounterColor</code> theming option.</p></td></tr><tr><td valign="top">viewerCounterIconSize</td><td valign="top"><p>integer &#x3C;int32> [ 10 .. 24 ]</p><p>The size of the viewer counter icon, specified in pixels.</p><p>Default value: <code>18</code></p></td></tr><tr><td valign="top">viewerCounterLineHeight</td><td valign="top"><p>integer &#x3C;int32> [ 10 .. 24 ]</p><p>The font line-height of the viewer counter, specified in pixels.</p><p>If not explicitly specified, value is inherited value from the <code>playerHeaderLineHeight</code> theming option.</p></td></tr></tbody></table>


# Common

### `--lsc-backdrop-background-color`

[`Color`](/developers/guides/theming/types#color)

The default backdrop background color.

Default value: `#0c1f2d33`&#x20;

### `--lsc-backdrop-filter-radius`

`Integer` — \[ 0 .. 16 ]

The level of distortion applied to the backdrop of any LiSA widget or component that is rendered in an overlay, modal or bottom sheet.

Default value: `0`


# Types

### `Color`

A color can either be specified as:

* Named color according to [CSS Colors definition](https://www.w3schools.com/cssref/css_colors.php) — e.g. `DeepPink`
* RGB Hexadecimal — e.g. `#ff1493`
* RGB (Red, Green, Blue) — e.g. `rgb(255, 20, 147)`
* RGBA (Red, Green, Blue, Alpha) — e.g. `rgba(255, 20, 147, 1)`&#x20;

### `CtaBehavior`

Determines how a CTA target should be opened. Allowed values are:

* `clipboard` — The CTA target URL/value is copied to clipboard
* `modal` — The CTA target URL/value are rendered in a player internal component
* `newTab` — The CTA target URL is opened a new window
* `newTabWithPipNative` — The CTA target URL is opened a new window with the video following in native PiP — if supported by the viewers OS
* `none` — Event message is sent only
* `pip` — The CTA target URL is loaded in the current page with the media player resuming in sticky minimized state
* `pipNative` — Event message is sent only with the video following in native PiP — if supported by the viewers OS
* `pipSpa` — The CTA target URL is loaded in the current page with the media player resuming in minimized state

### `LocalizedString`

A map of key-value pairs for multi-lingual texts.

* Key is either a lower-cased language code identifier (LCID Locale ID, e.g. `en-us`) or `*`, which acts as a fallback, if no language specific value is specified.
* Value is a text in a distinct language.

### `SvgIconString`

The SVG Markup of a custom icon.

{% hint style="warning" %}
Please limit dimension of the SVG viewport to 24x24 pixels and remove all inline `fill` and `stroke` attributes, which might interfere with colors defined in Theme Settings.
{% endhint %}

#### Example

```svg
<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
  <path d="M12.8197 5.57961L11.999 6.40211L11.1757 5.57886C9.07663 3.4798 5.67337 3.4798 3.5743 5.57886C1.47523 7.67793 1.47523 11.0812 3.5743 13.1803L11.4697 21.0756C11.7626 21.3685 12.2374 21.3685 12.5303 21.0756L20.4318 13.1788C22.5262 11.0728 22.5298 7.67906 20.4303 5.57961C18.3274 3.47672 14.9226 3.47672 12.8197 5.57961ZM19.3682 12.1211L12 19.4846L4.63496 12.1196C3.12168 10.6063 3.12168 8.15281 4.63496 6.63952C6.14824 5.12624 8.60176 5.12624 10.115 6.63952L11.4725 7.99697C11.7703 8.29483 12.255 8.28903 12.5457 7.98412L13.8803 6.64027C15.3974 5.12317 17.8526 5.12316 19.3697 6.64027C20.8833 8.15391 20.8807 10.6001 19.3682 12.1211Z" />
</svg>
```


# Widgets

Discover customizable, ready-to-use widgets to enhance your platform. Easily integrate interactive components to boost functionality and user engagement.

Integrate LiSA into your online platforms with our easy plug-and-play widgets!

Each LiSA product offers a Widget for you to add to your online space:

LiSA Live Widget LiSA Stories Widget LiSA Snippets Widget

Check out this documentation to get started using LiSA on your online platforms!


# LiSA Live Widget Intro

### Quick start guide

Welcome to LiSA quick implementation guide. Follow the steps below for an easy and hassle-free integration process into your e-commerce CMS.

### Introduction

In this guide, you will add a code snippet to your CMS in order to enable the following:

#### Content hub

The content hub shows the list of all shows ( either replays from past shows or upcoming ones ):

<figure><img src="https://4263790808-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FYzEDVmNHt4fs8SIPnMFo%2Fuploads%2FTy33LGFPpBQz0O1Riu6a%2Fwc_juNKdxSkc84ZTU8DiA_untitled.webp?alt=media&amp;token=75ba3a06-169c-4956-b4a2-1d13e09d6f77" alt=""><figcaption></figcaption></figure>

Shows recorded in the past can show as replays in your Content Hub.

<figure><img src="https://4263790808-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FYzEDVmNHt4fs8SIPnMFo%2Fuploads%2FssHzWyLqydeD1nLMCPLQ%2FMx5t2h6tIsdsQPo6TqfTX_untitled-1.webp?alt=media&amp;token=66ed65a0-2457-419b-bbe6-c6874bc4f7d8" alt=""><figcaption></figcaption></figure>

#### Show player

The show player is where your video will appear, on top of your existing page:

<figure><img src="https://4263790808-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FYzEDVmNHt4fs8SIPnMFo%2Fuploads%2FTxTkmWGMzqK7tdhU9gbu%2FHmEPOgyxB8wHEva7WHqto_untitled-2.webp?alt=media&amp;token=281c31de-abb6-4e6f-8e18-0d5ca320e9cd" alt=""><figcaption></figcaption></figure>

#### Product page

The snippet will also enabling opening your product page right from clicking the cards in the Player for immediate checkout by your viewers:

<figure><img src="https://4263790808-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FYzEDVmNHt4fs8SIPnMFo%2Fuploads%2FTrAnsWedWnXtMASCEwaA%2F5ZF9opEYw75KHO5W8hml4_untitled-3.webp?alt=media&amp;token=62ace6dc-39a9-42ab-8aba-022d8daeaae6" alt=""><figcaption></figcaption></figure>


# Embed the LiSA Live Widget

Follow the steps in this guide to add the code snippet to your CMS:

### Step 1: add a new HTML host element

Add a quick host element with a tag where you wish to insert your Content hub. You can put it anywhere on your page where you would like the Content hub to appear:

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

💡 The `lisa-library` class ID is used for advanced customizations of your Live Player UI and is mandatory. For more information, please view [this documentation](https://docs.hello-lisa.com/sdks/appearance).

### Step 2: add the LiSA script

Add this script to your web page to enabled your page to load the Content Hub and LiSA Live player:

```javascript
<script type="text/javascript" async defer>
	(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',
	  });
	})();
</script>
```

💡 You should replace YOUR\_CLIENT\_IDENTIFIER with your provided identifier. Contact LiSA if your identifier was not provided already.

### Step 3: enjoy LiSA!

You can now re-load your page and view the Content Hub. You’re good to go!

Further customizations and set up to tailor your viewing experience are handled by LiSA at no additional cost. Contact your LiSA representative for further enquiries.


# LiSA Stories Widget Intro

{% hint style="info" %}
The LiSA Stories Widget will be soon available to our customers. Contact your sales representative for early access!
{% endhint %}

### Stories Badges

Stories badges enable the presentation of content in the form of a lineup of avatars representing creators or channels. These badges are commonly employed for content exploration, enabling visitors to access various content offerings from different creators and enhancing the likelihood of initiating engagement with the content.

<figure><img src="https://4263790808-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FYzEDVmNHt4fs8SIPnMFo%2Fuploads%2FiyvIIvSFXLekDtogJaX8%2F61ymlIO4gu46k505nYUNt_image.webp?alt=media&amp;token=0225b37b-f430-43c3-8bb1-823c7276ae70" alt=""><figcaption></figcaption></figure>

### Stories Player

Using the Stories Player, LiSA will display your content, supported on both Desktop and Mobile:

<figure><img src="https://4263790808-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FYzEDVmNHt4fs8SIPnMFo%2Fuploads%2F1iume0EvhtGDVNLGYkgi%2F2YuAnHHCvexcaj8tS1WJy_image.webp?alt=media&amp;token=e551803d-90cb-4fe8-8944-9553525f4e17" alt=""><figcaption></figcaption></figure>


# Embed the LiSA Stories Widget

Position the following code snippet in the designated area for showcasing the stories badges:

```html
<script
  async
  defer
  data-lisa-widget="stories-badges"
  src="https://widget.lisa-cdn.net/stories-badges/{clientId}/default"
></script>
```

{% hint style="warning" %}
Necessary adjustments:

Please ensure that you replace {clientId} with your unique client identifier, which was provided to you during the onboarding process.
{% endhint %}

The provided embed code in the example above utilizes the default configuration of the stories badges widget. It does not implement any filtering on the included stories, such as channels or categories. The stories badges are arranged in chronological order based on their stories publication date, with the most recent ones appearing first.

However, in the LiSA console, you have the ability to customize these filtering options according to your specific requirements when creating custom widgets.

### Page Performance

In order to minimize any impact on your page speed and performance, remember to include the async and defer attributes.

{% hint style="success" %}
Please note: The embed code handles the loading and initialization of all necessary resources automatically. There is no need to include any additional scripts on your website.
{% endhint %}


# LiSA Snippets Widget Intro

{% hint style="info" %}
The LiSA Snippets Widget will be soon available to our customers. Contact your sales representative for early access!
{% endhint %}

### Product Snippets

Products snippets enable the presentation of content in form of short videos extracted from live show recordings in order to highlight a single or multiple product(s).

These snippets can easily be added to product detail pages and are commonly employed for content exploration, enabling visitors to access additional forms of product presentation in an engaging format.

<figure><img src="https://4263790808-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FYzEDVmNHt4fs8SIPnMFo%2Fuploads%2FrnV5Ck1TtLQdKUs35FhO%2Fvl_bMgC_3q6y2FNc-yw2__screenshot-2023-08-02-at-141503.webp?alt=media&amp;token=eae646c8-7954-4b9f-bc2f-0b5f20bcdf00" alt=""><figcaption></figcaption></figure>


# Embed the LiSA Snippets Widget

In order to utilize the LiSA Snippets Widget for products, you need to provide the reference of the product for which the snippets should be shown.

To accomplish this, start by loading the widget through the LiSA Content Delivery Network (CDN).

Add the following tag either inside the tag or at the bottom of your page:

```html
<script
  async
  defer
  data-lisa-widget="snippets"
  src="https://widget.lisa-cdn.net/snippets/{clientId}"
></script>
```

{% hint style="warning" %}
Necessary adjustments:

Please ensure that you replace {clientId} with your unique client identifier, which was provided to you during the onboarding process.
{% endhint %}

### Custom Event Handler

Once the widget is successfully loaded, it triggers an CustomEvent through the window object.

To handle this event effectively, create an event listener, allowing you to obtain the desired product reference and subsequently call the API for loading snippets tailored to the specific product in question.

```javascript
window.addEventListener('lsc:widget:snippets:ready', ({ detail }) => {
  // todo: replace static product reference definition with your logic
  //  to obtain the actual product reference/id provided by your ecommerce
  //  system.
  const reference = 'xyz';
  // Invoke initialization of the snippets widget using the obtained
  // product reference
  detail.player.initializeWithProduct(reference);
});
```

{% hint style="warning" %}
Make sure to register the event listener before loading the widget to prevent missing the widget event and avoid any issues with loading the snippets.
{% endhint %}

### Page Performance

In order to minimize any impact on your page speed and performance, remember to include the async and defer attributes when loading the widget.

{% hint style="success" %}
Please note: The embed code handles the loading and initialization of all necessary resources automatically. There is no need to include any additional scripts on your website.
{% endhint %}


# Shows


# Create Show

## &#x20;STEP 1: CREATE SHOW

After your log into your account, **navigate to Shows to open the dropdown menu and select Shows**

Here you will find a list of all planned, conducted or current live shows.&#x20;

**Click on the plus icon** in the top right corner and fill out the information. This can be changed later, in case you want to update some details.

<figure><img src="https://1950192467-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fn5OaCYL2qREZ3vWQBAet%2Fuploads%2FuGlq2IvvD1PzKsazskx8%2Fcreate_show.gif?alt=media&amp;token=7731e416-ec3c-45b9-957b-2afa06e3f048" alt=""><figcaption></figcaption></figure>

**Name:** Give your show a name

**Date:** Select date and time which will reflect on the countdown page and is your Go Live date

**Settings template:** Select your show template. If you have no template Keep the LiSA Default Template selected. Learn how to create a show template here.

##


# Details

## STEP 1: DETAILS

**DETAILS**

Navigate to Details inside your shows submenu, make changes and fill out the information needed. Click into the respective box on the right side next to the setting you'd like to update.

<figure><img src="https://1950192467-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fn5OaCYL2qREZ3vWQBAet%2Fuploads%2F1FmEVPFInlVQO0fMN0bB%2Fsub_details.png?alt=media&amp;token=c45ff1a9-43a5-436f-971c-9e7c83dcd177" alt=""><figcaption></figcaption></figure>

<table data-header-hidden><thead><tr><th></th><th></th><th data-hidden></th></tr></thead><tbody><tr><td>Internal name</td><td>This name is only visible to you</td><td></td></tr><tr><td>Show title</td><td>This name will be used for social sharing and add to calendar</td><td></td></tr><tr><td>Show date</td><td>Start time of your event which will be reflected on the countdown</td><td></td></tr><tr><td>Show host(s)</td><td>Select the host account which will go live. </td><td></td></tr><tr><td>URL</td><td>This is the URL where your event will be live. This URL will  be used for social sharing and add to calendar</td><td></td></tr></tbody></table>

{% hint style="info" %}
**Categories** and **Tags** can be used to split shows e.g. on different landing pages inside your environment. Create Tags or Categories per show which then can be used as filters for channels, stories and more.
{% endhint %}

**Assets**

**Drag and Drop** a file into the respective field and **click save** to upload the image. Repeat the same for the other cover with the **correct dimensions.**

The **first Cover is the mobile background and the second Cover is for landscape.**  *Cards allow you to display an image on top of your show title instead of your avatar if you chose to show any.*

<figure><img src="https://1950192467-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fn5OaCYL2qREZ3vWQBAet%2Fuploads%2FlpbK49z6a1FUQeMufuxY%2Fupload_image.gif?alt=media&amp;token=2f6376f6-626d-4a0f-8e04-fffebdc67e10" alt=""><figcaption></figcaption></figure>

**Add description**

You can add additional information to your show, which currently is not being displayed.


# Views

Views are your landing pages also known as Pre-Show, Live, Post-Show, Replay\&Upload

Navigate to Views **inside your show** to start customizing each of them.&#x20;

<figure><img src="https://1950192467-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fn5OaCYL2qREZ3vWQBAet%2Fuploads%2FtNAxVOuX59VWSTCdo0LB%2Fviews.gif?alt=media&amp;token=149a3518-67a9-41cc-ac9d-2059efdae8dd" alt=""><figcaption></figcaption></figure>

Each view consists of the same three sub-items. Details, Assets, Advanced settings.

| Title          | This is the headline on your pre-show, post-show or replay/uplaoded show                                                                                           |
| -------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| Teaser         | This is a paragraph right below the headline/title                                                                                                                 |
| Call to action | This is an optional button you can activate wich could link to a newsletter signup or similar. Fill out the information for the CTA and decide how it should open. |

**Assets**

Upload a background image for the respective view. If you make no change, LiSA takes the default one provided in Show Details.

**Advanced Settings**

Background colour can be added if no background image has been uploaded for the show.

Tile color is the background color where your details (title, teaser) will be displayed.


# Carousel/Products

Carousel allows you to add products and banners to your show.

Inside the carousel is where the magic happens and products as well as banners can be placed.

### **PRODUCTS**

Click on the + icon in the top right corner and select **Add products**

You will see a pop up window allowing you to either search the API/Feed or look at Manually created products.&#x20;

#### PREVIEW

Search results are a preview. You will have to hit enter or click the magnifying glass icon to be able to select and add products.

#### ADD PRODUCTS

<figure><img src="https://1950192467-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fn5OaCYL2qREZ3vWQBAet%2Fuploads%2FSHR2fVCiQgh0kAonyHZv%2Fproduct_selector.gif?alt=media&amp;token=51fe0ab6-fe47-4681-9a7c-12389dd438aa" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
&#x20;If you are using the identifier field for products in LiSA you are able to search by Identifier as well.&#x20;

PRO TIPP: Comma separated values will yield the exact results.
{% endhint %}


# Advanced Settings

Advanced settings can be found at the bottom of every show. Here you can make individual show changes like the streaming format and quality as well as other customizations.

Click on advanced settings to open the menu.

<figure><img src="https://1950192467-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fn5OaCYL2qREZ3vWQBAet%2Fuploads%2Fwjy241fQDH5k3aC59AwG%2FScreenshot%20-%202024-03-26T104600.746.png?alt=media&amp;token=047746b8-f1c1-4c81-856d-d4984a733eac" alt=""><figcaption></figcaption></figure>

|                              |                                                                                                                                                                                                               |
| ---------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Show host(s) avatar(s)       | Show/Hide host(s) avatar(s) on pre, post, replay page                                                                                                                                                         |
| Background color             | If no background images is provided you can display a background color instead                                                                                                                                |
| Display show date            | Show/Hide date and time of your event on the pre-show page                                                                                                                                                    |
| Enable countdown             | Show/Hide the countdown on your pre-show                                                                                                                                                                      |
| Enable add-to-calendar       | Show/Hide the add to calendar feature                                                                                                                                                                         |
| Enable Social sharing        | Show/Hide the social sharing feature                                                                                                                                                                          |
| Language                     | Profanity filter, select your corresponding language                                                                                                                                                          |
| Video output format(s)       | Select your video output formatLandscape: LiSA will output the video signal as we receive it.Portrait: LiSA will crop the video to provide the same "mobile view" on any device, even desktopsLearn more here |
| Video profile                | Select the streaming quality of your video\*                                                                                                                                                                  |
| Enable replay at             | Select a date and time when your replay should be activated. If blank, the replay will be available right after the show has ended                                                                            |
| Enable carousel on replay    | Show/Hide the product carousel during a replay                                                                                                                                                                |
| Replay carousel items events | Activated/Deactivate this option to show highlighted products the same as they were during the live                                                                                                           |
| Enable chat on replay        | Show/Hide the chat that happened during the live on your replay                                                                                                                                               |


# Promotion

PROMOTION

Customize and activate a promotion for a specific show which can be implemeted into your own environment to increase visibility and viewership.

Drag and drop a background image for your promotion widget and click on the button to activate the promotion.

The code that appears is an example of what has to be integrated from your developers to make this work. **Contact us** to learn more about it.

<figure><img src="https://1950192467-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fn5OaCYL2qREZ3vWQBAet%2Fuploads%2FfrzQzPbMaNvtwPIlAXkB%2F_teRCz6Ui3Bi-A9xho9qg_promotionactive.webp?alt=media&amp;token=732c2ef4-a2f2-40c5-a365-952af052da10" alt=""><figcaption></figcaption></figure>


# Publish

Your show is now ready to be published which means that your potential viewers can reach the countdown page.

**Click on the gear wheel in the top right corner and then click Publish**

<figure><img src="https://1950192467-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fn5OaCYL2qREZ3vWQBAet%2Fuploads%2FhggEqId5IsuDRjE6ZE5y%2Fbaauf2FDoQ29T0LRFEFWQ_publish1.webp?alt=media&amp;token=cb605c66-6467-460e-8332-693b098597ca" alt=""><figcaption></figcaption></figure>


# Copy a show

Every show can be copied for example to test with the exact same product set up or if you want to try out different hardware.

**STEP 1: LOCATE SHOW TO COPY**

Navigate inside LiSA and find the show you'd like to copy.

**STEP 2: COPY SHOW**

Click on the show to enter the show details and then click on the **gearwheel** in the top right corner.

**Select "Create copy"**

**STEP 3: LOCATE NEW SHOW**

Navigate back to all shows and you should find a show starting with "Copy: xyz". Now you can go ahead and make changes or adjustment as you'd normally do with any other show if needed.

<figure><img src="https://1950192467-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fn5OaCYL2qREZ3vWQBAet%2Fuploads%2FKnFWnXWn0c8puQmOzWvc%2FqKVZm7wqonHpvrKCzkwGg_showcopy.webp?alt=media&amp;token=02eba1bb-543c-4c34-942e-3f86499efe5c" alt=""><figcaption></figcaption></figure>


# Go Live (Host)


# One Host

### STEP 1: JOIN THE EVENT AS A HOST

Locate your show inside the dashboard and click on the three dots next to it and select Host View.

Alternatively click on the show and once inside the show details click on the pink "play button" (Launch host view) in the top left corner.

{% hint style="warning" %}
If the show is not published and you are testing you will get a notification mentioning e.g. that there won't be a recording.
{% endhint %}

<figure><img src="https://1950192467-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fn5OaCYL2qREZ3vWQBAet%2Fuploads%2FrtQX50ncvzKtZmLun7SK%2FHfSmLX6p1FSwhM2N9i1Oo_hostjoinshow.webp?alt=media&amp;token=389fec3a-c418-46b9-8dcc-3e8762d162a7" alt=""><figcaption></figcaption></figure>

### STEP 2: PREVIEW

You are now in the preview which is indicated by a green dot and the word preview at the top.

At the top left you will see a mini menu

Mute/Unmute (mutes your microphone and indicates it to viewers with an icon)

Read Only chat for hosts (increases reading space and removes typing option for hosts only)

Settings (Camera selection, Microphone selection, grid view)

<figure><img src="https://1950192467-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fn5OaCYL2qREZ3vWQBAet%2Fuploads%2Fjphd1Q4RUjh2MzkIjLXI%2FhElo9fVloZNnNJKgFQlgi_hostjoinshowhardwarepreview.webp?alt=media&amp;token=f93278e0-bcf3-4c93-b59a-d5aded425c64" alt=""><figcaption></figcaption></figure>

### STEP 3: GO LIVE & STOP LIVE

When you are ready, click on the three lines in the top right corner to open the submenu and press the **red Start button**

You will see a 3 seconds countdown and the green preview dot will change to a red Live dot.

Once your show is about to end, click on the three lines in the top right corner again to open the submenu and **press the red Stop button**

<figure><img src="https://1950192467-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fn5OaCYL2qREZ3vWQBAet%2Fuploads%2FjpYuRnJErpgNwKYjihQd%2FJrpQuxuZW1nXhNq6iQGym_hostjoinshowhardwarepreviewgolive.webp?alt=media&amp;token=80d78922-1f77-43d8-89b6-5428e0b25314" alt=""><figcaption></figcaption></figure>


# Multiple Hosts (Co-Hosting)

Two hosts can go live from two different locations at the same time or join an event at any time.

Start and Stop together

### STEP 1: JOIN THE EVENT AS A HOST

Locate your show inside the dashboard and click on it. Once inside the show details click on the pink "play button" (Launch host view) in the top left corner.   Alternatively you can click on the three dots next to the show and select Host View

### STEP 2: PREVIEW & HARDWARE SELECTION

You are now in the preview which is indicated by a green dot and the word preview at the top. Start selecting your camera and microphone from the respective dropdowns in the top left corner.

### STEP 3: GO LIVE

When you are ready, click on the three lines in the top right corner to open the submenu and press the red Start button

You will see a 3 seconds countdown and the green preview dot will change to a red Live dot.

### STEP 4: STOP LIVE

When your show has finished, click on the three lines in the top right corner to open the submenu and press the red Stop button

{% hint style="info" %}
We recommend the "main host" to start and stop the live
{% endhint %}

Join and Leave the event

### STEP 1: JOIN AND LEAVE THE EVENT

While the event is live you can just join the event as a co-host and immediately interact with your audience and the other host.&#x20;

You will get a notification telling you that an event is live and if you are sure you want to join

Once your part is done you can leave the event by clicking on the three lines in the top right corner and select LEAVE


# Magic Link

You can create magic link for a second host that bypasses log in and let's them join the show right away so two hosts can go live from two different locations at the same time.&#x20;

Start and Stop together

### STEP 1: NAVIGATE TO YOUR SHOW

Locate your show inside the dashboard and click on it. In the Details look for the Host entry. Click into it.

<figure><img src="https://1950192467-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fn5OaCYL2qREZ3vWQBAet%2Fuploads%2FiCiqhJd2OFvGcuqWHL3y%2FScreenshot%20-%202025-05-27T090605.152.png?alt=media&amp;token=c12c148d-353d-4a72-bcab-c4a07362b378" alt=""><figcaption></figcaption></figure>

### STEP 2: ADD HOST

You will now see a pop where you can add hosts to your show. Type the name of the host and press enter or the magnifying glass.&#x20;

Click on the hosts name you want to add.&#x20;

<figure><img src="https://1950192467-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fn5OaCYL2qREZ3vWQBAet%2Fuploads%2FFPI0KQnOQIIGYRjjYSaN%2FScreenshot%20-%202025-05-27T090837.844.png?alt=media&amp;token=6f014369-03fc-445b-918d-65812c8f9b2b" alt=""><figcaption></figcaption></figure>

### STEP 3: CHECK HOST SET UP&#x20;

Make sure your hosts are correctly set up as Primary and Co-host. If not, you can drag and drop the users.

<figure><img src="https://1950192467-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fn5OaCYL2qREZ3vWQBAet%2Fuploads%2F8hgy9k4o1p7ItJD0e7hr%2FScreenshot%20-%202025-05-27T091146.269.png?alt=media&amp;token=72f3b45a-9671-4c38-b0b2-59b374815f3b" alt=""><figcaption></figcaption></figure>

### STEP 4: MAGIC LINK

You can see 4 buttons next to each host.&#x20;

<figure><img src="https://1950192467-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fn5OaCYL2qREZ3vWQBAet%2Fuploads%2FJvufkkSVbX4JC21B3fi6%2FScreenshot%20-%202025-05-27T091420.101.png?alt=media&amp;token=f196cca4-bca3-40b6-a8c4-1ec03c5c1f48" alt=""><figcaption></figcaption></figure>

1. Copy the magic link
2. QR code
3. Send email with link and QR code
4. Delete

### STEP 5: JOIN

Once the user clicks on the magic link they will join the host view right away!


# Product & Banner Interactions

You can dynamically make products/banners visible (shoppable); highlight them or mark them as sold during an event and hide them again. This gives you a lot of flexibitliy in regards to conducting a show. You can show one product at a time or multiple or of course the whole range you are planning to show during the event.

### STEP 1: JOIN THE EVENT AND OPEN SUBMENU

Locate your show and join as a host. Click on the three lines in the top right corner to open the submenu where you will find all products/banners that have been added to the show. You will see three different buttons next to each product.

### STEP 2: INTERACT WITH PRODUCTS / DYNAMICALLY CHANGE VISIBILITY

Observe how product actions are being performed on the left side and what the outcome is during the live event on the right side.

They **eye icon** makes products visible/invisible

The **star icon** highlights a product by adding a colored border around it and moves the carousel

The **cart icon** marks a product as sold out (works only on products)

<figure><img src="https://1950192467-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fn5OaCYL2qREZ3vWQBAet%2Fuploads%2F834u3Ns2dmOUI7LHsb8V%2Fproduct-push.gif?alt=media&amp;token=edb429ac-1329-40ff-b034-d423ba18b2cc" alt=""><figcaption></figcaption></figure>


# OBS Set Up (Basic)

You can use a variety of software to connect LiSA to your hardware or software euqipment. In this article we will show you how to set up OBS.&#x20;

#### STEP 1: Install OBS

Download OBS for your operating system via this link: <https://obsproject.com/download>

#### STEP 2: Install Virtual Cable for Audio Transmission

Download the virtual audio cable via this link: <https://vb-audio.com/Cable/&#x20>;

Make sure to install it with administrator rights onto your computer.

#### STEP 3: Change monitoring device in OBS

Navigate to: File → Settings → Audio → Advanced

Under advanced you will be able to change the monitoring device to the newly installed cable. Once selected you need to apply your changes.

<figure><img src="https://1950192467-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fn5OaCYL2qREZ3vWQBAet%2Fuploads%2FddQ702E3IqkCi4WHBgPx%2FGGOFolZpk9H1pAQKILKzC_obsmonitoringcable.webp?alt=media&amp;token=c215124d-de0b-4249-91f9-828300c0c531" alt=""><figcaption></figcaption></figure>

#### STEP 4: Select Monitor and Output

In this guide we added a Media Source and will have to change the monitoring and output.&#x20;

Go back into the OBS main screen and click the three dots in the Audio Mixer  window

<figure><img src="https://1950192467-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fn5OaCYL2qREZ3vWQBAet%2Fuploads%2F1FstqDfobQZwRmN1h8Dy%2FhaQYzBr_cirUUvtPou6m6_obsmonitoringcabledots.webp?alt=media&amp;token=7be16581-5147-4997-ab37-f2121d896972" alt=""><figcaption></figcaption></figure>

In the next window, look for the Media Source  and change the Audio Monitoring to the following settings:

<figure><img src="https://1950192467-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fn5OaCYL2qREZ3vWQBAet%2Fuploads%2FjAP4PY6U8Y8I56CM9PFU%2FzGr8Nj6_rWIX8N0juLThh_obsadvancedmonitor.webp?alt=media&amp;token=09fa6b62-1a95-492c-be98-86be98005469" alt=""><figcaption></figcaption></figure>

#### STEP 5: Locate the virtual camera in OBS

Go back into the OBS main screen and click on "Start Virtual Camera" in the controls panel

<figure><img src="https://1950192467-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fn5OaCYL2qREZ3vWQBAet%2Fuploads%2F0Ixsn0YkVXLDos3a3AjU%2F08SO-BILUL1fFMo_TtSy5_obsstartvirtual.webp?alt=media&amp;token=da718577-f084-4bb5-8287-63db15dbc869" alt=""><figcaption></figcaption></figure>

#### STEP 6: Select Video and Audio Output

Navigate back into the LiSA tool and join as a host.&#x20;

Once you are in the host view wait until you can see yourself and then switch the camera and audio output via the dropdowns in the top left corner.&#x20;

<figure><img src="https://1950192467-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fn5OaCYL2qREZ3vWQBAet%2Fuploads%2FWEw9by26aMkN8MbNlU9s%2FJzs45vxxRN82yGlzepkdp_obsselect.webp?alt=media&amp;token=86f2fc76-25ae-42b6-b251-61227b16d8ba" alt=""><figcaption></figcaption></figure>

#### STEP 7: Go Live

You are now transmitting sound and video via OBS and can go live

{% hint style="warning" %}
f you are opting for an OBS set up make sure you have changed the the show's video profile to OBS under \[SHOW NAME] -> Details -> Advanced Settings
{% endhint %}


# Best Practices Live

### POSITIONING & LIGHTING

Make sure to position yourself for mobile and desktop viewers. LiSA offers a grid view that will show you easily where to stand before you go live

Right next to the camera drop down you will find the grid view button #. Click the button to see where to position your self for mobile viewres

Use a light source fom the front to have the best quality possible.

### HARDWARE & SOFTWARE

LiSA offers a lot of flexibility regarding additional hardware and software. Adding pieces to the set up does complicate things at times unnecessarily. We recommend to use your phone as it provides great quality and is so easy to use and set up!

You can use any commonly used browser and even video software such as OBS or vMix

### TIME TO GO LIVE

Finding the best time of the day to go live is tricky at times, especially if you are just starting out.

Analyse your traffic spikes for your shop and get a better picture when your customers are browsing and shopping. You might find that your customers prefer browsing on a Sunday morning, which potentially could be the perfect time for your event.&#x20;

### WHERE TO GO LIVE

**TIP 1: Chose an inspiring location**

Even though the presenter will of course be the main focus of the show, an appealing, inspiring setting can make viewers feel more welcome.

**TIP 2: Create an authentic atmosphere**

From an influencer's own living room, over a great corner in your flagship store or a cool outside location all the way to a specifically designed studio - the choice of location needs to fit your audience's expectation.

However, we do advise to consider that live stream shopping is a more direct and somewhat more informal way of conversing with your audience. We experience that today's online shoppers generally prefer a more authentic vibe in livestreams than for example your classic TV-Shopping "look and feel".

**TIP 3: Consider depth**

Put your presenter in front of a background with some depth as it is easier on the eye when you're watching for a longer time. Placing a presenter directly in front of a wall or back drop can make it more difficult for the eye to process.


# Chat


# Chat Moderation

As a chat moderator you have access to various tools to keep control over the chat and provide an engaging experience.

### STEP 1: LOCATE YOUR SHOW

Click on Shows in the main menu and make sure to locate your show. Click on it to enter the show details and then select the Moderator view or click on the three dots next to the show and select Moderator view

<figure><img src="https://1950192467-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fn5OaCYL2qREZ3vWQBAet%2Fuploads%2FTE9y5w30RiQCufNfqpCn%2FJZHRCYroA3Dpey1IdiqNJ_screenshot-2022-11-16t164900460.webp?alt=media&amp;token=71c8658c-25e3-4a66-abec-e88769cce6fd" alt=""><figcaption></figcaption></figure>

Once you have launched the moderator view you will join the event and will see the host, too.

<figure><img src="https://1950192467-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fn5OaCYL2qREZ3vWQBAet%2Fuploads%2FEYBGuuv75wMz49QvEOJj%2Ftk_x-y_vs7RdoH7RL4PMc_joinchat.webp?alt=media&amp;token=d0fa53c0-b2ad-4171-aede-06714a6a5cd2" alt=""><figcaption></figcaption></figure>

### STEP 2: MESSAGING

At the bottom of your screen you will a text box. Click into it and start typing and send your message

<figure><img src="https://1950192467-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fn5OaCYL2qREZ3vWQBAet%2Fuploads%2FmeUNBUVyZ0Gtvksq5qiJ%2FSpfwVZ7CMf8nKxWt1ViPv_chattypemessage.webp?alt=media&amp;token=8d8fcc5c-db47-4d84-9f5d-ee6315fa5535" alt=""><figcaption></figcaption></figure>

### STEP 3: PIN MESSAGE

At the bottom of your screen you will a text box. Click into it and start typing. Click the pin icon and then send your message

<figure><img src="https://1950192467-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fn5OaCYL2qREZ3vWQBAet%2Fuploads%2FKGsnBBMY3H7qReMy8tLQ%2FvgtmK5DhS2cxl94hlafZH_chattypemessagepin.webp?alt=media&amp;token=4d990504-5d00-4482-8cab-f34882959d5c" alt=""><figcaption></figcaption></figure>

### STEP 4: SENDING LINKS (HYPERLINK MESSAGE)

You can just paste links which will be clickable. In case your links are long you can hyperlink by double clicking the word and selecting the link icon from the mini-menu that pops up.

<figure><img src="https://1950192467-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fn5OaCYL2qREZ3vWQBAet%2Fuploads%2FEYnNwCRuNDfKz7HNJmNj%2FC76245yOKAJAp5p5wyrzu_chattypemessagelink.webp?alt=media&amp;token=4aff4716-90f4-4208-af86-c8fed5fbc3bb" alt=""><figcaption></figcaption></figure>

### STEP 5: REMOVE MESSAGES & PIN / BLOCK /

Click on the three dots next to any message to open a sub menu

Remove will remove a single message,

Remove all messages will remove all messages from this user and

Block will shadow ban the user and remove all messages as well. The viewer is still capable of enjoying the show and shop or chat.

Remove pin will remove the pinned message for all viewers

<figure><img src="https://1950192467-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fn5OaCYL2qREZ3vWQBAet%2Fuploads%2FxXsTffAxWJIVfNh92bWY%2FsKE9H4AVbO98Hzn8MGzoJ_chattypemessagesubmenu.webp?alt=media&amp;token=97b13cf9-0eb2-4d24-a909-7c53a0a2437c" alt=""><figcaption></figcaption></figure>

### STEP 6: SUSPEND CHAT

ADMINS have the option to suspend the chat temporarily. Navigate to the show and click on the emergency button. Select Supend Chat.

Re-activating the chat, just follow the same steps.

<figure><img src="https://1950192467-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fn5OaCYL2qREZ3vWQBAet%2Fuploads%2FOTYdJhaL93sGMJ336Cwk%2FYOHpRo1TxQxJrdQKNrJ3E_suspendchat.webp?alt=media&amp;token=7e5acb8d-3b0e-4815-91bf-3a40103b0788" alt=""><figcaption></figcaption></figure>

### STEP 7: DIRECT REPLY

You can directly reply to a message from a viewer by clicking on the arrow next to the viewers message. You will open a little text box where you can type and send your message.

Viewers will see your direct reply if their chat is expanded.

<figure><img src="https://1950192467-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fn5OaCYL2qREZ3vWQBAet%2Fuploads%2FhDKX8hPFRwVGEy23JnjY%2FvZ5niZ-rRmeQbEsA8e8_a_chattypemessagedirect.webp?alt=media&amp;token=3c4113c5-cbe0-4b14-bf30-f03a8e8aad69" alt=""><figcaption></figcaption></figure>


# Product & Banner Interactions

You can dynamically make products/banners visible (shoppable); highlight them or mark them as sold during an event and hide them again. This gives you a lot of flexibitliy in regards to conducting a show. You can show one product at a time or multiple or of course the whole range you are planning to show during the event.

### STEP 1: JOIN THE EVENT AND OPEN SUBMENU

Locate your show and join as a moderator. Click on the three lines in the top right corner to open the submenu where you will find all products/banners that have been added to the show. You will see three different buttons next to each product.

### STEP 2: INTERACT WITH PRODUCTS / DYNAMICALLY CHANGE VISIBILITY

Observe how product actions are being performed on the left side and what the outcome is during the live event on the right side.

They **eye icon** makes products visible/invisible

The **star icon** highlights a product by adding a colored border around it and moves the carousel

The **cart icon** marks a product as sold out (works only on products)

<figure><img src="https://1950192467-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fn5OaCYL2qREZ3vWQBAet%2Fuploads%2F834u3Ns2dmOUI7LHsb8V%2Fproduct-push.gif?alt=media&amp;token=edb429ac-1329-40ff-b034-d423ba18b2cc" alt=""><figcaption></figcaption></figure>


# Best Practices Chat

### CHECK SPELLING

Make sure to quickly spell check your messages before you send them.

### BE QUICK

As the chat can become busy it is important to answer quickly to your clients questions during the live event.

### QUESTIONS TO ANSWER

You will find yourself in a position where a questions should rather be answered by the host instead of a chat moderator. This is part of the show set up and "script" for the entire event. Check with your team which kind of questions should be answered by a host


# Chat transcript (Download)

LiSA provides you with a chat transcript for any show that was published and was conducted. You can filter the type of message as well as download the transcript.

### STEP 1: LOCATE CHAT TRANSCRIPT

Navigate into your recently conducted show and click on it. You will see Chat showing up in the shows submenu

<figure><img src="https://1950192467-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fn5OaCYL2qREZ3vWQBAet%2Fuploads%2Fepx2fMInw2X0zpoEvfra%2FtWzpS83of0Ji3gnCB-B9v_screenshot-2022-11-17t072131606.webp?alt=media&amp;token=d1d9ad0d-0b8f-4a44-ba62-91279e72c1d7" alt=""><figcaption></figcaption></figure>

### STEP 2: FILTER CHAT TRANSCRIPT & DOWNLOAD

You can filter the type of message with the drop down. Also, if there have been several start/stop events you can choose which chat to download

<figure><img src="https://1950192467-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fn5OaCYL2qREZ3vWQBAet%2Fuploads%2FWsIIVcTErFiku4LPEeP3%2FiQNCc-XNXvDtubumGBEg5_chattransfilter.webp?alt=media&amp;token=24ab17e3-06cf-46ce-bc95-638e270964f9" alt=""><figcaption></figcaption></figure>


# Video Uploads & Replays


# Show Replay

Every show that has been published and conducted succussfully will provide you with a replay which will be visible and shoppable right after your live has finished. You can adjust when a replay will be available.

### AUTOMATIC REPLAY

**STEP 1: SET REPLAY AVAILABILITY**

By default a replay will be available right after the live has finished. If you want a replay to become available at a certain date and time, you can do so.

Navigate to your show and scroll down to advanced settings inside your show. Here you will see "Enable replay at" - click into the chose box and set a date and time

<figure><img src="https://1950192467-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fn5OaCYL2qREZ3vWQBAet%2Fuploads%2F1y83vsIdHtW0zJLqkbaC%2FWa_jRDlexCc-IcqEPUrNJ_screenshot-2022-11-17t073717736.webp?alt=media&amp;token=26190aab-d25f-425c-a426-487c4f269831" alt=""><figcaption></figcaption></figure>


# Upload Video

You can upload pre-recorded content or older content that is still relevant to you and your audience and let it run as a replay.

**STEP 1: CREATE A SHOW**

Follow the steps to create a show here

**STEP 2: MARK AS REPLAY**

Once you have set up the show click on the gear wheel in the top right corner and select "**Replay**".

Enter the length and activation date/time for the replay. Min 5 minutes.

<figure><img src="https://1950192467-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fn5OaCYL2qREZ3vWQBAet%2Fuploads%2Ft7ijEqYNh28UM0OWu3t7%2Fupload_vid.gif?alt=media&amp;token=a7d45655-0f1e-467d-85b8-5424c34642a2" alt=""><figcaption></figcaption></figure>

You will see how the show will be set to conducted and three menu items appear. Analytics, Chat and Recordings

**STEP 3: UPLOAD AND ACTIVATE REPLAY**

Click on Recordings in the shows submenu.

Drag and drop your video into the upload box, select if Portrait or Landscape and wait for the upload to finish. Once done, activate the replay by **toggling the "Start at" button**

<figure><img src="https://1950192467-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fn5OaCYL2qREZ3vWQBAet%2Fuploads%2FCwTGVxJxPXTUrE63FOec%2Fupload_vid_upload.gif?alt=media&amp;token=4c90caf7-42cf-43ac-8597-f520d49d2bd3" alt=""><figcaption></figcaption></figure>


# Download your recording

**STEP 1: NAVIGATE TO YOUR RECORDING**

Navigate into the show you'd like to download the recording and **click on "Recordings"**

**STEP 2: REQUEST DOWNLOAD**

Next to your recording on the right side, you will see the download icon where you can request the download.

<figure><img src="https://1950192467-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fn5OaCYL2qREZ3vWQBAet%2Fuploads%2FqK1O9r01nFbssMO23N21%2FqShAqoW01aQJ8e86SrFqD_downloadrecordingrequest.webp?alt=media&amp;token=6bc56add-662a-4d15-ad6c-c7267e5fd112" alt=""><figcaption></figcaption></figure>

**STEP 3: DOWNLOAD THE RECORDING**

Once your request has been processed you can download it. Please allow roughly 10min and go back to the recording and click the download button.

**Right click on "Download the recording" and select Save link as**

Menu options may differ on your browser.

<figure><img src="https://1950192467-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fn5OaCYL2qREZ3vWQBAet%2Fuploads%2FHr7W2fWFQsxUDUnk3sfL%2F5IgcA18VA5LVPrxhrath2_downloadrecordingdownload.webp?alt=media&amp;token=7df52580-fc7b-45d4-9a03-50a672dac9f4" alt=""><figcaption></figcaption></figure>


# Snippets

Products snippets enable the presentation of content in form of short videos extracted from live show recordings in order to highlight a single or multiple product(s).

These snippets can easily be added to product detail pages and are commonly employed for content exploration, enabling visitors to access additional forms of product presentation in an engaging format.

As a user you will quickly see important information about any Ready or Processing snippet and have access to editing, deleting or creating new snippets from scratch!

<figure><img src="https://1950192467-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fn5OaCYL2qREZ3vWQBAet%2Fuploads%2FzopyGs7cFdr61QoEBAzy%2F2RP_hwr8QTmDgcHk144Xb_snippetsoverview.webp?alt=media&amp;token=b687ef9c-298c-4c5d-b979-6f88c27080c6" alt=""><figcaption></figcaption></figure>


# Create Snippet

**STEP 1: NAVIGATE TO SNIPPETS**

Log into your LiSA account navigate inside the menu to Shows -> Snippets

<figure><img src="https://1950192467-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fn5OaCYL2qREZ3vWQBAet%2Fuploads%2FwDMXc4a8OAupdQBIpOlD%2FoKSAZTsYDVoiy-w3G6Hg8_snippetsmenu.webp?alt=media&amp;token=d15fde74-9267-4136-83d8-618f5eaa8490" alt=""><figcaption></figcaption></figure>

**STEP 2: CREATE A SNIPPET**

Click on the **+Create new** button in the top right corner and give your snippet a name and look for your show.

<figure><img src="https://1950192467-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fn5OaCYL2qREZ3vWQBAet%2Fuploads%2FdTG9nFxFRnupuRezWm65%2Fsnippets_start.gif?alt=media&amp;token=d49bfc13-4cc8-41e4-8a00-8e15632944e1" alt=""><figcaption></figcaption></figure>

**STEP 3: EDIT SNIPPET**

You will now be able to edit the snippet. **Once you are happy with your selection click Create** in the bottom right corner and wait for Processing to finish.

**Select products**

{% hint style="danger" %}
Products must have a product identifier set up! Otherwise products won't show for the snippet and you won't be able to save.
{% endhint %}


# Edit Snippet

LiSA Snippets let you edit your snippets.

### STEP 1: NAVIGATE TO SNIPPETS

Log into your LiSA accont and navigate in the main menu to Settings -> Snippets

### STEP 2: EDIT SNIPPET

Look for the snippet you want to edit. Click on the three dots next to it and select "**EDIT**"

You can change start/end time as well as products.&#x20;

Switch into **Full Screen Edit** if needed

<figure><img src="https://1950192467-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fn5OaCYL2qREZ3vWQBAet%2Fuploads%2FRvI0BtzWgutJf0jk67U3%2Fsnippet_edit.gif?alt=media&amp;token=92317570-3c95-4a7a-bc62-a620e5c12c89" alt=""><figcaption></figcaption></figure>


# Snippet Suggestions

Snippets suggestions makes it as easy as possible for you to find that right moment during your show!

LiSA's Product Highlight feature has received a boost and is now also linked to snippets suggestions.

Whenever you highlight a product during a show, we will provide you instantly with snippets suggestions.

### **STEP 1: ACTIVATE SNIPPETS SUGGESTION**

Navigate to **Settings -> Live**

Activate snippets suggestions and save your selection.

<figure><img src="https://1950192467-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fn5OaCYL2qREZ3vWQBAet%2Fuploads%2FFMXyEwRoxw7L1VMdmjTR%2FU4tTtVDp4SGtqcWQMCGPl_snippetsactivatesug.webp?alt=media&amp;token=7fafbf7f-63e6-4453-895b-3906e27c0df2" alt=""><figcaption></figcaption></figure>

### **STEP 2: USE SNIPPETS SUGGESTIONS**

{% hint style="warning" %}
**Requirements:**

Show has to be published

Snippet suggestions have to be enabled

Products have to be highlighted during a show
{% endhint %}

#### STEP 2-a: NAVIGATE TO SNIPPETS SUGGESTIONS

Navigate to Shows -> Snippets -> Select the Tab "Suggestions"

#### STEP 2-b: REVIEW AND EDIT SUGGESTIONS

<figure><img src="https://1950192467-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fn5OaCYL2qREZ3vWQBAet%2Fuploads%2FraWcSw4wcm3WznYFhU0N%2F5H9DX18SMO9BnGGU-yGlu_snippetsactivatesugfind.webp?alt=media&amp;token=ea678639-51f1-4797-ab93-94f22d5594d9" alt=""><figcaption></figcaption></figure>

Every suggestions starts with a Status of "Pending review". Click on the review button to make any change needed as if you'd set up a snippet from scratch.

Change the title or drag the slider to increase or decrease the duration.

Once you are happy and want to release the snippet, click Save.


# Duration Restriction

LiSA Snippets let you restrict the total duration of any snippet. If you want your snippets to be a maximum of 15 seconds, you can make this an account wide setting. By default there is no duration restriction set up.

### **STEP 1: NAVIGATE TO SETTINGS**

Log into your LiSA accont and navigate in the main menu to Settings -> Snippets

### **STEP 2: RESTRICT DURATION**

Look for Duration restriction and select Restrict. Type in minutes and seconds. Then click Save in the top right corner. Your snippets cannot be longer then 15 seconds in this example.

<figure><img src="https://1950192467-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fn5OaCYL2qREZ3vWQBAet%2Fuploads%2F1Vu4W33TDvXc3QcO4SsP%2Fr57QpSzaVrJ3VIiL6uIio_snippetsrestrict.webp?alt=media&amp;token=393f7b18-4b90-43db-8e44-0891a121d527" alt=""><figcaption></figcaption></figure>

### STEP 3: Restrictions activated

<figure><img src="https://1950192467-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fn5OaCYL2qREZ3vWQBAet%2Fuploads%2FglZjkTTLIepqp8Iri7Ov%2FFYf9dBiNSiRoWaAlXp-0f_snippetsrestrictduration.webp?alt=media&amp;token=7a3b8d85-ccca-49fd-ad32-786520fa6795" alt="" width="375"><figcaption></figcaption></figure>


# File Size Warning

LiSA Snippets let you set up a file size warning system which will be displayed in the list of all snippets. By default there is no warning set up.

### STEP 1: NAVIGATE TO SETTINGS

Log into your LiSA accont and navigate in the main menu to Settings -> Snippets

### STEP 2: SET UP FILE SIZE WARNING

Look for File size warning and select Restrict. Type in the file size in MB and click Save in the top right corner.

<figure><img src="https://1950192467-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fn5OaCYL2qREZ3vWQBAet%2Fuploads%2FLwBwaREOSkFfLaa72uLm%2FA4eEVzuV4mN9m6YKe6tQs_snippetsrestrictfilesize.webp?alt=media&amp;token=d6f2a1b0-9b5c-4e0b-90da-9d7782b03f19" alt=""><figcaption></figcaption></figure>

### STEP 3: File Size Warnging activated

<figure><img src="https://1950192467-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fn5OaCYL2qREZ3vWQBAet%2Fuploads%2Fm4NFXb8vU1AGNfABIns2%2FU1l6zCM13K877Zyigc45R_snippetsrestrictfilesizewarning.webp?alt=media&amp;token=1f57dd7a-d5cb-4af0-b8fd-7a340874c8e1" alt=""><figcaption></figcaption></figure>


# Download Snippet

LiSA Snippets let you download and reuse all of your snippets.

### STEP 1: NAVIGATE TO SNIPPETS

Log into your LiSA accont and navigate in the main menu to Settings -> Snippets

### STEP 2: DOWNLOAD SNIPPET

Look for the snippet you want to download. Click on the three dots next to it and select "Download"

<figure><img src="https://1950192467-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fn5OaCYL2qREZ3vWQBAet%2Fuploads%2FC6mDI61eqwVzdjdqRpkS%2F15iZWDVKV-vJfGh2fAe65_screenshot-2024-03-01t075732310%20(1).webp?alt=media&amp;token=feb820ab-d607-464b-8d29-248fd2696333" alt=""><figcaption></figcaption></figure>


# Templates

If you have a recurring show or you just want to speed up the show creation process then Show Templates will come in handy.&#x20;

**STEP 1: CREATE TEMPLATE**

Click on Shows to open the drop down main menu on the left and then select Show Templates

Click on the + icon in the top right to create a new template

Give your template a name a click on create.&#x20;

<figure><img src="https://1950192467-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fn5OaCYL2qREZ3vWQBAet%2Fuploads%2FAIrrMRK9ZwFPmI4PBoI5%2Ftemplates.gif?alt=media&amp;token=ab564462-eac6-4c75-a19d-42d8bc386a42" alt=""><figcaption></figcaption></figure>

### Modify your Show Templates

You will have access to pre-set information for show details, assets, options and all views options, too.&#x20;

FIll out the information the same way you'd do when you set up a show from scratch.&#x20;

**STEP 2: USE TEMPLATE**

Navigate to Shows, click the plus icon to create a new show and then select your template from the dropdown menu.

<figure><img src="https://1950192467-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fn5OaCYL2qREZ3vWQBAet%2Fuploads%2FDSj1j0PMhFZ0ojYl2CCC%2Ftemplates_use.gif?alt=media&amp;token=fbebb55a-cb2f-458d-be93-f94da5c64e1f" alt=""><figcaption></figcaption></figure>


# Multistreaming / Simulcast


# RTMP Destination Set Up

LiSA support multistreaming to other platforms. In this guide we will look at the LiSA side and how to set up and use the RTMP Destination for a Facebook Live.

### STEP 1: CREATE RTMP Destination

Navigate to Settings -> General -> RTMP Destinations

Click on the plus icon in the top right corner and fill out the template: [Example Facebook](/knowledge/shows/multistreaming-simulcast/facebook-set-up)

<figure><img src="https://1950192467-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fn5OaCYL2qREZ3vWQBAet%2Fuploads%2FAqicnoeZIueDtb1Quy2e%2Fi7EFu-Q1mCPy3dpphKTUJ_rtmpdestin.webp?alt=media&amp;token=875cd705-8d28-4a52-afbe-65e87188a90f" alt=""><figcaption><p>Setting</p></figcaption></figure>

<figure><img src="https://1950192467-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fn5OaCYL2qREZ3vWQBAet%2Fuploads%2Fk8NYsJauh138Hw729z09%2FuqRfBwCyf_LbLoN8XYaYm_rtmpcreate.webp?alt=media&amp;token=a1ef62fb-62a6-441a-8e82-b4cc4e7e2e17" alt=""><figcaption><p>Create new rtmp destination</p></figcaption></figure>

| Internal name | Only visible to user in the backend                                     |
| ------------- | ----------------------------------------------------------------------- |
| Platform      | Enter the rtmp url + stream key intho this box. Facebook example set up |
| Orientation   | Select between landscape and portrait                                   |

Once you have filled out the information click on the gearwheel and publish the rtmp destination.&#x20;

<figure><img src="https://1950192467-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fn5OaCYL2qREZ3vWQBAet%2Fuploads%2FhoSCNFoIUOS3voHdTn4v%2FsL_lA7mqK273NzOsZvwUr_rtmpdestinpublish.webp?alt=media&amp;token=550206ec-b4f9-487c-afc9-eae5c64b80f7" alt=""><figcaption></figcaption></figure>

### STEP 2: USE RTMP Destination

Navigate into your show and scroll a bit down until you see RTMP destinations.

Click into the box and select your destination by toggling the button. Then click save. If you cannot see your platform, make sure you have published the RTMP destination.

<figure><img src="https://1950192467-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fn5OaCYL2qREZ3vWQBAet%2Fuploads%2FxTX9MfUPHk9YwJyXP5pl%2FDODAMK7lWpP4fzTc7BKss_rtmpdestinactivation.webp?alt=media&amp;token=f4172961-ac2f-4233-ab99-24d97ae5d827" alt=""><figcaption></figcaption></figure>

Once you go live on LiSA you'll be live on facebook as well.

{% hint style="warning" %}
You will have to end the streams separately.
{% endhint %}


# Facebook Set Up

### STEP 1: NAVIGATE TO LIVE SECTION

On your time line where you usually post, click on Live video. You will reach a new page.

<figure><img src="https://1950192467-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fn5OaCYL2qREZ3vWQBAet%2Fuploads%2FpLIW0Pw1K0Sknk0g2sAg%2FkxxuSTdY2aJCQd373OHr9_lisafblive.webp?alt=media&amp;token=dc09b024-7088-451f-860b-fe6ceb865289" alt=""><figcaption></figcaption></figure>

#### STEP 1.1: Select Go Live

On the next screen click on the Go Live option.

<figure><img src="https://1950192467-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fn5OaCYL2qREZ3vWQBAet%2Fuploads%2F2wAangYzJbvPIOgaPgkn%2FH76-KsMEV9VJNmWpza-yr_screenshot-2024-03-18t084746128.webp?alt=media&amp;token=72b23f97-a3e9-4ede-8eae-5f62e9b443dc" alt=""><figcaption></figcaption></figure>

### STEP 2: SELECT VIDEO SOURCE

By default Facebook select your camera. Click on Streaming Software

<figure><img src="https://1950192467-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fn5OaCYL2qREZ3vWQBAet%2Fuploads%2FJOlvfjyXiHdw5RPCWqBY%2F02oloctAqS9PknPygJMvl_screenshot-2024-03-18t085027560.webp?alt=media&amp;token=d2593b62-bb94-410a-96b4-3da30e0a174e" alt=""><figcaption></figcaption></figure>

### STEP 3: Build URL / STREAM KEY

You will be presented with a **Stream key**.

Click on **Advanced settings**

At the bottom you will see **Server URL**

**Combine your Server URL with your Stream key** and paste it into your LiSA RTMP Destination.

#### Example Key

Server URL: **rtmps\://live-api-s.facebook.com:443/rtmp/**

Stream Key: FB-377131365259749-0-Abztm-xpqFW12345

Full Stream key: **rtmps\://live-api-s.facebook.com:443/rtmp/FB-377131365259749-0-Abztm-xpqFW12345**

Use the full stream key and add it to your LiSA [RTMP Destination](/knowledge/shows/multistreaming-simulcast/rtmp-destination-set-up)


# Best Practices Shows

### IMAGE DIMENSIONS

Here is a list of the image dimensions.

| Image              | Size                                                                                                               |
| ------------------ | ------------------------------------------------------------------------------------------------------------------ |
| Background Desktop | 1920x1080                                                                                                          |
| Background Mobile  | 3 to 4 ratio e.g. 600x900 (recommended)min width 250px                                                             |
| Banner Mobile      | 5 to 1  ratio e.g. 1000x200 (recommended)main content should be within the 2/3rds from the left, min height: 100px |

{% hint style="warning" %}
We do crop the last 2/5 on the right though depending on the device.

Therefore place all content on the first 3/5 of the mobile image if possible and no content the last 2/5 parts that can be cropped.
{% endhint %}

### FILTER SHOWS

LiSA does filter your shows by status. By default we will show you all scheduled shows, but you can filter by other states as well. Each filter comes with an icon which makes it easy for you to spot a shows state.

Click on the highlighted "clock icon" to remove all filters

<figure><img src="https://1950192467-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fn5OaCYL2qREZ3vWQBAet%2Fuploads%2FDC4SbhQAFR23tsS7pt87%2F2RQjw9CPXFjaziJFXC5nK_showselect.webp?alt=media&amp;token=620f3cdd-f829-4be2-b2fd-530d4a480325" alt=""><figcaption></figcaption></figure>

### PICKING PRODUCTS

**TIP 1: Check your most clicked products**

Before you select which products to show during your event, we recommend to perform analysis on your most clicked products. This can give you an indication of what to present during your event.&#x20;

**TIP 2: Check your most purchased products**

Analyse your most purchased products. This can give you an indication of what to present during your event where a buying history is available.

**TIP 3: Create shows for product ranges**

Your e-commerce might offer a whole range of different products which could be presented during your event. Consider doing shows for each of the different product ranges or by business unit instead of combining all sorts of products.&#x20;

### CALL TO ACTION BUTTONS

When you create your show we highly recommend to use the optional call to action buttons on the pre-/post-show pages.

For the pre-show page you could use it for your exclusive newsletter signup for future lives.

For the post-show page you could use it to gather feedback from a survey to improve your future lives

### PRODUCT ORDER

Drag and Drop products

Each product has two lines to the left. Drag and Drop into the right order

<figure><img src="https://1950192467-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fn5OaCYL2qREZ3vWQBAet%2Fuploads%2F3ER73xS4BP4UBfAdOHpb%2FZbggp5LF72dDz6lGVK2Pf_productorder.webp?alt=media&amp;token=fb74914f-27b4-42c5-a63a-9d17d4440b24" alt=""><figcaption></figcaption></figure>


# Common issue Audio and Video

LiSA is flexible as in you can chose to stream your live event with a variety of cameras which is fantastic for you as you can chose whichever fits you best.&#x20;

The most common issues are a combination of your network, computer, software used and  your camera. Below you find a list with common issues and how to resolve them.

{% hint style="info" %}
We recommend to test as much as possible, preferebly with the exact same set up which will be used for the live show. As with all technology there might be unforseen issues which can be picked up and fixed during extensive testing.
{% endhint %}

#### My pre show page is blank

navigate back into your show and make sure you set the show to ready

#### Video is lagging or fuzzy

deactivate any downloads in the background

deactivate any uploads in the background

use bandwidth for live event only

check your converter and encoding as it will need to use the same path if you are using this technology

check lighting and make sure it is bright and coming from the front. Bad lighting can cause fuzzy picture quality as your camera might try to compensate for bad lighting

&#x20;

#### Audio is unsynchronized

deactivate any downloads in the background

deactivate any uploads in the background

use bandwidth for live event only

check your converter and encoding as it will need to use the same path if you are using this technology

&#x20;

#### Video clips before or duringthe show are lagging/fuzzy picture quality

try to avoid quick movements or quick scene/picture changes&#x20;

try to avoid a 4k resolution and opt for a 720p with 30fps video or 1080p with 30fps instead

check your converter and encoding as it will need to use the same path if you are using this technology

&#x20;

#### Blurry close up shots

check the auto-focus functionality of the camera you are using

make sure your movements are not too fast as some cameras have trouble refocussing


# Image Dimensions

### IMAGE DIMENSIONS

Here is a list of the image dimensions.

|                    |                                                                                                                    |
| ------------------ | ------------------------------------------------------------------------------------------------------------------ |
| Background Desktop | 1920x1080                                                                                                          |
| Background Mobile  | 900x1400                                                                                                           |
| Banner Desktop     | 3 to 4 ratio e.g. 600x900 (recommended)min width 250px                                                             |
| Banner Mobile\*    | 5 to 1  ratio e.g. 1000x200 (recommended)main content should be within the 2/3rds from the left, min height: 100px |


# Stories

Stories gives you a new level of social commerce and are widely popular on many different platforms. Create your own Stories!

<figure><img src="https://1950192467-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fn5OaCYL2qREZ3vWQBAet%2Fuploads%2FTBaEa4Jxyr4v4Dt5AnV1%2Ffm2jxztcJnJ1EPzbJrlwu_screenshot-2023-07-14t103825132.webp?alt=media&amp;token=72566046-70f0-4f06-9cd3-73631ea6014a" alt=""><figcaption></figcaption></figure>

Your viewers can swipe through your content and shop!

<figure><img src="https://1950192467-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fn5OaCYL2qREZ3vWQBAet%2Fuploads%2FB6gcrhF4iKIqMqR0V4Ql%2F304X4UsVWEw9zY5FdCeMp_screenshot-2023-07-14t103937650.webp?alt=media&amp;token=2090d1db-99e7-4125-8b18-2e0986fec584" alt=""><figcaption></figcaption></figure>


# Create Story

### STEP 1: LOCATE STORY MENU

After you log into your LiSA account locate Stories in the main menu on the left hand side. Click on it and you will be presented with all stories available for your account.

<figure><img src="https://1950192467-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fn5OaCYL2qREZ3vWQBAet%2Fuploads%2FP3g5QZHEtElMbQnixKnm%2FuR5N3xY3m7H130AeYt72Q_storiesoverview.webp?alt=media&amp;token=ca9265df-805c-44d2-b423-5000be3a904c" alt=""><figcaption></figcaption></figure>

### STEP 2: CREATE STORY

In the top right corner, click on the black button named +Create new. Give your Story a name and click on create new.

<figure><img src="https://1950192467-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fn5OaCYL2qREZ3vWQBAet%2Fuploads%2F9dz5EAXUasafQdrEpr65%2FN3I5Tz0Y97r1naPt_mj1g_storiescreate.webp?alt=media&amp;token=e2ad6db7-b727-46fd-a463-7b028b48c859" alt=""><figcaption></figcaption></figure>


# Edit Story

After creating your story, it will appear in the list of all available stories for your account.

### STEP 1: LOCATE YOUR STORY & EDIT

You can find your newly created story at the top of the list of all stories available.

Click on the three dots on the right hand side in the Actions column and select Edit

<figure><img src="https://1950192467-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fn5OaCYL2qREZ3vWQBAet%2Fuploads%2F1zVysNgI2BqZ0iWf2cjE%2FRvR3ax0TajlxWmvEVR3ZZ_storiescustomize.webp?alt=media&amp;token=24116c41-86f6-4a3b-b220-c277a92041d1" alt=""><figcaption></figcaption></figure>

### STEP 2: UPLOAD MEDIA

It's time to start editing your story, so let's upload a video. After clicking on Edit, you will be presented with a new menu on the left where you can upload images or videos.

Click on either to upload your media.

<figure><img src="https://1950192467-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fn5OaCYL2qREZ3vWQBAet%2Fuploads%2FUcMZXsJ5XUYqFoQ0WKEh%2FhLZzijcDZsLYQabJICXYU_storiesuploadmedia.webp?alt=media&amp;token=5ebd1744-20d1-4a90-a46f-5bf2eedd4dbc" alt=""><figcaption></figcaption></figure>


# Publish Story

Once you have made all necessary edits to your story there is only one thing left to do.

Let's publish your story!

### STEP 1: PUBLISH STORY

Locate your story and **click on the three dots next to your story and select Publish**

<figure><img src="https://1950192467-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fn5OaCYL2qREZ3vWQBAet%2Fuploads%2FwnvQvEPY21lnVmmEuNmr%2Fstory_act.gif?alt=media&amp;token=aff68ece-2986-49b3-8f05-e52a838b628f" alt=""><figcaption></figcaption></figure>

### STEP 2: UN-PUBLISH STORY

Click on the three dots next to your story and select unpublish.


# Search and Filter

When you are on Stories you have several option like filtering, searching and spotting important information quickly.&#x20;

### Search and Filter

<figure><img src="https://1950192467-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fn5OaCYL2qREZ3vWQBAet%2Fuploads%2FF84peYI7UFocb4ki0UJn%2FScreenshot%20-%202024-12-12T113058.643.png?alt=media&amp;token=dedd732e-2b95-40ad-9b04-db8448d98deb" alt=""><figcaption></figcaption></figure>

Quickly **search or filter by status** and display results.

**Additional filtering is available** in the top right corner:

<figure><img src="https://1950192467-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fn5OaCYL2qREZ3vWQBAet%2Fuploads%2FbPEW0duoQ3lSpVUg1AHR%2FScreenshot%20-%202024-12-12T113152.113.png?alt=media&amp;token=e52f6b66-ff2c-4e29-baaa-9261c8b03220" alt=""><figcaption></figcaption></figure>

### Quick View Hover

Hover over e.g. categories to see the assigned category to the Story

<figure><img src="https://1950192467-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fn5OaCYL2qREZ3vWQBAet%2Fuploads%2Fp0Yjo0nkh97bVkreXe1i%2Fimage.png?alt=media&amp;token=3fab77fc-787c-4a92-8364-87fc62e7ed92" alt=""><figcaption></figcaption></figure>


# Products & Engagement


# Products


# Create a Product Manually

You can create as many products as you like with LiSA and the process is quick and easy.&#x20;

### STEP 1: NAVIGATE TO PRODUCTS

In the main menu on the left, naviagte to Products to open the drop down menu. Then select Products

You will now see a list of all created products if any have been created yet.&#x20;

### STEP 2: CREATE PRODUCT

Click on the + icon in the top right corner of the list and give your product a name. Click on **create** and you will enter the product details.

<figure><img src="https://1950192467-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fn5OaCYL2qREZ3vWQBAet%2Fuploads%2FZUGrelD5y9VOS7jG8GGH%2FNnnf0NYvH2gx3gkefqKX7_createproduct.webp?alt=media&amp;token=aec5b030-bd6d-4db3-88df-91fd9e412375" alt=""><figcaption></figcaption></figure>

### STEP 3: CHANGE INFORMATION

Once you are inside the product details, you will have to provide product information in the sub menu of this product.

**Details**

| Internal name | This name is only shown inside the LiSA tool                                                                              |
| ------------- | ------------------------------------------------------------------------------------------------------------------------- |
| Title         | This name is shown to viewers during the event                                                                            |
| Brand         | Enter the brand name which is shown to viewers during the event                                                           |
| Price         | Enter the product price here. Make sure to select your currency. You can also add a discounted price or pricing for units |
| Stock         | Optional: Add stock values                                                                                                |
| URL           | Enter the whole product URL from your shop                                                                                |
| Identifier    | <p>Optional\*</p><p>\*used in Snippets Suggestions</p>                                                                    |

<figure><img src="https://1950192467-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fn5OaCYL2qREZ3vWQBAet%2Fuploads%2F5AfH2HktsZ5BFeYnzctm%2FScreenshot%20-%202024-04-24T105027.467.png?alt=media&amp;token=3ef423bc-71b4-4b08-a64b-1641416abd52" alt=""><figcaption></figcaption></figure>

**Assets**

&#x20;Upload your product image here by drag and drop or click into the box and upload it from your laptop.&#x20;

The max. file size is **2mb**

Accepted file extensions: **jpg, png, webp**

### STEP 4: PULISH PRODUCT

To be able to use your product in a show you will have to mark it as ready.&#x20;

In the top right corner, you will see a gear wheel. Click the button and select "Publish"

<figure><img src="https://1950192467-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fn5OaCYL2qREZ3vWQBAet%2Fuploads%2FkBgjfbu7vYWa1SffX3Vf%2FNVG2ohj0Z6NvDvJ0jDnVp_setproductready.webp?alt=media&amp;token=d3a4c884-4d1d-467b-9a66-0506f46f9942" alt=""><figcaption></figcaption></figure>


# Create a Product - API

You can import as many products as you like with LiSA and the process is quick and easy.&#x20;

### STEP 1: SHOW CAROUSEL

Navigate into your show and select Carousel

### STEP 2: OPEN PRODUCTS

Click on the plus icon and select "Add products". You will open a pop up where you can find products from the API/Feed or Manually Created Products.

### STEP 3: SYNC & ADD PRODUCTS

You will see a pop up where you can start searching e.g. by product name. Depending on the integration other search paramaters work as well.

Once you have a search result and want to add it to the search make sure to SYNC the product first.

Now you can tick the box next to it and add it to the show.

<figure><img src="https://1950192467-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fn5OaCYL2qREZ3vWQBAet%2Fuploads%2FF3jhEJqdXz2o29B9nKJi%2FgQok_xsoC_tSmPcNvHIaq_productsearchapi.webp?alt=media&amp;token=b77de146-96d3-4a66-b99b-2e7512a78d3d" alt=""><figcaption></figcaption></figure>


# Banners


# Create Banner

Besides creating products LiSA also provides you with a feature that allows you to set up banners. Banners appear in the product carousel during the live and can be clickable, too.

### STEP 1: CREATE BANNER

Log into your LiSA account **navigate to Engagement in the main menu** on the left. Click on Engagement and select Banners

Click on the + icon in the top right corner and give your banner a name. Click Choose to create your banner

<figure><img src="https://1950192467-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fn5OaCYL2qREZ3vWQBAet%2Fuploads%2FJwKluBx7eD1IL8AAaaFR%2FSwo4WXjsr1keLCSrfkImE_bannercreate.webp?alt=media&amp;token=3875b717-a78d-4011-addc-727ae7aa13e0" alt=""><figcaption></figcaption></figure>

### STEP 2: CHANGE INFORMATION

You are now presented with a template that needs to be filled out as well as uploading images.

<figure><img src="https://1950192467-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fn5OaCYL2qREZ3vWQBAet%2Fuploads%2Fbh30ChojqFlpcisWwYnm%2Fs3PEJLZKfHE-IKYDqYhfk_screenshot-2023-02-16t093543411.webp?alt=media&amp;token=80e7b761-03c2-4116-840d-4eeed528c80f" alt=""><figcaption></figcaption></figure>

| Internal name    | This is only visible to you but not your viewers                                                           |
| ---------------- | ---------------------------------------------------------------------------------------------------------- |
| Action / URL     | Add a URL to your banner if you want to link to an entire collection or any other page in your environment |
| Link behaviour\* | Select what should happen if a viewer click on the banner                                                  |

**\*Link behaviour**

| Ignore               | Viewer clicks are ignored                                                                                                                                                             |
| -------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Copy to clipboard    | Copies the URL you added to the viewers clipboard who can then paste the link in their browser                                                                                        |
| Open in Modal        | Viewer open products without leaving the event                                                                                                                                        |
| New tab/window (PIP) | Opens the URL in a new tab/windowsIf you select this option you have an addition option and you can tick the box next to picture in picture as well to let the show follow the viewer |

### STEP 3: ADD IMAGES

Banners do have background images and appear on the product carousel during the show.&#x20;

| Banner Desktop  | 900x600 (recommended)       |
| --------------- | --------------------------- |
| Banner Mobile\* | 5 to 1  ratio e.g. 1000x200 |

{% hint style="danger" %}
We do crop the last 2/5 on the right though depending on the device.

Therefore place all content on the first 3/5 of the mobile image if possible and no content the last 2/5 parts that can be cropped.
{% endhint %}

### STEP 4:  PUBLISH BANNER

Once you have filled out the template you will have to set the banner to ready to be able to add it to the show. Scroll up to the gearwheel in the top right corner and select Set status to 'Publish'


# Analytics


# Shows

####


# Aggregated Shows Dashboard

Welcome to your new home screen filled with analytics data and details for all your shows and viewers activity.

Your Home screen has three main section. If you do not see Home in your Menu, you are missing the right permission to view.

<figure><img src="https://1950192467-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fn5OaCYL2qREZ3vWQBAet%2Fuploads%2FUiuPH05ml2U8Pgt42fO5%2Ft4RKy5VrDIkCaRWKObq1R_analyticsnewhomelatest%20(1).webp?alt=media&amp;token=92a56f1f-bc86-4f48-80ea-95fc9ad31bf9" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
Filters won't have an effect on your all-time-statistics
{% endhint %}

<figure><img src="https://1950192467-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fn5OaCYL2qREZ3vWQBAet%2Fuploads%2FKG2u3HDXn8pJOsz1kDPg%2FpAanejNBslSZ-oBwmxOT5_homescreentoptotal%20(1).webp?alt=media&amp;token=c9bedc05-a2f9-4def-b7ed-fc8ffbf1ca98" alt=""><figcaption></figcaption></figure>

| Metric                     | Description                                           |
| -------------------------- | ----------------------------------------------------- |
| Total shows duration       | SUM of all shows duration                             |
| Avg. show duration         | AVG of all shows duration                             |
| Total participants         | SUM participants per show all unique participants     |
| Avg. participants per show | AVG  of participants per show all unique participants |

### Filter

You home screen offers you flexibility by filtering your analytics for Live and Replay. You can select predefined data ranges or select a custom data range by clicking on the calendar icon. You can also display the data between daily, weekly and monthly, too!

<figure><img src="https://1950192467-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fn5OaCYL2qREZ3vWQBAet%2Fuploads%2FI2ZNmOKJoulV59Lb2aDt%2FMKWmn43EyejaTIko4TWR9_analyticsnewhomefilter%20(1).webp?alt=media&amp;token=e81b0e65-8d0a-4863-8ee2-373c62bb16ec" alt=""><figcaption></figcaption></figure>

### Graphs

Home screen, as do you individual show analytics will offer you insights into major KPI such as average viewing time, total viewers, chat messages and much more.

#### Viewing Data

"Your Shows Section" will display viewing data such as show duration, minutes watched, total viewers and more.

<figure><img src="https://1950192467-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fn5OaCYL2qREZ3vWQBAet%2Fuploads%2F9fz70B59m4pTzY6ySKEc%2FZvuEEjx8KgoJ2BlFnjZo2_homescreentopyourshows%20(1).webp?alt=media&amp;token=66fce6bf-6171-44c1-8e5b-88cb1f1fb395" alt=""><figcaption></figcaption></figure>

| Metric                     | Description                                     |
| -------------------------- | ----------------------------------------------- |
| Shows duration             | SUM of all shows duration                       |
| Minutes viewed             | SUM of all minutes viewed by all users          |
| Average minutes viewed     | AVG of all minutes viewed per users             |
| Viewers                    | SUM of all participants through all shows       |
| Visitors                   |                                                 |
| Average concurrent viewers | AVG of all concurrent viewers through all shows |
| Max concurrent viewers     | MAX of all concurrent viewers through all shows |

#### Minutes Viewed

**For Live shows**, minutes viewed are based on the visitor’s session duration between a show’s start and stop event.

**Example**: If a viewer opens the player two minutes before the show starts, waits until the countdown runs out and watches the live show for another 15 minutes before they close the player, their session duration is 17 minutes. But only 15 minutes (from show start to user session end) will be counted towards minutes viewed.

**For Replays,** minutes viewed are based on the actual media consumption — the duration between clicking the Play CTA and either clicking the Pause CTA or closing the player. Since not all customers have **Autoplay on Replay enabled**, the number of Visitors can be (significantly) higher than the number of Viewers displayed on the Home Screen Analytics.

#### Visitors Metrics

A user that is present on the player is considered a Visitor. Visitor metrics are based on a user’s session. Session are tracked for all life-cycle stages of a show:

Countdown; Live show; Post show (survey); Replay;

#### Viewers Metrics

*Viewer metrics are calculated differently for live and replay.*

For **replay** a viewer or viewing minutes is based on Media Consumption of a user. Media consumption is considered the time between start of a replay video until pause or the user closing the browser. Start of a Media Consumption on replays is triggered either automatically for shows that have autoplay enabled, or by the user actively pressing the play button. Media consumption ends when a user actively presses the pause button or closes the browser.

For **live** shows, viewer metrics are equal to visitor metrics, assuming that a show that is live will always have media playback (live stream via WebRTC).

#### Downlad Analytics

You can download each graph from your dashboard by clicking on the three dots and select download.

<figure><img src="https://1950192467-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fn5OaCYL2qREZ3vWQBAet%2Fuploads%2Fg14qUrmMOJ2hcaOQ04PN%2Fdw2qZm199fTC9fQd1c1SU_analyticsdownload%20(1).webp?alt=media&amp;token=c80e8fd8-8ebe-4eb4-be41-7965029d961f" alt=""><figcaption></figcaption></figure>

#### Chat Data

"Engagement Section" will display chat data and chat user behaviour. You can analyse reactions, chat messages and chat participation.

{% hint style="warning" %}
Engagement metrics: in the Home screen analytics, messages sent during Chat Lead Time will be counted. This can result in slight discrepancies between your Home screen reports and individual Show reports which discard it.
{% endhint %}

<figure><img src="https://1950192467-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fn5OaCYL2qREZ3vWQBAet%2Fuploads%2F4U76n9nZAb7LkjoGKmWN%2FVCSYa-MHDJzgHPHFpyPzH_homescreentopengagement%20(2).webp?alt=media&amp;token=7fca7f4a-e660-4c95-8c04-a83c393de2ef" alt=""><figcaption></figcaption></figure>

| Metric                  | Description                                |
| ----------------------- | ------------------------------------------ |
| Total chat participants | SUM of all participants of all shows       |
| Total chat messages     | SUM of all messages of all shows           |
| Total moderator message | SUM of all moderator messages of all shows |
| Total show reactions    | SUM of all reactions of all shows          |

### Product Data

**"Product Metrics Section"** will display product clicks and procut likes.

<figure><img src="https://1950192467-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fn5OaCYL2qREZ3vWQBAet%2Fuploads%2FTNeReanHPfJkVQNT4qGA%2FGPnai7_4VEwT7pGbG-OKU_homescreentopproductmetrics%20(1).webp?alt=media&amp;token=2ee64525-7290-47b4-a5dd-e4a2068bd98f" alt=""><figcaption></figcaption></figure>

| Metric                    | Description                                 |
| ------------------------- | ------------------------------------------- |
| Total carousel item views | SUM of all carousel item views of all shows |
| Total carousel item likes | SUM of all carousel item likes of all shows |

{% hint style="warning" %}
&#x20;In your Home screen analytics, all Products / Carousel Items clicks are counted. This can result in slight discrepancies between your Home screen reports and individual Show reports which only count the top 3.
{% endhint %}


# Single Show

LiSA provides you with analytics for any show that was published and was conducted.&#x20;

### STEP 1: LOCATE ANALYTICS

Navigate into your recently conducted show and click on it. You will see Analytics showing up in the shows submenu

<figure><img src="https://1950192467-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fn5OaCYL2qREZ3vWQBAet%2Fuploads%2FIFn0FIbB0dP3vzrPi4EX%2F8PU_ZDmbSAheXFpT5cqhJ_screenshot-2022-11-17t071622915%20(1).webp?alt=media&amp;token=aea853a9-375a-414b-a2e7-98baeeadf3d7" alt=""><figcaption></figcaption></figure>

#### Viewing

| Metric                     | Description                                                                                                                                                                                                                                                                                       |
| -------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Total event duration       | This gives the exact duration for the event form the moment the host presses start until he presses stop show                                                                                                                                                                                     |
| Total minutes viewed       | The combined total amount of video minutes consumed by all viewers. (example: if 100 People watched the event for an average of 5 minutes each, the total viewing minutes would equal 500 minutes)                                                                                                |
| Average minutes viewed     | Average time Viewers watched the live stream. To avoid skewing this metric only viewers are counted who watched for min 1 minute                                                                                                                                                                  |
| Average concurrent viewers | The average amount of simultaneous viewers throughout the duration of the event. (min 5 sec)                                                                                                                                                                                                      |
| Max concurrent viewers     | The highest number of viewers watching simultaneously throughout the event. This number account for all viewers on the stream for at least 5 seconds.                                                                                                                                             |
| Total Viewers              | Total unique viewers of the live stream(min 5 seconds on site) we do identify return visitors to avoid counting a viewer who leaves and comes back twice but depending on the browser/device settings of the viewer this cannot be always 100% accurate. Therfore it is a reliable estimate only. |

#### Engagement

| Metric                          | Description                                             |
| ------------------------------- | ------------------------------------------------------- |
| Total chat participants         | The total amount of chat participants during the event. |
| Total chat messages             | The total amount of chat messages during the event      |
| Total chat messages (moderator) | The total amount of chat messages by chat moderators    |
| Total show reactions            | The total amount of quick reactions during the show     |

#### Carousel

| Metric                     | Description                                 |
| -------------------------- | ------------------------------------------- |
| Total carousel item views  | Total amount of product clicks              |
| Total carousel item likes  | Total amount of product likes               |
| Most viewed carousel items | Top 3 of most clicked products (expandable) |
| Most liked carousel items  | Top 3 of most liked products (expandable)   |


# Stories


# Aggregated Stories Dashboard

Find all your Stories data in one place.&#x20;

### STEP  1: Find Analytics

Inside the main menu, click on Analytics and you'll access the Aggregated Stories Dashboard. By default it shows the last 7 days.&#x20;

<figure><img src="https://1950192467-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fn5OaCYL2qREZ3vWQBAet%2Fuploads%2FUSiqgoSOnOt6TU8p2Tip%2FScreenshot%20-%202024-07-01T115846.451.png?alt=media&amp;token=a3c5aa38-0a7c-43de-b9c5-a8fc00646d42" alt=""><figcaption></figcaption></figure>

### STEP 2: Filtering

Each graph is clickable and allows you to add filters such as date range, creators, categories.&#x20;

<figure><img src="https://1950192467-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fn5OaCYL2qREZ3vWQBAet%2Fuploads%2FJDrlbBOILME3kL4JQrm8%2Fanalytics_stories.gif?alt=media&amp;token=f7f7ed1b-a2f3-423a-b1bc-3199b002de82" alt=""><figcaption></figcaption></figure>


# Single Story

Once you have published your story LiSA is gathering analytics data which you can check and understand how well your stories are performing.

### STEP 1: LOCATE YOUR STORY

Navigate to Stories in the main menu and search for the story you'd like to view analytics data. Click on the three dots and select "view details"

<figure><img src="https://1950192467-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fn5OaCYL2qREZ3vWQBAet%2Fuploads%2FMFP62GGQmWPjlU2KYO8F%2F0W1h3ZLWNRUQ5zTTrJyh1_storiesanalytics.gif?alt=media&amp;token=2bd53c67-01ee-44cf-95c0-76d131acf6d9" alt=""><figcaption></figcaption></figure>

### STEP 2: VIEW DATA

You are presented immediately with analytics data. Below you will find information on each metric

<figure><img src="https://1950192467-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fn5OaCYL2qREZ3vWQBAet%2Fuploads%2Frkpr7URKUQgOgNzbUdIU%2Fhg0JPOZxHb-nWBtqnFqfW_storiesanalyticsdetails.gif?alt=media&amp;token=df870d46-495b-419b-9a47-d0058f5be39c" alt=""><figcaption></figcaption></figure>

### METRICS

#### Viewership

Impressions: number of impressions (Impressions are when the Story gets rendered on screen)&#x20;

Views: number of views (when 3 seconds progress per story has elapsed)

#### Navigation

Forward taps: number of times viewers tapped to the next stories&#x20;

Back taps: number of times viewers tapped back to see the previous story&#x20;

Next Story swipes: number of times viewers swiped to the next story&#x20;

Exit Story taps: number of times viewers exited stories&#x20;

Navigation: the sum of Back, Forward, Next Story, and Exited metrics within Stories

#### Commerce

Product carousel taps: number of times viewers have clicked on the Product carousel button&#x20;

Product card impressions: number of times cards have been rendered in the Carousel&#x20;

Product card taps: number of times viewers have tapped/clicked on the Product cards inside the Carousel

Product page views: number of times viewers have viewed a PDP opened from Product card: ⚠️ this only works with PiP and Modal mode;

{% hint style="info" %}
Please allow up to 5min for the data to refresh.

Video Stories should be at least 3 seconds long to avoid issues with bounce rate. Image stories are considered 15 sec content.
{% endhint %}

{% hint style="info" %}
Views metric has a 3 sec bounce rate which means views of any content which does not exceed 3 sec will not show in the aggregated story analytics data.
{% endhint %}


# Channels

Use LiSA's Channels option with our Shine solution to go live simoultaniously on your site.

Channels allow you to create dedicated endpoints with filter options to share your live shows, promote shows simoultaniously across your category pages or certain pdp in your shop!


# Create a channel

### STEP 1: CREATE CHANNEL

After your log into your account, navigate to Shows to open the dropdown menu and select Channels.

Click on the plus icon in the top right and give your channel a name. Click on create.

<figure><img src="https://1950192467-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fn5OaCYL2qREZ3vWQBAet%2Fuploads%2FP3I6MgebsoBvaTLOR3LT%2FFxdqqVdqL9gkZk2BvmUMj_newchannel.webp?alt=media&amp;token=95ceeb47-c290-409f-82d9-8b8309baadc8" alt=""><figcaption></figcaption></figure>


# Filter

ou can set filter inside the channel, that correspond to individual show filter which in return will only display these shows.

### STEP 1: SET UP FILTER

After you created your channel, navigate to the Filter section. You will notice three filters:

Host

Categories

Tags

{% hint style="info" %}
Each can be used individually or combined to filter/match shows on respective channels which provides huge flexibility.
{% endhint %}

In this example we set up the filter Host inside the channel itself.

Then we navigate into a show and assign the same host.

<figure><img src="https://1950192467-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fn5OaCYL2qREZ3vWQBAet%2Fuploads%2FMb6TXJWncMIwgeebxtvv%2F09iq5XJt5jqCfIsMFIbX3_newchannelfilter.webp?alt=media&amp;token=660894bf-672a-43ab-9cf1-86fc7437579e" alt=""><figcaption></figcaption></figure>


# Assets

If no show matches any filter for this channel, you can display a default background image instead of a countdown, live show or replay.

### STEP 1: UPLOAD IMAGE

Navigate into your channel and scroll down to the Assets section.

Drag and drop a background image.

<figure><img src="https://1950192467-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fn5OaCYL2qREZ3vWQBAet%2Fuploads%2FTCY0qZS3OxXP2Y41lGwF%2FopO8qKdb83bbrpwaW3Kox_newchannelassets.webp?alt=media&amp;token=14e9781e-ce0e-4089-9179-cf753d444438" alt=""><figcaption></figcaption></figure>


# Publish & Test

With the filter we set, we are now able to display these shows in different ways. Please contact us if you have trouble displaying the correct shows on your site.

### STEP 1: PUBLISH CHANNEL AND SHOW

Navigate into your channel and click on the gear wheel. Click on publish.

Do the same inside the show where you set the same filter(s).

<figure><img src="https://1950192467-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fn5OaCYL2qREZ3vWQBAet%2Fuploads%2F6wb7N5JOc0GRWweLQbEo%2FnasCysvfdS2vrSujvqFw3_newchannelpublish.webp?alt=media&amp;token=f195a2c7-3d6b-4443-89fe-d9b0ed0f1b1a" alt=""><figcaption></figcaption></figure>

### STEP 2: Test

Navigate into your channel and look for the URL: Copy and paste it into your browswer and you will see the respective show that matches your filter.


# Stickers

Stickers are a variety of interactive elements like polls, product drops or voucher codes. In the following guides you will learn how to use stickers in various forms.&#x20;


# Polls


# Set up Polls

Bring more interactivity to yor live shows now!! Let's explore how to set up your first poll.

### STEP 1: CREATE POLL

Navigate into your show and select the Stickers Menu. Click on the + icon and select Poll. Give it a name and click Create

<figure><img src="https://1950192467-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fn5OaCYL2qREZ3vWQBAet%2Fuploads%2FGMxGdhhrOeDkxCaFGoNO%2Fsticker_creation.gif?alt=media&amp;token=6ff3dd1d-05ea-4a47-831d-2d4f14883797" alt=""><figcaption></figcaption></figure>

&#x20;

### STEP 2: EDIT YOUR POLL

Once you created your poll you will see a window with 4 tabs at the top. General, Time, Poll, Settings

We are inside General.&#x20;

Badge: This is shown to the viewer on poll activation. It could be the question already, but it could also be an invitation to vote e. g. Poll available&#x20;

Card: will be shown after the click on the badge has happened. Here you will want to ask the question of your poll if you haven't done so yet.&#x20;

<figure><img src="https://1950192467-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fn5OaCYL2qREZ3vWQBAet%2Fuploads%2FmdeJ9Gpu6KgpNjjy6kae%2FScreenshot%20-%202025-07-25T084536.257.png?alt=media&amp;token=129fc8c9-9f96-4661-953b-6fbc5e08b8ce" alt=""><figcaption></figcaption></figure>

Thumbnail:

By default each LiSA sticker has a default icon which you can replace with a dedicated image yourself. Simply upload an image if you'd like to be changed. Start saving your changes.&#x20;

<figure><img src="https://1950192467-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fn5OaCYL2qREZ3vWQBAet%2Fuploads%2FiyJZlmHAyUW2VJKKe8cT%2FScreenshot%20-%202025-07-25T084828.443.png?alt=media&amp;token=0d91cf3b-63e7-4973-971c-4b7224ab3c44" alt=""><figcaption></figcaption></figure>

### STEP 3: Poll

Select the Poll tab at the top and start entering the choices. 2 at least. you can add more choices as well as decide on the text and results shown after a viewer has voted.&#x20;

<figure><img src="https://1950192467-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fn5OaCYL2qREZ3vWQBAet%2Fuploads%2FFWSFh3Amvn6yglSQaiyc%2FRecording%202025-07-25%20085911.gif?alt=media&amp;token=992aca74-fb21-4a69-8915-8988f5a8a6b4" alt=""><figcaption></figcaption></figure>

### STEP 4: Settings

Click onto the Settings tab, toggle the action button and select Modal from the drop down menu and save your changes.

<figure><img src="https://1950192467-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fn5OaCYL2qREZ3vWQBAet%2Fuploads%2F44MwMRHx2R5g1aqijaGK%2FScreenshot%20-%202025-07-25T090153.436.png?alt=media&amp;token=b30e4d2f-2874-496b-9e98-3436d404ef3e" alt=""><figcaption></figcaption></figure>

### TIMER (optional)

You can give your poll an activation timer as well as an expiry timer. If you decide to do so you will also have options to change text during the different timer phases. In this example we are setting a basic activation timer.&#x20;

Click on the Timer tab at the top.&#x20;

You will see a bunch of options you can activate e. g. Set activation timer

<figure><img src="https://1950192467-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fn5OaCYL2qREZ3vWQBAet%2Fuploads%2FLvBQKKasRHShxZvIUQTe%2FScreenshot%20-%202025-07-25T085139.061.png?alt=media&amp;token=c1f0f043-ce35-4e97-82ca-85c578d4dcfa" alt=""><figcaption></figcaption></figure>

Once you have clicked on it you can select the time for the countdown, before your sticker becomes clickable for example.&#x20;

Select an effect if you like. We recommend the confetti!

<figure><img src="https://1950192467-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fn5OaCYL2qREZ3vWQBAet%2Fuploads%2FcSYEugepxL43FnZGkCjZ%2FScreenshot%20-%202025-07-25T085428.180.png?alt=media&amp;token=847b926f-7caa-447e-8fc8-1a8611d411bf" alt=""><figcaption></figcaption></figure>


# Start / Stop Poll

Hosts and Chat Moderators can see live results of polls during any show.&#x20;

### STEP 1: NAVIGATE TO STICKERS MENU DURING LIVE

Go to your show and join as host or moderator. You will notice the Stickers menu in the top right corner. From here you can start and stop your poll.&#x20;

<figure><img src="https://1950192467-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fn5OaCYL2qREZ3vWQBAet%2Fuploads%2F46jOrO3Y41xrU25VU5g4%2Fstart_poll.gif?alt=media&amp;token=6bdc7888-3edb-402d-83e0-d4fd7eccea01" alt=""><figcaption></figcaption></figure>


# View Results (Live)

Hosts and Chat Moderators can see live results of polls during any show.&#x20;

### STEP 1: NAVIGATE TO STICKERS MENU DURING LIVE

Go to your show and join as host or moderator. You will notice the Stickers menu in the top right corner.

{% hint style="info" %}
Click on the refresh button if needed to update poll results
{% endhint %}

<figure><img src="https://1950192467-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fn5OaCYL2qREZ3vWQBAet%2Fuploads%2F2fzn6c1rEFwqMqqlBLs3%2Fresults_poll_live.gif?alt=media&amp;token=b2413823-d4f0-4be8-8b5d-5f86a013ac5b" alt=""><figcaption></figcaption></figure>


# Product

Let's learn how to create a new product sticker.

## STEP 1: Navigate to Stickers inside a show

Enter  your show and navigate to Stickers inside the shows submenu

Click on the **+ icon** and select the type of sticker and give it a name. Click on Create.

<figure><img src="https://1950192467-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fn5OaCYL2qREZ3vWQBAet%2Fuploads%2FWLNiG9HcsQ0I5vN6ie06%2FScreenshot%20-%202025-07-25T092551.258.png?alt=media&amp;token=4bae8d3c-888e-46f5-8ccf-567bec026d25" alt=""><figcaption></figcaption></figure>

## STEP 2: Navigate to Stickers inside a show


# Set up Product Sticker

Bring more interactivity to yor live shows now!! Let's explore how to set up your first poll.

### STEP 1: CREATE Product Sticker

Navigate into your show and select the Stickers Menu. Click on the + icon and select Product. Give it a name and click Create

<figure><img src="https://1950192467-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fn5OaCYL2qREZ3vWQBAet%2Fuploads%2FozTKBK8NMsix1rVITCUV%2FScreenshot%20-%202025-07-25T092551.258.png?alt=media&amp;token=a3e6b11e-3f71-493b-8d47-35687c89b9fb" alt=""><figcaption></figcaption></figure>

&#x20;

### STEP 2: EDIT YOUR Product Sticker

Once you created your sticker you will see a window with 4 tabs at the top. General, Time, Poll, Settings

We are inside General.&#x20;

Badge: This is shown to the viewer on sticker activation. It can be e. g. a teaser of a product drop.&#x20;

Card: will be shown after the click on the badge has happened.&#x20;

<figure><img src="https://1950192467-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fn5OaCYL2qREZ3vWQBAet%2Fuploads%2FhNsuX8x4IB7H0tc3dp8P%2FScreenshot%20-%202025-07-25T092903.115.png?alt=media&amp;token=ab5f6bcb-0acd-448e-9cbc-3b281f83b76d" alt=""><figcaption></figcaption></figure>

Thumbnail:

By default each LiSA sticker has a default icon which you can replace with a dedicated image yourself. Simply upload an image if you'd like to be changed. Start saving your changes.&#x20;

<figure><img src="https://1950192467-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fn5OaCYL2qREZ3vWQBAet%2Fuploads%2FiyJZlmHAyUW2VJKKe8cT%2FScreenshot%20-%202025-07-25T084828.443.png?alt=media&amp;token=0d91cf3b-63e7-4973-971c-4b7224ab3c44" alt=""><figcaption></figcaption></figure>

### STEP 3: Product

Select the Product tab at the top.&#x20;

Select "Open product details" as the CTA behaviour and then add the product.

<figure><img src="https://1950192467-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fn5OaCYL2qREZ3vWQBAet%2Fuploads%2FwN6MqmhYxalab1bXYsFP%2FRecording%202025-07-25%20093026.gif?alt=media&amp;token=6bf88f77-18d7-4966-bcec-cd2aa3f4e25b" alt=""><figcaption></figcaption></figure>

### STEP 4: Settings

Click onto the Settings tab, toggle the action button and select Modal from the drop down menu and save your changes.

<figure><img src="https://1950192467-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fn5OaCYL2qREZ3vWQBAet%2Fuploads%2F44MwMRHx2R5g1aqijaGK%2FScreenshot%20-%202025-07-25T090153.436.png?alt=media&amp;token=b30e4d2f-2874-496b-9e98-3436d404ef3e" alt=""><figcaption></figcaption></figure>

### TIMER (optional)

You can give your poll an activation timer as well as an expiry timer. If you decide to do so you will also have options to change text during the different timer phases. In this example we are setting a basic activation timer.&#x20;

Click on the Timer tab at the top.&#x20;

You will see a bunch of options you can activate e. g. Set activation timer

<figure><img src="https://1950192467-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fn5OaCYL2qREZ3vWQBAet%2Fuploads%2FLvBQKKasRHShxZvIUQTe%2FScreenshot%20-%202025-07-25T085139.061.png?alt=media&amp;token=c1f0f043-ce35-4e97-82ca-85c578d4dcfa" alt=""><figcaption></figcaption></figure>

Once you have clicked on it you can select the time for the countdown, before your sticker becomes clickable for example.&#x20;

Select an effect if you like. We recommend the confetti!

<figure><img src="https://1950192467-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fn5OaCYL2qREZ3vWQBAet%2Fuploads%2FcSYEugepxL43FnZGkCjZ%2FScreenshot%20-%202025-07-25T085428.180.png?alt=media&amp;token=847b926f-7caa-447e-8fc8-1a8611d411bf" alt=""><figcaption></figcaption></figure>


# Sticker Voucher

Currently only managable via show

LiSA enables you to use various sticker types for multiple purposes like a countdown timer or voucher codes

## STEP 1: Navigate to Stickers and create new

Click onto your show and navigate to Stickers inside the shows submenu

Click on the + icon and give your sticker a name. Select Product or Voucher and click Create

If the create button is greyed out, make sure you have selected the type of sticker.&#x20;

<figure><img src="https://1950192467-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fn5OaCYL2qREZ3vWQBAet%2Fuploads%2FwQylNGTYx69HUnV7Fmqu%2FScreenshot%20-%202025-03-17T124845.966.png?alt=media&amp;token=a92bc8da-cb72-4a4b-b291-089dc7c4f87e" alt=""><figcaption></figcaption></figure>

## STEP 2: General Settings

**Badge**: (Displayed on Sticker)

Title: Enter a badge title&#x20;

Text: Enter a badge text

**Card:** (additional overlay)

Title: Enter a card title

Text: Enter a card text

**Thumbnail:** Upload your thumbnail here 200x200 recommended

## STEP 3: Timer Settings

Set activation timer

* Set up the time duration for this sticker. Decide how long it should count down until your voucher becomes available
* Effect: Select what should happen once the timer expires

Alternative sticker **badge text before activation** starts

* Enter alternative title and text as well as respective translations

Alternative sticker **badge text during activation** timer

* Enter alternative title and text as well as respective translations

Alternative sticker **card texts during activation** timer

* Enter alternative title and text as well as respective translations

Set expiry timer

* Set the timer and decide for how long the voucher code should show after the initial timer has run out

Alternative sticker **badge text upon sticker expiry**

* Enter alternative title and text as well as respective translations

Alternative sticker **card texts after sticker expired**

* Enter alternative title and text as well as respective translations

## STEP 4: Voucher

Voucher Code

* enter the voucher code&#x20;

Discount value

* enter the discount value

Discount type

* select fixed or percentage discount type

Expires at

* set an expiry date & time for your voucher

Discount value label

* enter the label text for your voucher

## STEP 5: Settings

Activate **Action** to enable a URL on click behaviour

URL: enter the full URL&#x20;

Click beahviour: Select what should happen on click


# Set up Voucher Sticker

Bring more interactivity to yor live shows now!! Let's explore how to set up your first poll.

### STEP 1: CREATE Voucher Sticker

Navigate into your show and select the Stickers Menu. Click on the + icon and select Voucher. Give it a name and click Create

<figure><img src="https://1950192467-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fn5OaCYL2qREZ3vWQBAet%2Fuploads%2Fq2rysqOBBnisVCJXVfJr%2FScreenshot%20-%202025-07-25T094114.569.png?alt=media&amp;token=fc0c4444-7d16-4172-8ab6-7df50dc7aeae" alt=""><figcaption></figcaption></figure>

&#x20;

### STEP 2: EDIT YOUR Voucher Sticker

Once you created your sticker you will see a window with 4 tabs at the top. General, Time, Poll, Settings

We are inside General.&#x20;

Badge: This is shown to the viewer on sticker activation. It can be e. g. a teaser of a Voucher coming.&#x20;

Card: will be shown after the click on the badge has happened.&#x20;

<figure><img src="https://1950192467-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fn5OaCYL2qREZ3vWQBAet%2Fuploads%2FhNsuX8x4IB7H0tc3dp8P%2FScreenshot%20-%202025-07-25T092903.115.png?alt=media&amp;token=ab5f6bcb-0acd-448e-9cbc-3b281f83b76d" alt=""><figcaption></figcaption></figure>

Thumbnail:

By default each LiSA sticker has a default icon which you can replace with a dedicated image yourself. Simply upload an image if you'd like to be changed. Start saving your changes.&#x20;

<figure><img src="https://1950192467-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fn5OaCYL2qREZ3vWQBAet%2Fuploads%2FiyJZlmHAyUW2VJKKe8cT%2FScreenshot%20-%202025-07-25T084828.443.png?alt=media&amp;token=0d91cf3b-63e7-4973-971c-4b7224ab3c44" alt=""><figcaption></figcaption></figure>

### STEP 3: Voucher

Select the Voucher tab at the top.&#x20;

Enter the Voucher Code.&#x20;

Add the discount value and decide the type ( percentage of fixed value)

Add more details as per your need e. g. expiration of the code

<figure><img src="https://1950192467-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fn5OaCYL2qREZ3vWQBAet%2Fuploads%2Ff2aa8fV6Qz09yia8LT1r%2FScreenshot%20-%202025-07-25T094220.983.png?alt=media&amp;token=b7a98527-5c88-4b4a-9052-ab70883c812f" alt=""><figcaption></figcaption></figure>

### STEP 4: Settings

Click onto the Settings tab, toggle the action button and select Modal from the drop down menu and save your changes.

<figure><img src="https://1950192467-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fn5OaCYL2qREZ3vWQBAet%2Fuploads%2F44MwMRHx2R5g1aqijaGK%2FScreenshot%20-%202025-07-25T090153.436.png?alt=media&amp;token=b30e4d2f-2874-496b-9e98-3436d404ef3e" alt=""><figcaption></figcaption></figure>

### TIMER (optional)

You can give your poll an activation timer as well as an expiry timer. If you decide to do so you will also have options to change text during the different timer phases. In this example we are setting a basic activation timer.&#x20;

Click on the Timer tab at the top.&#x20;

You will see a bunch of options you can activate e. g. Set activation timer

<figure><img src="https://1950192467-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fn5OaCYL2qREZ3vWQBAet%2Fuploads%2FLvBQKKasRHShxZvIUQTe%2FScreenshot%20-%202025-07-25T085139.061.png?alt=media&amp;token=c1f0f043-ce35-4e97-82ca-85c578d4dcfa" alt=""><figcaption></figcaption></figure>

Once you have clicked on it you can select the time for the countdown, before your sticker becomes clickable for example.&#x20;

Select an effect if you like. We recommend the confetti!

<figure><img src="https://1950192467-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fn5OaCYL2qREZ3vWQBAet%2Fuploads%2FcSYEugepxL43FnZGkCjZ%2FScreenshot%20-%202025-07-25T085428.180.png?alt=media&amp;token=847b926f-7caa-447e-8fc8-1a8611d411bf" alt=""><figcaption></figcaption></figure>


# Start / Stop sticker

## STEP 1:  Join the Show as Moderator or Host

Navigate to your show and join the show as moderator or host.

<figure><img src="https://1950192467-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fn5OaCYL2qREZ3vWQBAet%2Fuploads%2FqlvbYSzmfKfLpZfapM8A%2FScreenshot%20-%202025-03-19T094624.930.png?alt=media&amp;token=3cd8aa62-8022-4e0a-bc6f-ecc70fa625cc" alt=""><figcaption></figcaption></figure>

## STEP 2: Activate Sticker

Click on Stickers in the top right corner and open the control Panel. Click on **PUBLISH STICKER** to activate the sticker and make it visible

<figure><img src="https://1950192467-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fn5OaCYL2qREZ3vWQBAet%2Fuploads%2FuUZo59vtHgbLOUCXKyi0%2FScreenshot%20-%202025-03-19T094813.117.png?alt=media&amp;token=4562f1ea-54f9-4ea6-bdb1-8bb915f0c165" alt=""><figcaption></figcaption></figure>

## STEP 3: Start Timer

When you are ready to launch the timer, click on **START TIMER** and the countdown will run

<figure><img src="https://1950192467-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fn5OaCYL2qREZ3vWQBAet%2Fuploads%2F5OBc0QuVLa5EwV8Ars12%2FScreenshot%20-%202025-03-19T094854.939.png?alt=media&amp;token=ee522bf6-d614-4fbd-8e46-72a2c81795d2" alt=""><figcaption></figcaption></figure>

## STEP 4: Deactivate Sticker

Once you want to hide the sticker again you can click on **UNPUBLISH** to remove it from the live show.&#x20;

<figure><img src="https://1950192467-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fn5OaCYL2qREZ3vWQBAet%2Fuploads%2FbID2wpPmleL6nY4tSRJy%2FScreenshot%20-%202025-03-19T095047.952.png?alt=media&amp;token=95c4748c-d602-4896-92de-a02572d21a39" alt=""><figcaption></figcaption></figure>


# Notifications

LiSA offers you flexibility to link your CRM and create Notifications such as Sales Notifications


# Sales Notification

Navigtae to Settings -> Notifications

### STEP 1: Create New

Click on **Create New** in the top right corner and you'll see a template which we need to fill out.&#x20;

<figure><img src="https://1950192467-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fn5OaCYL2qREZ3vWQBAet%2Fuploads%2FicUHLMD0urbfBA6QRjsn%2Fnotifications_created.gif?alt=media&amp;token=b2376598-9122-4df2-8ba9-caca66668200" alt=""><figcaption></figcaption></figure>

### STEP 2: New notification

In the following template you'll need to set up details regarding this notification.&#x20;

Fill out Name, Type and Event Trigger based on the Notification you are building.&#x20;

<figure><img src="https://1950192467-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fn5OaCYL2qREZ3vWQBAet%2Fuploads%2Ftix3HK55kkyQoXPPWZET%2FScreenshot%20-%202024-12-12T102715.074.png?alt=media&amp;token=320bc3da-6aff-4a0a-99c5-754dd0b649de" alt=""><figcaption></figcaption></figure>

### STEP 3:  Customized Message

You can customize the displayed message when the notification shows.

Example: Someone just purchased {Product\_Name}

Use Text Blocks and Paramter Blocks to customize the message.&#x20;

<figure><img src="https://1950192467-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fn5OaCYL2qREZ3vWQBAet%2Fuploads%2FELWjmrgJ4n9W9NGFdy0l%2Fnotifications_message.gif?alt=media&amp;token=4345b512-0af7-49b6-8790-54c9f9ce1172" alt=""><figcaption></figcaption></figure>

### STEP 4 Optional: Thumbnail

Add a thumbnail image that appears instead of the product image.


# Widgets

LiSA offers you flexibility by building your own shoppable widgets!


# Stories

Navigate to Settings -> Widgets

### STEP 1: Create Widget

Click on the create new button in the top right corner.

Fill out the information:

Name: Name your widget

Type: Select the widget type

Group by: Pre-select your grouping (this can be changed later)

<figure><img src="https://1950192467-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fn5OaCYL2qREZ3vWQBAet%2Fuploads%2FJBtK4S9ok2f76YagRPI8%2Fwidget_create.gif?alt=media&amp;token=a42cd8a5-da0c-4728-92c7-08bdd5918a40" alt=""><figcaption></figcaption></figure>

### STEP 2: Advanced Settings

Depending on your Stories set up you could now click **Save and Publish** in the top right corner to display any published Story linked to a channel

#### Advanced Settings

Filter further down into your stories and pin point which stories should be shown in your widgets:

**Filter:** Select to further filter by either Channel, Category or Creator depending on your Group by setting

**Published After:** Select a date and time for stories to be included

**Published Withing:** Select a date and time range for stories to be included

<figure><img src="https://1950192467-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fn5OaCYL2qREZ3vWQBAet%2Fuploads%2Fatzc1M0IAfJ2Q5D35tu6%2FScreenshot%20-%202024-12-12T100913.517.png?alt=media&amp;token=f5e23e4e-f5c7-42ce-8c0c-46b66952b773" alt=""><figcaption></figcaption></figure>

### STEP 3: Copy Code & Embed

At any time you can copy the code and embed it on your site. Click on the copy button or highlight the code and copy it. Paste the code onto your site in any place.&#x20;

{% hint style="warning" %}
Make sure you have Published the widget!
{% endhint %}

<figure><img src="https://1950192467-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fn5OaCYL2qREZ3vWQBAet%2Fuploads%2FpZOwJJSHjc7uz8aEDt2Y%2FScreenshot%20-%202024-12-12T101449.606.png?alt=media&amp;token=7792533f-2099-4209-840e-4965b726c78f" alt=""><figcaption></figcaption></figure>


# Customization

coming soon


# Theme Settings


# Shows

Shows can be customized on an individual level in regards to:


# Stories

coming soon


# General


# Updates & Tutorials




---

[Next Page](/llms-full.txt/1)