React e Next.js

Il widget di chat Agentkit richiede il codice generato completo con due script: prima lo script di inizializzazione della coda dei comandi, poi il loader con ID agente e URL del widget. Il solo loader non basta.

Apri Canali → Incorporamento nel sito web → Widget di chat dell'agente, abilita il canale e copia entrambi i tag generati. Mantieni ID e URL generati.

React con Vite o Create React App

Incolla i due tag senza modifiche e nell'ordine indicato prima di </body> in index.html (Vite) o public/index.html (Create React App). Compila e pubblica il sito. Non inserirli in un componente che viene rimontato a ogni cambio di pagina.

Next.js App Router

Per mostrare il widget in tutto il sito, adatta i due tag generati con next/script in app/layout.tsx. Sostituisci YOUR_WIDGET_URL e YOUR_CHATBOT_ID con i valori del loader generato. Mantieni il codice di inizializzazione mostrato. Lo script inline richiede un id; beforeInteractive lo esegue prima del 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

Per tutto il sito, inserisci l'inizializzazione inline in pages/_document.tsx e il loader in pages/_app.tsx. Sostituisci i due segnaposto con i valori del loader generato. beforeInteractive va in _document, non 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"
      />
    </>
  );
}

Prova la pagina pubblicata

1. Apri l'URL pubblicato e controlla che appaia la bolla. Con Vite o Create React App controlla il sorgente; con Next.js controlla il pannello Elementi dopo il caricamento. Devono esserci inizializzazione e loader con ID agente.
2. Apri la bolla e invia una domanda la cui risposta hai già verificato nel Playground. Confronta la risposta con la fonte approvata.
3. Se il widget manca, verifica canale, URL dello script e i due tag. Se si apre ma non risponde, controlla errori di rete, limite messaggi, fonti e restrizioni di dominio. Consenti l'origine di sviluppo o anteprima solo durante la prova.

La guida del widget JavaScript contiene la lista di controllo del codice generato. Next.js documenta posizionamento e caricamento degli script e l'ID richiesto per gli script inline. Questi esempi riguardano un widget flottante per tutto il sito; prova separatamente le installazioni per pagina o tenant.