要將 Agentkit 聊天機器人加入 Webflow，請從 Channels → Website embed → Chat widget 複製兩個產生的 script 標籤。將它們放入 Webflow 的全站 Footer code，或單一頁面的 Before </body> 欄位，然後發佈。檢查已發佈的頁面，並提出一個你已經知道答案的問題。
Agentkit 目前的程式碼包含一小段佇列啟動程式碼，接著是小工具載入器，其中帶有你的聊天機器人 ID 和目前的 script URL。請從你自己的儀表板整段複製。
開始前先確認存取權限
Webflow 的自訂程式碼規則要求 Core、Growth、Agency 或 Freelancer Workspace，或有效的 Site 方案。必須由 Site manager 或 Designer 加入程式碼。如果你無法加入自訂程式碼，請先確認方案和你的角色，再變更聊天機器人。Webflow 不保證第三方自訂程式碼能正常運作，也不為其提供直接的疑難排解。
你還需要一個已啟用 Chat widget 的 Agentkit 聊天機器人。建立一個，加入最新的網站來源或已核准的 Q&A 回答，並在 playground 中測試幾個問題。在邀請訪客之前先檢查回答。
如果你將 Webflow URL 加為網站來源，請檢查 Agentkit 實際索引了哪些內容。爬取或 sitemap 可以發現多個頁面，但排除的路徑、無法存取的內容和擷取失敗可能會留下缺口。網站來源指南說明如何檢查和縮小爬取範圍。對於需要謹慎措辭的政策回答，請加入精確的 Q&A 來源。
將程式碼放在 Webflow 的單一位置
若要在每個頁面顯示小工具：
- 在 Agentkit 中開啟聊天機器人的 Channels → Website embed → Chat widget 頁面。啟用該頻道並複製整個產生的程式碼區塊，包含兩個 script 標籤。
- 在 Webflow 中開啟 Site settings → Custom code。將程式碼貼到 Footer code，Webflow 會將其插入結尾
</body>標籤之前。 - 儲存變更並發佈到你打算測試的網域。只儲存欄位並不會更新訪客看到的網站。
若只在單一頁面顯示小工具，請讓 Site settings 保持空白。在 Webflow Designer 中開啟該頁面的 Page settings → Custom code → Before </body> tag，貼上兩個標籤，儲存並發佈。只在需要小工具的頁面重複此操作。Webflow 會在網站程式碼之後插入頁面程式碼，因此請將程式碼片段放在單一位置，以便變更和疑難排解。
Webflow 安裝指南有這些步驟的精簡版本。
驗證已發佈的頁面
在新分頁中開啟已發佈的 *.webflow.io 網域或你的自訂網域。Webflow 表示自訂程式碼可能會在 Designer 預覽中執行，但在你發佈之前，訪客不會收到已儲存的變更。請測試訪客實際使用的網域。
在邀請流量之前，請使用這份驗收檢查：
| 檢查項目 | 預期結果 |
|---|---|
| 頁面原始碼 | 產生的程式碼中的佇列啟動標籤和小工具載入器標籤，安裝在單一位置 |
| 小工具 | 啟動器會在你放置它的已發佈桌面版和行動版頁面上開啟 |
| 已知答案 | 關於已核准內容的問題會傳回預期的回答 |
| 網域 | 如果你啟用了網域限制，你測試的測試環境網域和自訂網域都在允許清單中 |
例如，服務類網站可以針對已核准的營業時間頁面測試「你們週六可以預約嗎？」。如果回答缺失或錯誤，請修正來源或加入精確的 Q&A 回答，然後重複測試。聊天氣泡的出現只能證明小工具已經顯示。
如果啟動器沒有出現，請檢查已發佈頁面的原始碼是否包含兩個標籤，確認 Chat widget 已啟用，並檢查瀏覽器中失敗的網路請求。如果你無法加入自訂程式碼，請回頭確認 Webflow 的方案和角色要求。如果你在 Site settings 和 Page settings 兩處都貼上了程式碼片段，請移除其中一份並重新發佈。如果啟動器可以開啟但回答失敗，請先檢查聊天機器人的來源和允許的網域，再變更 Webflow 程式碼。
安裝成功後，查看最初的真實問題並修正來源缺口。當你變更 Webflow 頁面或在測試環境與自訂網域之間切換時，請重新檢查。如果想在頁面內容中內嵌面板而非浮動啟動器，請使用 Agentkit 獨立的 iframe 頻道。
