Skip to content
intoCHAT

Next.js integration

Add an AI chatbot to your Next.js app

Load the intoCHAT widget once in your root layout with next/script. It stays in place across client-side navigation, and the agent answers from the content you train it on.

Create your agent free

Last updated:

How intoCHAT works in Next.js

The intoCHAT widget is one script that reads your agent ID from its data-chatbot-id attribute and adds a chat bubble to the page. Next.js forwards data attributes on the Script component to the final script element, so the standard next/script component is all you need. Put it in the root layout and Next.js loads it once, even as visitors move between routes. Colors, position and the welcome message come from intoCHAT, so you don't redeploy to change them.

Install intoCHAT in Next.js

  1. Create and train your agent

    Sign up for intoCHAT, create an agent and add your site on the Knowledge tab. The crawl renders JavaScript-heavy pages before reading them, so client-rendered routes are read as visitors see them.

  2. Copy your agent ID

    Open the Share tab. The code under Bubble Chat contains your agent ID in its data-chatbot-id attribute.

  3. Add the Script to your root layout

    In app/layout.tsx, import Script from next/script and add it inside body, after children, with the embed URL, your agent ID and strategy set to lazyOnload.

  4. Deploy and check

    Open any route. The chat bubble appears in the bottom corner and stays there as you navigate between pages.

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://www.intochat.ai/api/embed.js"
          data-chatbot-id="YOUR_AGENT_ID"
          strategy="lazyOnload"
        />
      </body>
    </html>
  )
}

Next.js passes data-chatbot-id through to the script element, which is how the widget finds your agent. The layout can stay a Server Component, because this Script has no event handlers.

What the agent can do in your Next.js app

  • Client-side actions

    Register functions on your page with window.IntoChatActions.register, and the agent can call them during a chat, for example to read page state or open a form.

  • Custom API actions

    Let the agent call your own HTTP endpoints with bearer, basic, API key or custom header auth. Import a request from cURL and choose which response fields the model sees.

  • Reads client-rendered pages

    The website crawl renders JavaScript-heavy pages before reading them, finds up to 500 URLs from your sitemap and links, and lets you exclude paths with patterns.

  • Grounded answers

    Hybrid semantic and keyword search over your content, with rules that keep answers to your sources, resist prompt injection and say when the answer isn't there.

  • Lead capture

    Ask for an email address or phone number in the chat, manually, by rules or when the AI decides. Leads are emailed to you and export to CSV.

  • Styled from the dashboard

    Colors, avatar, launcher icon, position and welcome message are set on the Appearance tab, not in your code.

Frequently asked questions

Does the widget slow down my Next.js app?

With strategy set to lazyOnload, Next.js adds the script during browser idle time, after the page's other resources have loaded, so it doesn't hold up rendering or hydration. The chat window runs in its own iframe served by intoCHAT, separate from your app's JavaScript.

Should I use lazyOnload or afterInteractive?

Both work. afterInteractive, the default, loads the script earlier, right after some hydration, so the bubble appears sooner, while lazyOnload waits for idle time. In both cases Next.js creates the script element with your data-chatbot-id attribute, which the widget needs.

Does it work with the Pages Router?

Yes. Add the same Script component to pages/_app so it loads on every page. Next.js forwards data attributes in the Pages Router too.

Can I show the chat on some routes only?

You can put the Script in a nested layout instead of the root layout, and it loads when a route under that layout is opened. Once loaded, the bubble lives on the page itself, so it stays visible after client-side navigation to other routes until the next full page load.

My app has a Content Security Policy. What do I need to allow?

Allow www.intochat.ai in script-src for the script, connect-src for loading the agent's settings and frame-src for the chat window. If your policy uses nonces, pass the nonce to the Script component as well.

Do I need to redeploy when I change the agent?

No. The code only carries your agent ID. Colors, position, welcome message, suggested questions and knowledge load from intoCHAT on each page load, so changes show up without a new deployment.

See it answer from your own website

Paste your website address and chat with an agent built from your pages. It takes about a minute.

Create your agent free

Free plan, no credit card needed.