Add an AI ring builder to a WordPress or WooCommerce site

There is no ShowroomPro plugin to install. The block editor's Custom HTML block is enough for a ring builder on one page.

#1. Add a Custom HTML block

Edit the page where the ring builder should appear (or create a "Design Your Ring" page).
Click +, search for Custom HTML and add the block.
Paste the snippet and click Update (or Publish).

html

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

For a popup button instead:

html

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

Page builders work the same way: use the HTML widget in Elementor, the Code module in Divi, or the Raw HTML element in WPBakery.

#2. Optional: floating button on every page

Paste the floating snippet into your site's footer code. The easiest way is a header and footer code plugin (for example WPCode): add a new snippet, choose the Site Wide Footer location, paste and save.

html

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

Block themes can also use Appearance → Editor → Patterns → Footer with a Custom HTML block.

#3. Check it on your site

Open the page while logged out (some caching plugins serve a different version to visitors). If you use a caching or optimization plugin that delays or combines JavaScript, exclude https://www.showroompro.ai/embed.js from it.

#WordPress.com

WordPress.com sites only allow <script> tags on plans that support plugins. On lower plans the script is removed when you save. Use the iframe fallback there:

html

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

#Notes

WooCommerce: the ring builder captures leads for the jeweler to quote; it doesn't add products to the WooCommerce cart.
Security plugins that strip scripts from post content: use the footer-code method for the script, and keep only the <div data-showroompro-ring-builder="YOUR_TOKEN"></div> container in the page.