# Add an AI ring builder to a plain HTML website

Works for any hand-written or static site (including static site generators such as Hugo, Jekyll, Eleventy and Astro).

## 1. Get your token

[Create a sandbox](https://www.showroompro.ai/docs/quickstart.md) and use its `quizToken`, or copy the snippet from **Settings → Embed** in the ShowroomPro dashboard.

## 2. Paste the snippet

For a ring builder inside a page, paste this where it should appear, for example in a `design-your-ring.html` page:

```html
<main>
  <h1>Design your engagement ring</h1>
  <div data-showroompro-ring-builder="YOUR_TOKEN"></div>
<script src="https://www.showroompro.ai/embed.js" async></script>
</main>
```

For a corner button on every page, paste this just before `</body>` in every page or in your shared layout/footer template:

```html
<script src="https://www.showroompro.ai/embed.js" data-token="YOUR_TOKEN" data-mode="floating" async></script>
</body>
```

For a button in the page that opens a popup:

```html
<div data-showroompro-ring-builder="YOUR_TOKEN" data-mode="popup"></div>
<script src="https://www.showroompro.ai/embed.js" async></script>
```

## 3. Publish and check

Upload the page and open it on your real domain. The ring builder loads immediately. The dashboard shows **Live on: yoursite.com** once it has been seen.

## Notes

- Load `embed.js` once per page even if you use several containers.
- Using your own button instead? See [your own button or link](https://www.showroompro.ai/docs/widget.md#your-own-button-or-link).
- If your site sets a Content Security Policy, allow `https://www.showroompro.ai` (see [widget reference](https://www.showroompro.ai/docs/widget.md#content-security-policy)).

---

Source: https://www.showroompro.ai/docs/install/html · Last updated 2026-10-16 · All docs: https://www.showroompro.ai/llms.txt