# 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

1. Edit the page where the ring builder should appear (or create a "Design Your Ring" page).
2. Click **+**, search for **Custom HTML** and add the block.
3. 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.

---

Source: https://www.showroompro.ai/docs/install/wordpress · Last updated 2026-10-16 · All docs: https://www.showroompro.ai/llms.txt