Welcome to LiSA Widgets

Embed the LiSA Snippets Widget

4min

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 <script> tag either inside the <head> 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>
<script
  async
  defer
  data-lisa-widget="snippets"
  src="https://widget.lisa-cdn.net/snippets/{clientId}"
></script>
﻿
Necessary adjustments:
Please ensure that you replace {clientId} with your unique client identifier, which was provided to you during the onboarding process.
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.
JS
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);
});
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);
});
﻿
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.
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.
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.
﻿

Updated 25 Mar 2024

Did this page help you?

LiSA Snippets Widget Intro