React e Next.js

O widget de chat da Agentkit precisa do código gerado completo com dois scripts: primeiro o script de inicialização da fila de comandos, depois o carregador com o ID do agente e o URL do widget. O carregador sozinho não basta.

Abra Canais → Incorporação no site → Widget de chat do agente, ative o canal e copie as duas etiquetas geradas. Mantenha o ID e o URL gerados.

React com Vite ou Create React App

Cole as duas etiquetas sem alterações e por esta ordem antes de </body> em index.html (Vite) ou public/index.html (Create React App). Compile e publique o site. Não as coloque num componente montado novamente a cada mudança de rota.

Next.js App Router

Para um widget em todo o site, adapte as duas etiquetas geradas com next/script em app/layout.tsx. Substitua YOUR_WIDGET_URL e YOUR_CHATBOT_ID pelos valores do carregador gerado. Mantenha o código de inicialização mostrado. O script inline precisa de um id; beforeInteractive executa-o antes do carregador.

// 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 o site, coloque a inicialização inline em pages/_document.tsx e o carregador em pages/_app.tsx. Substitua os dois marcadores pelos valores do carregador gerado. beforeInteractive pertence a _document, não a _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"
      />
    </>
  );
}

Teste a página publicada

1. Abra o URL publicado e confirme que aparece a bolha de chat. Em Vite ou Create React App, verifique o código-fonte; em Next.js, inspecione o painel Elementos após o carregamento. A inicialização e o carregador com o ID do agente devem estar presentes.
2. Abra a bolha e envie uma pergunta cuja resposta já verificou no Playground. Compare a resposta com a fonte aprovada.
3. Se o widget não aparecer, verifique o canal, o URL do script e ambas as etiquetas. Se abrir mas não responder, verifique erros de rede, limite de mensagens, fontes e restrições de domínio. Autorize a origem de desenvolvimento ou pré-visualização apenas durante o teste.

O guia do widget JavaScript inclui a lista de verificação do código gerado. O Next.js documenta a colocação e o carregamento de scripts e o ID obrigatório para scripts inline. Estes exemplos são para um widget flutuante em todo o site; teste separadamente configurações por rota ou por inquilino.