免程式碼打造網站聊天機器人，並在上線前完成測試

你不需要撰寫應用程式，就能建立 Agentkit 網站聊天機器人。加入已核准的網頁或檔案，決定代理人的回答方式，在 Playground 中測試，然後把兩段產生的 script 標籤複製到網站的程式碼區域。最後一步是在已發布的頁面上測試。編輯器裡出現聊天泡泡，並不代表訪客就能使用它。

你需要一個 Agentkit 帳戶、你有權使用的內容，以及在網站中加入自訂程式碼的權限。如果你的網站方案或角色無法發布 script，在允許嵌入的情況下，內嵌 iframe 可能是一個選項。開始前請先確認網站的規範。

1. 從一個問題和它的核准答案開始

挑選三個訪客真的會問的問題。包含一個例行問題、一個答案取決於現行政策的問題，以及一個你的來源無法回答的問題。為每個問題寫下核准的答案或轉接真人的聯絡途徑。這份小小的答案清單，讓你之後有具體的依據可以核對。

舉例來說，一家商店可能會問：「特價商品什麼時候可以退貨？」以現行的退貨政策作為答案來源。如果政策沒有涵蓋特價商品，可接受的回應是表明無法確認規則，並引導訪客聯絡商店。這個範例是一種測試模式，並非對任何商店政策的陳述。

2. 建立代理人並加入來源

建立帳戶，開啟儀表板，選擇 Add AI agent。設定精靈會帶你依序完成 Link、Sources、Design 和 AI。你可以提供網站網址，或手動加入來源。在 Sources 中，選取少數幾個包含核准答案的網頁。只有當檔案、文字片段或問答配對能補足那些網頁缺少的答案時，才加入它們。來源指南說明了可用的來源類型。

檢查爬蟲納入了哪些內容。提供網站網址並不保證每個頁面都可用、是最新的或已核准。避免加入重複或互相衝突的政策版本。政策變更後，更新受影響的來源並重新測試對應的問題。付費的自動重新訓練會更新既有已索引的網站網址；它不會發現每個新頁面，也不會替你替換已上傳的檔案。網站來源指南說明了這個界線。

3. 設定外觀與回答規則

在 Design 中，設定易於辨認的名稱、顏色和開場訊息。告訴訪客代理人能回答什麼。在 AI 中，從你帳戶目前提供的模型中選擇，並撰寫關於範圍與不確定性的簡短指示。模型名稱和方案權限會變動，所以請使用工作區中的選擇器，而不是文章裡的靜態清單。

一個有用的指示是：「使用提供的來源回答關於我們已公布退貨政策的問題。如果缺少某個細節或來源互相矛盾，請說明無法確認，並引導訪客前往 [支援途徑]。」把方括號中的途徑換成你的團隊實際會關注的途徑。指示引導行為；它們無法讓缺失或矛盾的來源資料變成事實。

完成精靈並開啟 Playground。問你的三個問題，再問一個改變了某個重要細節的後續問題。將每個回答與你寫下的答案清單比對。如果回應有誤，修正來源或指示並重複測試。如果代理人提供名單收集或某項動作，在對訪客啟用前先測試它實際的目的地；對話中的承諾本身並不等於完成轉接。

4. 安裝產生的小工具程式碼

開啟代理人的 Channels → Website embed 頁面，選取 Chat widget，並啟用該管道。複製為你的代理人產生的完整程式碼。它包含一段簡短的命令佇列啟動標籤，接著是一段帶有你的代理人 ID 和已設定小工具網址的非同步載入標籤。把兩段標籤一起貼到網站的頁尾程式碼欄位或共用的 HTML 範本中，放在 </body> 之前。發布網站。不要從範例文章中複製 ID 或 script 網址。

如果你想在頁面區塊內放置聊天面板，而不是浮動泡泡，請在同一個 Website embed 頁面啟用 Iframe，並使用它產生的 iframe 程式碼。各平台的放置方式，請依照最新的 JavaScript 小工具、React 與 Next.js、WordPress、Webflow 或 Framer 指南。每個渲染的頁面只加入一次小工具程式碼。

5. 檢查公開頁面

在新的瀏覽器視窗中開啟已發布的網址，也在手機上開啟。保留這份簡短的驗收記錄：

如果小工具在 Playground 中出現，但在公開網域上沒有出現，請檢查網域限制以及產生的程式碼。如果泡泡能開啟但無法回答，請檢查來源處理狀態和你的訊息額度。記錄測試網址、問題、觀察到的回答和日期，以便在來源更新後重複相同的檢查。

免程式碼上線仍然需要對來源負責並審查回答。從一組範圍較窄的問題開始，發布，然後檢視真實對話以找出缺口。如果你想嘗試這個流程，建立 Agentkit 帳戶，並在引導訪客使用前先測試已發布的小工具。