# 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**.

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

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**.

```html
<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).

---

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