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)

// 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:

// 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:

// 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.
• 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.