React & Next.js

Das Agentkit-Chat-Widget benötigt den vollständigen generierten Code mit zwei Skripten: zuerst das Bootstrap-Skript für die Befehlswarteschlange, dann den Widget-Loader mit Agent-ID und Widget-URL. Nur der Loader reicht nicht aus.

Öffnen Sie beim Agenten Kanäle → Website-Einbettung → Chat-Widget, aktivieren Sie den Kanal und kopieren Sie beide generierten Tags. Behalten Sie die generierte ID und URL bei.

React mit Vite oder Create React App

Fügen Sie beide Tags unverändert und in dieser Reihenfolge vor </body> in index.html (Vite) oder public/index.html (Create React App) ein. Erstellen und veröffentlichen Sie die Website. Fügen Sie die Tags nicht in eine bei jedem Routenwechsel gerenderte Komponente ein.

Next.js App Router

Für ein Widget auf allen Seiten übertragen Sie die beiden generierten Tags mit next/script nach app/layout.tsx. Ersetzen Sie YOUR_WIDGET_URL und YOUR_CHATBOT_ID durch die Werte aus dem generierten Loader-Tag. Belassen Sie den Bootstrap-Code wie gezeigt. Das Inline-Skript braucht eine id; beforeInteractive führt es vor dem Loader aus.

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

Für ein Widget auf allen Seiten setzen Sie das Inline-Bootstrap in pages/_document.tsx und den Loader in pages/_app.tsx. Ersetzen Sie die beiden Platzhalter durch die Werte aus dem generierten Loader-Tag. beforeInteractive gehört in _document, nicht 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"
      />
    </>
  );
}

Veröffentlichte Seite testen

1. Öffnen Sie die veröffentlichte URL und prüfen Sie, ob die Chat-Blase erscheint. Prüfen Sie bei Vite oder Create React App den Seitenquelltext; bei Next.js prüfen Sie nach dem Laden den Browser-Elementinspektor. Bootstrap und Loader mit Agent-ID müssen vorhanden sein.
2. Öffnen Sie die Blase und senden Sie eine Frage, deren Antwort Sie bereits im Playground geprüft haben. Vergleichen Sie die Antwort mit der freigegebenen Quelle.
3. Fehlt das Widget, prüfen Sie Kanalstatus, Skript-URL und beide Tags. Öffnet es sich ohne Antwort, prüfen Sie Netzwerkfehler, Nachrichtenlimit, Quellen und Domain-Einschränkungen. Lassen Sie eine Entwicklungs- oder Vorschau-Domain nur während des Tests zu.

Die JavaScript-Widget-Anleitung enthält die Checkliste für den generierten Code. Next.js erklärt Skriptplatzierung und Ladestrategien sowie die ID-Pflicht für Inline-Skripte. Die Beispiele gelten für ein seitenweites schwebendes Widget; testen Sie routen- oder mandantenspezifische Varianten vor der Veröffentlichung separat.