Add an AI ring builder to a Webflow site

#1. Add a Code Embed element

For an inline ring builder or a popup button on one page:

1. In the Designer, open the Add panel (+) and drag a Code Embed element where the ring builder should appear.
2. Paste the snippet and click Save & Close.

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

For a popup button instead:

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

Give the Code Embed's parent a width (for example 100%) and no fixed height. The ring builder sets its own height.

#2. Optional: floating button on every page

1. Go to Site settings → Custom code.
2. Paste the snippet into Footer code and click Save changes.

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

#3. Publish and check

Click Publish and open the published site. Scripts don't run inside the Designer canvas, so check the live page.

#Notes

• Site-wide custom code (step 2) needs a paid Webflow site plan. If your plan doesn't include it, put the floating snippet in a Code Embed element on each page instead.
• To open the ring builder from a Webflow button, set the button's link to #showroompro-ring-builder and make sure embed.js loads on that page (any snippet above).