# How to embed a ring builder on any website

Embedding ShowroomPro takes one snippet. It works on hand-coded sites, React and Next.js apps, and every major website builder.

## 1. Get a token

Jewelers: sign up and copy the snippet from **Settings → Embed** in the dashboard. Developers and AI agents: [create a sandbox](https://www.showroompro.ai/docs/quickstart.md) with one API request and no account. The jeweler claims it later.

## 2. Paste the snippet

Paste it where the ring builder should appear. It fills the width of its container and adjusts its height to the quiz:

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

Or add a floating "Design your ring" button to every page by pasting this before `</body>`:

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

Platform-specific steps: [Shopify](https://www.showroompro.ai/docs/install/shopify.md) · [WordPress](https://www.showroompro.ai/docs/install/wordpress.md) · [Wix](https://www.showroompro.ai/docs/install/wix.md) · [Squarespace](https://www.showroompro.ai/docs/install/squarespace.md) · [Webflow](https://www.showroompro.ai/docs/install/webflow.md) · [React](https://www.showroompro.ai/docs/install/react.md) · [Next.js](https://www.showroompro.ai/docs/install/nextjs.md) · [HTML](https://www.showroompro.ai/docs/install/html.md)

## 3. Confirm it is live

Open the page on your real domain. The ShowroomPro dashboard shows **Live on: yoursite.com**, and new designs appear as leads.

## Embed options

| Option | Use it for |
| --- | --- |
| Inline | A dedicated "Design your ring" page. Recommended. |
| Floating button | A ring builder one click away on every page. |
| Popup button | A button inside a product or landing page. |
| Iframe | Site builders that remove scripts. Fixed height. |

Every option, attribute and event is in the [widget reference](https://www.showroompro.ai/docs/widget.md).

---

Source: https://www.showroompro.ai/embed-ring-builder · Last updated 2026-10-16 · All docs: https://www.showroompro.ai/llms.txt