Add Zovibot to Next.js

About 2 min

Use next/script rather than a raw tag so Next controls when it loads. `afterInteractive` is the right strategy: the widget is not needed for first paint.

Steps

The snippet below is a placeholder — yours carries your own site key.

App Router — add it to app/layout.tsx

Import Script from next/script and render it inside <body>. Replace the src and key below with your own from the snippet.

Copy this

import Script from 'next/script';

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        {children}
        <Script
          src="SCRIPT_URL"
          data-site-key="YOUR_SITE_KEY"
          strategy="afterInteractive"
        />
      </body>
    </html>
  );
}

Pages Router — add it to pages/_app.tsx
Same component, rendered alongside <Component {...pageProps} />. Do not put it in _document.tsx — Script is not supported there.

Worth knowing

Do not wrap it in a "use client" component. next/script works in a Server Component and this needs no client boundary of its own.
The widget mounts into its own shadow root, so your global CSS and Tailwind resets cannot affect it and it cannot affect yours.