React & Next.js

El widget de chat de Agentkit necesita el código generado completo de dos scripts: primero el script de inicio que prepara la cola de comandos y después el cargador con el ID del agente y la URL del widget. El cargador por sí solo no basta.

Abre Canales → Incrustar en sitio web → Widget de chat del agente, activa el canal y copia ambas etiquetas generadas. Conserva el ID y la URL originales.

React con Vite o Create React App

Pega ambas etiquetas sin cambios y en ese orden antes de </body> en index.html (Vite) o public/index.html (Create React App). Compila y publica el sitio. No las coloques en un componente que se renderiza en cada cambio de ruta.

Next.js App Router

Para mostrar el widget en todo el sitio, traslada las dos etiquetas generadas a app/layout.tsx mediante next/script. Sustituye YOUR_WIDGET_URL y YOUR_CHATBOT_ID por los valores del cargador generado. Mantén el código de inicio tal como aparece. El script en línea necesita un id; beforeInteractive lo ejecuta antes del cargador.

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

Para todo el sitio, coloca el inicio en línea en pages/_document.tsx y el cargador en pages/_app.tsx. Sustituye ambos marcadores con los valores del cargador generado. beforeInteractive va en _document, no en _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"
      />
    </>
  );
}

Prueba la página publicada

1. Abre la URL publicada y comprueba que aparece la burbuja. En Vite o Create React App, revisa el código fuente; en Next.js, inspecciona Elementos después de cargar. Deben aparecer el inicio y el cargador con el ID del agente.
2. Abre la burbuja y envía una pregunta cuya respuesta ya comprobaste en Playground. Compara la respuesta con la fuente aprobada.
3. Si falta el widget, revisa el canal, la URL del script y ambas etiquetas. Si se abre pero no responde, comprueba errores de red, límite de mensajes, fuentes y restricciones de dominio. Permite el origen de desarrollo o vista previa solo durante la prueba.

La guía del widget JavaScript incluye la lista de comprobación del código generado. Next.js documenta la ubicación y carga de scripts y el ID obligatorio para scripts en línea. Estos ejemplos son para un widget flotante en todo el sitio; prueba por separado cualquier instalación por ruta o inquilino.