# Add an AI ring builder to a Next.js site

The ring builder is a plain `<div>` plus `embed.js`. The container can be rendered by a server component. Load the script with `next/script` and `strategy="afterInteractive"` so it runs after hydration.

## 1. Add the ring builder to a page (App Router)

```tsx
// app/design-your-ring/page.tsx
import Script from "next/script";

export const metadata = { title: "Design your engagement ring" };

export default function DesignYourRingPage() {
  return (
    <main>
      <h1>Design your engagement ring</h1>
      <div data-showroompro-ring-builder="YOUR_TOKEN" />
      <Script src="https://www.showroompro.ai/embed.js" strategy="afterInteractive" />
    </main>
  );
}
```

`next/script` loads the script once per app, even across client-side navigation. `embed.js` watches the page and mounts containers that appear later, so navigating to this page from another route works.

For a popup button instead, add `data-mode="popup"` to the `<div>`. For wedding bands, add `data-quiz="wedding-band"`.

## 2. Optional: floating button on every page

Add the script with `data-token` and `data-mode` to the root layout. `next/script` passes `data-*` attributes through to the script tag:

```tsx
// app/layout.tsx
import Script from "next/script";

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        {children}
        <Script
          src="https://www.showroompro.ai/embed.js"
          data-token="YOUR_TOKEN"
          data-mode="floating"
          strategy="afterInteractive"
        />
      </body>
    </html>
  );
}
```

## 3. Pages Router

Same idea. Put the container in the page and the `<Script>` in the page or in `pages/_app.tsx`:

```tsx
// pages/design-your-ring.tsx
import Script from "next/script";

export default function DesignYourRing() {
  return (
    <>
      <div data-showroompro-ring-builder="YOUR_TOKEN" />
      <Script src="https://www.showroompro.ai/embed.js" strategy="afterInteractive" />
    </>
  );
}
```

## 4. Deploy and check

Deploy to your real domain (Vercel preview URLs work, but use the production domain to see **Live on** in the dashboard).

## Notes

- Don't use `strategy="beforeInteractive"`. The widget would change the DOM before React hydrates.
- Receiving webhooks in Next.js: see the [App Router example](https://www.showroompro.ai/docs/webhooks.md#nextjs-app-router).
- If you set a Content Security Policy in `next.config.js` or middleware, allow `https://www.showroompro.ai` in `script-src`, `frame-src` and `connect-src`.

---

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