React / Next.js

Load the widget safely in React or Next.js applications.

What you will learn

How to load the widget in Next.js App Router
Where to place the script in React SPAs
How to avoid common hydration issues

Next.js App Router example

Use the Next.js Script component in app/layout.tsx so the widget loads after hydration.

Code sampletsx

import Script from 'next/script';

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html suppressHydrationWarning>
      <body>
        {children}
        <Script
          async
          src="https://YOUR-APP-URL/api/widget"
          data-api="https://YOUR-APP-URL"
          strategy="afterInteractive"
        />
      </body>
    </html>
  );
}

React SPA example

Place the script tag in public/index.html just before </body>, or inject it in a top-level client component that runs once.

Avoid common issues

Do not load the script inside components that re-render frequently.
Use afterInteractive in Next.js to avoid blocking rendering.
Confirm your production domain matches the business profile.

Expected outcome

The widget loads once per page and stays stable.
No hydration warnings or duplicate chat bubbles.

Common issues

Loading the script in a server component or layout that never runs on the client.
Multiple script tags causing duplicate widgets.

Still stuck?

Contact our team and we will help you troubleshoot or plan the next step.

Contact support

Was this helpful?