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


---

# Agent Instructions: Querying This Documentation

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

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

```
GET https://docs.hello-lisa.com/widgets/widgets/embed-the-lisa-snippets-widget.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

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