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 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:

<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:

<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:

<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.
• If your site sets a Content Security Policy, allow https://www.showroompro.ai (see widget reference).