React & Next.js

De Agentkit-chatwidget heeft de volledige gegenereerde code met twee scripts nodig: eerst het opstartscript voor de opdrachtenwachtrij, daarna de widgetloader met agent-ID en widget-URL. Alleen de loader is niet genoeg.

Open bij je agent Kanalen → Website insluiten → Chatwidget, schakel het kanaal in en kopieer beide gegenereerde tags. Behoud de gegenereerde ID en URL.

React met Vite of Create React App

Plak beide tags ongewijzigd en in deze volgorde vóór </body> in index.html (Vite) of public/index.html (Create React App). Bouw en publiceer de site. Plaats ze niet in een component dat bij elke routewisseling opnieuw wordt geladen.

Next.js App Router

Gebruik voor een widget op de hele site next/script in app/layout.tsx om beide gegenereerde tags over te nemen. Vervang YOUR_WIDGET_URL en YOUR_CHATBOT_ID door de waarden uit de gegenereerde loader. Laat de getoonde opstartcode staan. Het inline script heeft een id nodig; beforeInteractive voert het vóór de loader uit.

// 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

Plaats voor de hele site het inline opstartscript in pages/_document.tsx en de loader in pages/_app.tsx. Vervang beide tijdelijke waarden door de gegenereerde waarden. beforeInteractive hoort in _document, niet in _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 de gepubliceerde pagina

1. Open de gepubliceerde URL en controleer of de chatknop verschijnt. Controleer bij Vite of Create React App de broncode; inspecteer bij Next.js het Elementenpaneel na het laden. Het opstartscript en de loader met agent-ID moeten aanwezig zijn.
2. Open de chat en stel een vraag waarvan je het antwoord al in Playground hebt gecontroleerd. Vergelijk het antwoord met de goedgekeurde bron.
3. Ontbreekt de widget, controleer dan het kanaal, de script-URL en beide tags. Opent hij zonder antwoord, controleer netwerkfouten, berichtlimiet, bronnen en domeinbeperkingen. Sta een ontwikkel- of previewdomein alleen tijdens de test toe.

De JavaScript-widgetgids bevat de checklist voor gegenereerde code. Next.js beschrijft scriptplaatsing en laadstrategieën en de verplichte ID voor inline scripts. Deze voorbeelden gelden voor een zwevende widget op de hele site; test een route- of tenantgebonden variant apart.