Platforms

Adding an AI chatbot to a React or Next.js app

How to load a chatbot widget script in React, Next.js and other SPA frameworks without breaking hydration or loading it twice.

See chatbot pricing Try a free demo on your site

In short

In a React or Next.js app, load the chatbot widget once from the document head or a root layout rather than inside a component that remounts.

The widget lives outside React's tree, so it survives client-side navigation without being re-injected.

4.7·130 reviews

Key facts

Load the script once at the application root, not per route component.
In Next.js the App Router layout or next/script with afterInteractive both work.
Re-injecting the script on every navigation causes duplicate launchers.
The widget renders outside the React root and needs no provider.

Next.js App Router

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

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        {children}
        <Script
          src="https://defaltam.com/api/public/bot/widget?k=YOUR_PUBLIC_KEY"
          strategy="afterInteractive"
        />
      </body>
    </html>
  );
}

Plain React / Vite

The simplest approach is to add the tag to index.html. It loads once, before your app mounts, and never re-runs on route changes.

<!-- index.html -->
<script src="https://defaltam.com/api/public/bot/widget?k=YOUR_PUBLIC_KEY" async></script>

Single-page apps and indexing

If your app renders content only on the client, a crawler may see very little text. Server-render or pre-render your marketing pages so the bot — and search engines — can read your prices and service descriptions.

The product behind this guide

A chatbot trained on your own website, live today

Defaltam builds AI chatbots that read your public pages and answer with your real prices, services and policies. Support is €79/month, Sales is €149/month, both start with a 5-day free trial, and installation is one script tag.

See plans and pricing Build a free demo from your website

FAQ

Questions people ask about this

How do I add a chatbot widget to a React app?

Add the script tag to index.html, or in Next.js to the root layout using next/script with the afterInteractive strategy. Loading it once at the root avoids duplicate launchers on navigation.

Will the widget break hydration?

No, because it renders outside the React tree. Problems only appear if you inject it inside a component that mounts and unmounts.

Can I open the chat from a button in my app?

Yes — the widget exposes its launcher on the page, and you can style your own call-to-action next to it.

Does a client-rendered SPA index properly?

Only if content is server-rendered or pre-rendered. Otherwise crawlers, including the chatbot indexer, see an empty shell.