要嵌入 Agentkit 聊天機器人，請開啟你的代理的 Channels → Website embed 頁面，啟用 Chat widget，並複製完整的產生程式碼。將兩個 script 標籤貼到全站頁尾或頁面範本中，發佈後載入公開頁面並傳送一則測試訊息。產生的程式碼已包含你的代理 ID 與設定好的小工具 URL。請勿用從文章複製的程式片段取代它。
如果你想讓聊天出現在頁面的某個區塊內，請改為啟用 Iframe 頻道並複製其產生的 iframe 程式碼。iframe 與浮動小工具是不同的頻道，請確認你所使用頻道的開關。
選擇聊天要出現的位置
| 目標 | 使用 | 取得位置 |
|---|---|---|
| 全站顯示的浮動聊天泡泡 | Chat widget | Channels → Website embed → Chat widget |
| 支援或聯絡頁面內的聊天面板 | Iframe | Channels → Website embed → Iframe |
| React 或 Next.js 應用程式中的浮動泡泡 | Chat widget | 在應用程式的 layout 或 HTML 範本中使用產生的 script |
| WordPress 全站泡泡 | Chat widget | 將兩個產生的標籤放入頁尾程式碼欄位 |
React 應用程式進行此安裝不需要額外的 Agentkit React 套件。React 或 Next.js 的放置範例請參考 React 整合指南。iframe 指南說明如何設定內嵌聊天面板的尺寸。
安裝浮動小工具
- 建立代理，加入一個你能核對答案的來源，並在 Playground 中試問幾個問題。如果你是從零開始，請建立 Agentkit 帳戶。
- 開啟代理的 Channels → Website embed 頁面。選取 Chat widget 並啟用該頻道。
- 複製該處顯示的完整程式碼。它包含一段小型 bootstrap script，後面接著非同步的小工具 script。請將兩個標籤及其產生的
data-chatbot與src值放在一起。 - 將程式碼貼到網站的共用頁尾或 HTML 範本中，置於結尾的
</body>標籤之前。每個頁面只加入一次。如果你只想在單一頁面顯示小工具，請改用該頁面的程式碼區域。 - 發佈網站。在新的瀏覽器視窗開啟公開 URL，點擊泡泡，並傳送一個你能依核准來源核對答案的問題。
小工具 URL 取決於 Agentkit 的託管設定，因此請從 Website embed 複製目前的程式碼。JavaScript 小工具指南提供目前的設定步驟，Embed SDK 指南說明 bootstrap 的作用。
React 與 Next.js
將 script 加入應用程式的 HTML 範本或共用 layout，讓它在你想顯示泡泡的頁面載入。每個渲染的頁面只保留一份小工具。React 整合指南涵蓋 React 與 Next.js 的 layout 放置方式。請從 Channels → Website embed 複製目前的 URL 與代理 ID；此設定不包含安裝套件。
WordPress
若要全站安裝，請將兩個產生的 script 標籤貼到 WPCode 的 Header & Footer 畫面中的 Footer 欄位。儲存後清除所有網站快取，然後檢查一個公開頁面。當你的帳戶沒有發佈 script 的權限時，WordPress 可能會從 Custom HTML 區塊中移除 script，因此若泡泡未出現，請檢查渲染後的頁面原始碼。確切的選單路徑與檢查項目請依照 WordPress 安裝指南。
將聊天嵌入頁面內
在同一個 Website embed 頁面選擇 Iframe，啟用該頻道並複製產生的 iframe。將它貼到內嵌聊天應出現的位置。它的 URL 指向你代理的託管 iframe 頁面。內嵌面板會停留在該頁面區塊內；不會在網站其他部分加入浮動泡泡。在你的 layout 中給 iframe 足夠的高度，先用 Visit 預覽託管的聊天頁面，再到你已發佈的頁面測試 iframe。iframe 不會提供父頁面的 window.agentkit SDK，因此如果你需要這些瀏覽器指令，請使用 script 小工具。請參閱 iframe 說明。
上線前檢查結果
在新的瀏覽器視窗開啟已發佈的頁面，並記錄四項結果：
- 泡泡或內嵌面板是否出現在預期位置？
- 它是否能開啟並接受訊息？
- 它的回答是否與你測試所用的來源相符？
- 當代理無法回答時，訪客是否仍能找到你平常的聯絡管道？
如果什麼都沒出現，請先確認頻道已啟用，並檢查渲染後的頁面原始碼中是否有兩個產生的小工具標籤或 iframe。確認 script URL 是絕對路徑，且能在瀏覽器的 Network 面板中載入。內容編輯器或快取可能移除或延遲了程式碼。如果介面出現但訊息傳送失敗，請檢查代理的設定、允許的網域與來源狀態。網域限制指南說明允許網域清單如何影響嵌入。
將測試問題與觀察到的回答保存在你的上線筆記中。安裝小工具只能證明它會載入；不能證明每個回答都正確。變更來源或設定後，請重新檢查受影響的問題。
