React & Next.js

The Agentkit chat widget needs the complete two-script code generated for your agent: a small bootstrap that prepares the command queue, followed by the widget loader with your agent ID and widget URL. A loader-only example is incomplete.

Open your agent's Channels → Website embed → Chat widget page, enable the channel, and copy both generated tags. Keep the generated ID and URL; do not use a CDN URL from an older example.

React with Vite or Create React App

Paste both tags, unchanged and in order, before </body> in index.html (Vite) or public/index.html (Create React App). Build and publish the site. Do not put the tags in a component that renders on every route change.

Next.js App Router

For a sitewide widget, translate the two generated tags into next/script in app/layout.tsx. Replace YOUR_WIDGET_URL and YOUR_CHATBOT_ID with the values in your generated loader tag. Keep the bootstrap body as shown. The inline script needs an id; beforeInteractive puts this small bootstrap ahead of the loader.

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

const bootstrap = `(function (w) {
  if (w.agentkit) return;
  var q = [];
  var agentkit = function () { q.push(arguments); };
  agentkit.q = q;
  w.agentkit = agentkit;
})(window);`;

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        {children}
        <Script id="agentkit-bootstrap" strategy="beforeInteractive">
          {bootstrap}
        </Script>
        <Script
          id="agentkit-widget"
          src="YOUR_WIDGET_URL"
          data-chatbot="YOUR_CHATBOT_ID"
          strategy="afterInteractive"
        />
      </body>
    </html>
  );
}

Next.js Pages Router

For a sitewide widget, put the inline bootstrap in pages/_document.tsx and the loader in pages/_app.tsx. Replace the two placeholders with the values in your generated loader tag. Keep beforeInteractive in _document, not _app.

// pages/_document.tsx
import { Html, Head, Main, NextScript } from 'next/document';
import Script from 'next/script';

export default function Document() {
  return (
    <Html lang="en">
      <Head />
      <body>
        <Main />
        <NextScript />
        <Script id="agentkit-bootstrap" strategy="beforeInteractive">
          {`(function (w) {
            if (w.agentkit) return;
            var q = [];
            var agentkit = function () { q.push(arguments); };
            agentkit.q = q;
            w.agentkit = agentkit;
          })(window);`}
        </Script>
      </body>
    </Html>
  );
}

// pages/_app.tsx
import Script from 'next/script';
import type { AppProps } from 'next/app';

export default function App({ Component, pageProps }: AppProps) {
  return (
    <>
      <Component {...pageProps} />
      <Script
        id="agentkit-widget"
        src="YOUR_WIDGET_URL"
        data-chatbot="YOUR_CHATBOT_ID"
        strategy="afterInteractive"
      />
    </>
  );
}

Test the published page

1. Open the published URL and confirm the chat bubble appears. For Vite or Create React App, check the page source; for Next.js, inspect the Elements panel after load. Confirm the bootstrap and loader are present and the loader has your agent ID.
2. Open the bubble and send a question whose answer you already checked in the Playground. Verify the reply against the approved source.
3. If the widget is missing, confirm the channel is enabled, the script URL loads, and both tags are present. If it opens but cannot reply, check browser network errors, the message allowance, sources and domain restrictions. Allow the exact development or preview origin only while testing.

Use the JavaScript widget guide for the generated-code checklist. Next.js documents script placement and loading strategies and the inline script ID requirement. These examples are for a sitewide floating widget; test a route-specific or tenant-specific setup separately before publishing.