> For the complete documentation index, see [llms.txt](https://docs.selvette.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.selvette.com/custom-sites/install-the-widget.md).

# Install the storefront widget

For a non-Shopify store, add one Selvette script to the template that renders all product pages.

## Copy your account-specific snippet

1. In Studio, open **Widget → Install**.
2. Select **Copy embed snippet**.
3. Paste it once into the shared product-page template—not into every individual product.
4. Replace the example product reference and image URL with your platform's dynamic product values.
5. Add your site's origin under **Allowed origins** and save.

The copied snippet follows this structure:

```html
<script
  src="YOUR_WIDGET_SCRIPT_URL"
  data-tryon-key="YOUR_PUBLISHABLE_KEY"
  data-api="YOUR_API_URL"
  data-tryon-product="custom:your-product-slug"
  data-tryon-product-image="https://your-site.com/product.jpg"
  data-tryon-placement="hidden"
></script>
<button data-tryon-trigger>Try it on</button>
```

Always use the values shown in your own Studio. Do not copy keys or service URLs from another merchant's installation.

## Choose the launcher placement

* Remove `data-tryon-placement="hidden"` and the custom button to use Selvette's inline launcher.
* Use `data-tryon-placement="pill"` for a floating bottom-right launcher.
* Keep `hidden` when your site supplies the element marked with `data-tryon-trigger`.

## Platform notes

* **Webflow:** place an Embed element on the CMS product template and insert the Slug and main-image fields as dynamic values.
* **WooCommerce:** render the script from the product template or a child-theme hook using the product slug and featured image.
* **React or Next.js:** add the script when the product page mounts and remove it during cleanup.

{% hint style="warning" %}
The widget mounts once per full page load. On a client-side routed storefront, a full navigation or reload must occur when moving to another product unless your integration remounts the page.
{% endhint %}

Next: [Set product references and images](/custom-sites/product-references.md)


---

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

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

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

```
GET https://docs.selvette.com/custom-sites/install-the-widget.md?ask=<question>&goal=<endgoal>
```

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

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

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