Add an AI chatbot to Next.js

How to add the IntelliDesk AI support chatbot to Next.js, step by step. It answers from your own content, captures leads and hands off to your team. Your snippet, with your agent filled in, is in the dashboard under Deploy → Install; it also confirms when the chat is live on your site.

Steps

Open app/layout.tsx (App Router) or pages/_app.tsx.
Add the Script tag inside <body>. It loads after the page is interactive.

tsx

import Script from "next/script";

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        {children}
        <Script src="https://YOUR_APP/widget.js" data-agent="AGENT_SLUG_OR_ID" strategy="afterInteractive" />
      </body>
    </html>
  );
}

Replace AGENT_SLUG_OR_ID with your agent's slug or id, and YOUR_APP with your IntelliDesk address.

Lock the chat to your domains: Deploy → Chat widget → Embed → Allowed domains.
Signed-in users? Identify them so the agent knows who it's talking to.
Open the chat from your own button, or react to messages: JavaScript API.
All guides: Platform guides.