Load the Conversa widget on App Router or Pages Router by placing the script before </body> in your root layout or document.

Embed Conversa in Next.js

Next.js sites can embed Conversa the same way as any HTML app: one script tag from your dashboard, placed just before the closing <code class="rounded bg-muted px-1 py-0.5 text-[0.95em]">&lt;/body&gt;</code> tag. Conversa runs alongside your React tree; you do not need a special Next package.

Copy the snippet

In Conversa: Bots → your bot → Embed → Copy code.

<script src="https://conversa.ng/widget.js" data-bot-id="YOUR_BOT_ID"></script>

Ensure the bot is ACTIVE, sources are processed, and your site’s domain is in allowed domains.

App Router (Next.js 13+)

Open app/layout.tsx (your root layout). Add the script as the last children inside <body>, after {children}:

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        {children}
        <script src="https://conversa.ng/widget.js" data-bot-id="YOUR_BOT_ID" async={false} />
      </body>
    </html>
  );
}

Alternatively, use next/script with strategy="lazyOnload" if you prefer Next’s loader-keep the same src and data-bot-id. Avoid putting the tag only in <head> without a body; the widget expects document.body.

Because this lives in the root layout, every route gets the chat bubble automatically.

Pages Router

For older Next apps, add the tag in pages/_document.tsx inside <body>, after <Main /> and <NextScript />:

<body>
  <Main />
  <NextScript />
  <script src="https://conversa.ng/widget.js" data-bot-id="YOUR_BOT_ID" />
</body>

Or paste into public/index.html if your project still uses a static shell.

Environment-specific domains

Use separate bots or allowed-domain entries for localhost, preview URLs, and production. Test in a private window after each deploy.

Troubleshooting

Widget missing on Vercel: confirm the script is in the deployed layout, not only a client component that never renders on the server HTML.
Hydration warnings: a plain <script> in the root layout before </body> is usually fine; if you see issues, switch to next/script with lazyOnload.
Still stuck: verify ACTIVE bot, processed sources, and allowed domains.

Next.js + Conversa: one snippet, root layout, before </body>.