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.

PlatformInline on a pageFloating button on every pageGuide
Plain HTMLPaste in the page bodyPaste before </body> on every pageHTML
React (Vite, CRA)Component that renders the containerScript in index.htmlReact
Next.jsContainer + next/scriptnext/script in the root layoutNext.js
ShopifyCustom Liquid sectiontheme.liquid above </body>Shopify
WordPressCustom HTML blockHeader/footer code plugin or theme footerWordPress
WixEmbed HTML element (iframe, fixed height)Custom Code in SettingsWix
SquarespaceCode BlockCode Injection → FooterSquarespace
WebflowCode Embed elementSite settings → Custom code → FooterWebflow

Don't have a token yet? Create a sandbox 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.

#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.