React i Next.js

Widżet czatu Agentkit wymaga pełnego wygenerowanego kodu z dwoma skryptami: najpierw skryptu inicjującego kolejkę poleceń, a potem programu ładującego z identyfikatorem agenta i adresem widżetu. Sam program ładujący nie wystarczy.

Otwórz Kanały → Wtyczka na stronę → Widżet czatu agenta, włącz kanał i skopiuj oba wygenerowane znaczniki. Zachowaj wygenerowany identyfikator i adres URL.

React z Vite lub Create React App

Wklej oba znaczniki bez zmian i w tej kolejności przed </body> w index.html (Vite) lub public/index.html (Create React App). Zbuduj i opublikuj stronę. Nie umieszczaj ich w komponencie montowanym ponownie przy zmianie trasy.

Next.js App Router

Aby wyświetlać widżet w całej witrynie, przenieś oba wygenerowane znaczniki do app/layout.tsx przy użyciu next/script. Zastąp YOUR_WIDGET_URL i YOUR_CHATBOT_ID wartościami z wygenerowanego programu ładującego. Zachowaj pokazany kod inicjujący. Skrypt wbudowany wymaga id; beforeInteractive uruchamia go przed programem ładującym.

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

Dla całej witryny umieść inicjalizację w pages/_document.tsx, a program ładujący w pages/_app.tsx. Zastąp oba symbole wartościami z wygenerowanego kodu. beforeInteractive należy do _document, a nie do _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"
      />
    </>
  );
}

Sprawdź opublikowaną stronę

1. Otwórz opublikowany adres i sprawdź, czy widać przycisk czatu. W Vite lub Create React App sprawdź źródło strony; w Next.js sprawdź panel Elementy po załadowaniu. Inicjalizacja i program ładujący z identyfikatorem agenta muszą być obecne.
2. Otwórz czat i zadaj pytanie, którego odpowiedź sprawdzono już w Playground. Porównaj ją z zatwierdzonym źródłem.
3. Jeśli widżetu nie ma, sprawdź kanał, URL skryptu i oba znaczniki. Jeśli otwiera się bez odpowiedzi, sprawdź błędy sieci, limit wiadomości, źródła i ograniczenia domen. Zezwalaj na domenę deweloperską lub podglądu tylko na czas testu.

Instrukcja widżetu JavaScript zawiera listę kontrolną wygenerowanego kodu. Next.js opisuje umieszczanie i ładowanie skryptów oraz wymagany identyfikator skryptu wbudowanego. Przykłady dotyczą pływającego widżetu w całej witrynie; konfigurację zależną od trasy lub dzierżawcy sprawdź osobno.