AI chatbot for Next.js: how to install it

In Next.js the code goes in the root layout, so it appears on every page.

You’ll find it ready in the panel, with your key, and copy it in one click. It looks like this:

<script src="https://app.interlyo.com/widget/chatbot.js" data-api-key="your-key" defer></script>

1App Router (Next.js 13 and later)

Open app/layout.tsx.
Add the Script component before the closing body tag.

import Script from 'next/script';

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        {children}
        <Script
          src="https://app.interlyo.com/widget/chatbot.js"
          data-api-key="your-key"
          strategy="afterInteractive"
        />
      </body>
    </html>
  );
}

The afterInteractive, lazyOnload and beforeInteractive strategies all work. Don’t use strategy="worker": the script would run outside the page and couldn’t find the key. Write the attribute exactly as data-api-key, with hyphens: dataApiKey doesn’t work.

2Pages Router (Next.js 12)

Open pages/_document.js.
Paste the code after NextScript.

<body>
  <Main />
  <NextScript />
  <script src="https://app.interlyo.com/widget/chatbot.js" data-api-key="your-key" defer></script>
</body>

Load chatbot.js from our address, as in the code above. Don’t download it into your project, rename it or include it in your site’s bundle: the widget would no longer find the key and our server.

AI chatbot for Next.js: how to install it

1App Router (Next.js 13 and later)

2Pages Router (Next.js 12)

Choose your platform

Content management

Online shops

Website builders

Custom sites and apps

Ready to install it?