# Install the ring builder on any platform

Every install is the same two pieces: a container where the ring builder should appear, and the `embed.js` script. Pick your platform for the exact paste location.

| Platform | Inline on a page | Floating button on every page | Guide |
| --- | --- | --- | --- |
| Plain HTML | Paste in the page body | Paste before `</body>` on every page | [HTML](https://www.showroompro.ai/docs/install/html.md) |
| React (Vite, CRA) | Component that renders the container | Script in `index.html` | [React](https://www.showroompro.ai/docs/install/react.md) |
| Next.js | Container + `next/script` | `next/script` in the root layout | [Next.js](https://www.showroompro.ai/docs/install/nextjs.md) |
| Shopify | Custom Liquid section | `theme.liquid` above `</body>` | [Shopify](https://www.showroompro.ai/docs/install/shopify.md) |
| WordPress | Custom HTML block | Header/footer code plugin or theme footer | [WordPress](https://www.showroompro.ai/docs/install/wordpress.md) |
| Wix | Embed HTML element (iframe, fixed height) | Custom Code in Settings | [Wix](https://www.showroompro.ai/docs/install/wix.md) |
| Squarespace | Code Block | Code Injection → Footer | [Squarespace](https://www.showroompro.ai/docs/install/squarespace.md) |
| Webflow | Code Embed element | Site settings → Custom code → Footer | [Webflow](https://www.showroompro.ai/docs/install/webflow.md) |

Don't have a token yet? [Create a sandbox](https://www.showroompro.ai/docs/quickstart.md) in one request, or copy the snippet from **Settings → Embed** in the ShowroomPro dashboard.

## The three snippets

Inline (recommended for a dedicated "Design your ring" page):

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

Floating button (site-wide):

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

Popup button (placed in the page):

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

If the platform strips `<script>` tags, use the iframe fallback. It has a fixed height:

```html
<iframe src="https://www.showroompro.ai/embed/quiz?d=YOUR_TOKEN" width="100%" height="800" frameborder="0" style="border:none;"></iframe>
```

All options are in the [widget reference](https://www.showroompro.ai/docs/widget.md).

## After installing

Open the page on the live domain. Within a minute the dashboard's Embed settings show **Live on: yoursite.com**, and for a sandbox `GET /api/v1/sandboxes/status/YOUR_TOKEN` returns `installDetected: true`. Preview and localhost URLs don't count.

---

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