Add an AI ring builder to a Wix website

Wix runs embedded code inside its own fixed-size frame, so the setup is a little different from other platforms. Use the iframe snippet in an Embed HTML element for a ring builder on a page, and Custom Code for a floating button.

#1. Add an Embed HTML element

1. In the Wix Editor, open the page for the ring builder (or add a "Design Your Ring" page).
2. Click Add Elements (+) → Embed Code → Embed HTML.
3. Click Enter Code, choose Code, paste the snippet below and click Update.

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

#2. Size the element

Wix doesn't let embedded code resize its own box. Drag the element to the full width of the section and set its height to about 800 px on desktop. Check the mobile view in the editor and give it the same height there.

#3. Optional: floating button on every page

1. In your site's dashboard, go to Settings → Custom Code (under Development & integrations).
2. Click + Add Custom Code, paste the snippet, choose All pages, place it in Body - end, and apply.

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

Wix only runs Custom Code on published sites with a connected domain, which needs a premium plan.

#4. Publish and check

Click Publish, then open the live site. The Embed HTML element works on any plan. The dashboard's Live on status appears for the floating button; the iframe element isn't counted for install detection.

#Notes

• Don't paste the inline <div> + <script> snippet into an Embed HTML element. It runs inside Wix's frame, so it can't resize and the popup is confined to that frame. Use the iframe snippet above.
• Linking a Wix button to the ring builder: link it to the page that holds the Embed HTML element, or use the floating button.