React 與 Next.js

Agentkit 聊天工具需要完整的兩段產生程式碼：第一段初始化命令佇列，第二段載入工具並帶入代理程式 ID 與工具網址。只加入載入腳本並不完整。

在代理程式開啟頻道 → 網站嵌入 → 聊天工具，啟用頻道並複製產生的兩個標籤。保留原本的 ID 與網址。

使用 Vite 或 Create React App 的 React

依原順序將兩個標籤原樣貼到 index.html（Vite）或 public/index.html（Create React App）的 </body> 前。建置並發布網站。不要放在每次切換路由都會重新掛載的元件中。

Next.js App Router

若要在全站顯示工具，請用 next/script 在 app/layout.tsx 加入兩段產生程式碼。將 YOUR_WIDGET_URL 和 YOUR_CHATBOT_ID 換成產生的載入標籤中的值。保留範例中的初始化程式碼。行內腳本必須有 id；beforeInteractive 會先於載入程式執行。

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

若要在全站顯示，請將行內初始化腳本放在 pages/_document.tsx，載入程式放在 pages/_app.tsx。用產生的值取代兩個佔位符。beforeInteractive 應放在 _document，不要放在 _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"
      />
    </>
  );
}

測試已發布的頁面

1. 開啟已發布網址，確認出現聊天按鈕。使用 Vite 或 Create React App 時檢查網頁原始碼；使用 Next.js 時，載入後在瀏覽器「元素」面板確認初始化腳本，以及帶有代理程式 ID 的載入腳本。
2. 開啟聊天視窗，輸入已在 Playground 核對答案的問題，並對照已核准的來源檢查回覆。
3. 若工具未出現，檢查頻道狀態、腳本網址及兩個標籤。若能開啟但無法回覆，檢查網路錯誤、訊息額度、來源與網域限制。開發或預覽網域只在測試期間允許。

JavaScript 工具指南提供產生程式碼的檢查清單。Next.js 說明腳本放置位置與載入策略，以及行內腳本必須有 ID。這些範例適用於全站浮動工具；依路由或租戶區分的設定應另外測試後再發布。