Skip to content

Add an AI chatbot to your Next.js site.

Next.js loads third-party scripts with its Script component. Put one <Script> in your root layout and the ChatBento widget loads on every route, once, during browser idle time, which is the strategy the Next.js docs suggest for chat support plugins.

Start freeFree plan, 50 messages a month. No card required.

Install on Next.js in 5 steps

Where it goes: app/layout.tsx, with next/script

  1. 1

    In ChatBento, open your chatbot, go to Install and copy your bot ID (the data-bot-id value in the snippet).

  2. 2

    Open your root layout, app/layout.tsx (or app/layout.js).

  3. 3

    Import Script from next/script and add it inside <body>, after {children}, with your bot ID in data-bot-id and strategy="lazyOnload".

  4. 4

    Deploy.

  5. 5

    Open your live site in a new tab and click the chat bubble in the corner to test it.

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://chatbento.com/widget.js" data-bot-id="YOUR_BOT_ID" strategy="lazyOnload" />
      </body>
    </html>
  );
}

Steps follow Next.js’s own documentation, checked October 23, 2026.

Pages Router

Using pages/? Add the same <Script> to your custom pages/_app.tsx, next to <Component {...pageProps} />. Next.js loads it for every route, once.

Data attributes pass through

next/script forwards attributes it doesn't use itself, like data-bot-id, to the final <script> tag, so the widget finds your bot ID.

Content Security Policy

If you set a Content-Security-Policy header, allow https://chatbento.com in script-src and connect-src.

What the chatbot does on your Next.js site

Answers from your content

Trained on your pages, docs and Q&As. It says so when it doesn't know, instead of guessing.

Hands off to you

When a visitor needs a person, it collects their email and sends you the conversation.

Free to start

A free plan with 50 AI messages a month. Paid plans from $8/month: 80% less than Chatbase.

Comparing tools? See ChatBento vs Chatbase and pricing.

Next.js questions. Answered.

Will it reload on every client-side navigation?

No. Next.js loads a root-layout script only once, even as visitors move between pages, so an open conversation stays put.

Does it affect Core Web Vitals?

lazyOnload waits for browser idle time, after the page's own resources. The widget is about 6 KB compressed and renders the chat window only when opened.

Can I open the chat from my own button?

Yes. From a client component, call window.ChatBento?.open() in an onClick handler. close() and toggle() work the same way.

How much does ChatBento cost?

ChatBento has a free plan with 50 AI messages a month, free forever. Paid plans are Hobby at $8/month, Standard at $30/month and Pro at $100/month. New accounts start with a 14-day trial, no card required.

Other platforms

All 31 guides

Add AI support to your Next.js site. Live in minutes.

Start free trialSee pricing

14-day free trial. No card required.