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 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:
<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>:
<script src="https://www.showroompro.ai/embed.js" data-token="YOUR_TOKEN" data-mode="floating" async></script>Platform-specific steps: Shopify · WordPress · Wix · Squarespace · Webflow · React · Next.js · HTML
#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.