React & Next.js

Le widget de chat Agentkit nécessite le code généré complet à deux scripts : un script d'initialisation pour la file de commandes, puis le chargeur contenant l'ID de l'agent et l'URL du widget. Le chargeur seul ne suffit pas.

Ouvrez Canaux → Intégration au site web → Widget de chat pour votre agent, activez le canal et copiez les deux balises générées. Conservez l'ID et l'URL fournis.

React avec Vite ou Create React App

Collez les deux balises sans les modifier, dans cet ordre, avant </body> dans index.html (Vite) ou public/index.html (Create React App). Compilez et publiez le site. Ne les placez pas dans un composant remonté à chaque changement de route.

Next.js App Router

Pour un widget sur tout le site, adaptez les deux balises générées avec next/script dans app/layout.tsx. Remplacez YOUR_WIDGET_URL et YOUR_CHATBOT_ID par les valeurs du chargeur généré. Gardez le code d'initialisation affiché. Le script en ligne exige un id ; beforeInteractive l'exécute avant le chargeur.

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

Pour tout le site, placez l'initialisation en ligne dans pages/_document.tsx et le chargeur dans pages/_app.tsx. Remplacez les deux paramètres par les valeurs du chargeur généré. beforeInteractive doit se trouver dans _document, pas dans _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"
      />
    </>
  );
}

Tester la page publiée

1. Ouvrez l'URL publiée et vérifiez la présence de la bulle. Avec Vite ou Create React App, vérifiez le code source ; avec Next.js, inspectez les éléments après le chargement. L'initialisation et le chargeur avec l'ID de l'agent doivent être présents.
2. Ouvrez la bulle et posez une question dont vous avez déjà vérifié la réponse dans Playground. Comparez la réponse avec la source approuvée.
3. Si le widget manque, vérifiez le canal, l'URL du script et les deux balises. S'il s'ouvre sans répondre, contrôlez les erreurs réseau, la limite de messages, les sources et les restrictions de domaine. N'autorisez l'origine de développement ou de prévisualisation que pendant le test.

Le guide du widget JavaScript contient la liste de contrôle du code généré. Next.js explique le placement et le chargement des scripts et l'ID requis pour les scripts en ligne. Ces exemples visent un widget flottant sur tout le site ; testez séparément les variantes par route ou par locataire.