如何在 Webflow 網站加入 AI 聊天機器人

Webflow 網站外觀精緻、載入快速，也給你精準的設計掌控權。但它並不內建 AI 聊天功能。如果你想要一個能真正理解你的內容、並與訪客展開真實對話的聊天機器人，就得自己動手加上去。

好消息是：在 Webflow 加入 AI 聊天機器人大約只需要 20 分鐘，而且除了貼上單一指令碼標籤之外，完全不需要寫程式。你建立聊天機器人、用你的網站內容訓練它，再透過自訂程式碼設定加到 Webflow 中，它就能在每個頁面上運作，貼合你的設計，並立刻開始回答訪客的問題。

本指南涵蓋完整流程：建立並訓練聊天機器人、嵌入 Webflow、客製化外觀，以及調整設定以取得最佳成效。

Webflow 聊天機器人選項比較

在深入設定之前，先來看看為 Webflow 加入聊天功能的主要做法有哪些差異。

如果你需要的是由真人團隊即時回覆的聊天小工具，Intercom 這類即時客服工具是正確選擇。如果你想要一個以你實際網站內容訓練而成、能自動回答問題的 AI 助理，AI 聊天機器人會更合適。大多數 Webflow 網站經營者想要的其實是後者——一個不需要安排人力、就能自行處理訪客問題的自助式助理。

步驟 1：建立你的聊天機器人

先在 Agentkit 建立一個聊天機器人，你需要一個免費帳號。

1. 前往 Agentkit 並註冊。
2. 建立一個新的聊天機器人，並取一個能反映用途的名稱（例如「網站助理」或你的品牌名稱）。
3. 選擇一個 AI 模型，GPT-4o 是不錯的預設選擇。你可以在 OpenAI、Anthropic（Claude）與 Google（Gemini）等多種模型中挑選。

步驟 2：用你的 Webflow 網站內容訓練

這一步才是真正讓聊天機器人發揮作用的關鍵，你要把實際的網站內容交給它，讓它能準確回答訪客問題。

加入你的網站網址

1. 在 Agentkit 儀表板中，前往你聊天機器人的**「來源」**頁面。
2. 點選**「新增來源」，選擇「網站」**。
3. 輸入你的 Webflow 網站網址（例如 https://yoursite.webflow.io，或你的自訂網域 https://yoursite.com）。
4. 檢索工具會沿著你主要網址的連結，為所有可存取的頁面建立索引：首頁、關於我們頁面、服務頁面、作品集、部落格文章、常見問題、價格，以及其他任何有連結的內容。

對於使用互動效果、動畫或動態載入內容的 Webflow 網站，Agentkit 的檢索工具會使用 Firecrawl 先轉譯 JavaScript 再進行索引，確保透過 Webflow 互動效果載入的內容也能被準確擷取。

針對重點主題新增問與答

雖然網站檢索能涵蓋你的一般內容，但問與答能讓你對特定答案擁有精準的掌控權。針對訪客最重要的問題，建立對應的問與答：

問與答的優先度高於檢索內容，因此在關鍵主題上，這正是確保聊天機器人給出你想要的確切答案的方法。

上傳文件（選用）

如果你有沒有發布在 Webflow 網站上的資源——PDF 格式的案例研究、服務規格文件、報價單——可以將它們上傳為文件來源，聊天機器人會結合這些內容與你的網站資料來回答問題。

在 Playground 中測試

在把聊天機器人加到正式網站前，先在 Agentkit 的 Playground 中測試。

提出訪客通常會問的問題：

• 「你們提供哪些服務？」
• 「費用是多少？」
• 「要怎麼開始合作？」
• 「你們有沒有服務過 [產業] 的客戶？」
• 「你們的退款政策是什麼？」

如果任何答案錯誤、不完整或表達不佳，就調整你的訓練資料：新增或更新問與答、加入更多文字片段，或補充你網站來源中可能遺漏的特定頁面。

步驟 3：客製化小工具外觀

在嵌入之前，先設定聊天機器人小工具，讓它貼合你的 Webflow 網站設計。

在 Agentkit 儀表板中，前往你聊天機器人的**「設定」**：

色彩主題。 將主色設定為符合你的品牌色，直接使用 Webflow 樣式指南中的色碼，聊天機器人氣泡、標頭與傳送按鈕都會採用這個顏色。

位置。 選擇右下角（預設也最常見）或左下角，挑選不會與你 Webflow 網站上其他浮動元素衝突的一側。

歡迎訊息。 撰寫符合你品牌語氣、並清楚設定期待的訊息：

• 服務型企業：「嗨，我可以回答關於我們服務、價格與流程的問題，有什麼我能幫你的？」
• SaaS 產品：「歡迎！歡迎詢問我們產品、功能或價格的任何問題。」
• 作品集網站：「你好，我可以介紹我們的作品、能力，以及我們如何與客戶合作。」

建議訊息。 新增三到五則建議訊息，引導訪客走向最有價值的對話：

• 「你們提供哪些服務？」
• 「費用是多少？」
• 「能看看你們的作品範例嗎？」
• 「要怎麼開始合作？」

頭像。 上傳你的標誌或品牌圖示作為聊天機器人頭像，讓外觀更一致。

步驟 4：嵌入 Webflow

接下來是實際安裝。在 Webflow 中你有兩個選項：全站套用（每個頁面）或針對特定頁面。

選項 A：全站安裝（建議）

這會把聊天機器人加到你 Webflow 網站的每個頁面。

1. 在 Agentkit 儀表板中，前往你聊天機器人的**「設定」，接著點選「發布」**。
2. 複製這段指令碼標籤：

<script
  src="https://cdn.agentkit.ai/widget.js"
  data-chatbot="your-chatbot-id"
  async>
</script>

3. 在 Webflow 中，開啟**「Project Settings」**（Designer 左側工具列的齒輪圖示，或從專案儀表板進入）。
4. 前往**「Custom Code」**分頁。
5. 將指令碼標籤貼在**「Footer Code」**區塊（標示為「Before </body> tag」的欄位）。
6. 點選**「Save Changes」**。
7. **「Publish」**你的網站，讓變更生效。

現在，聊天機器人就會出現在你已發布 Webflow 網站的每個頁面上。

選項 B：僅限特定頁面安裝

如果你只想在特定頁面顯示聊天機器人（例如你的價格頁面與聯絡頁面，但不含部落格）：

1. 在 Webflow Designer 中，開啟你想要加入聊天機器人的頁面。
2. 開啟**「Page Settings」**（Pages 面板中該頁面名稱旁的齒輪圖示）。
3. 捲動到**「Custom Code」**區塊。
4. 將指令碼標籤貼在Before </body> tag欄位中。
5. 點選**「Save」，接著「Publish」**。

在每個想要顯示聊天機器人的頁面重複以上步驟，沒有貼上 script 的頁面不會顯示聊天機器人。

驗證安裝結果

發布之後：

1. 在新的瀏覽器分頁（或無痕視窗，避免快取影響）開啟你的 Webflow 網站。
2. 尋找頁面角落的聊天氣泡。
3. 點選氣泡並傳送一則測試訊息。
4. 確認回覆內容準確，樣式也正常顯示。
5. 在手機上測試，確認小工具在較小螢幕上也能正常顯示。

如果發布後聊天機器人沒有立即出現，請強制重新整理頁面（Ctrl+Shift+R 或 Cmd+Shift+R）。Webflow 的 CDN 可能需要一點時間才能同步更新後的程式碼。

步驟 5：設定網域限制

聊天機器人上線後，將它限制在你的網域，防止被嵌入到未經授權的網站上。

1. 在 Agentkit 儀表板中，前往你聊天機器人的**「設定」**。
2. 在**「網域限制」**中，加入你的 Webflow 網站網域（例如 yoursite.com）。
3. 如果你也使用 Webflow 預設網域（yoursite.webflow.io），請一併加入。

聊天機器人只會在指定的網域上載入，防止任何人複製你的嵌入程式碼，在他們自己的網站上使用你的聊天機器人（以及消耗你的訊息額度）。

Webflow 專屬技巧

搭配 Webflow 互動效果使用

如果你的 Webflow 網站使用大量互動效果與動畫，聊天機器人小工具會獨立載入，不會與它們互相干擾。小工具採用固定位置的覆蓋層，因此會顯示在頁面內容之上，不受 Webflow 的 transform 或捲動觸發動畫影響。

CMS 集合頁面

如果你有 Webflow CMS 部落格或作品集，以全站方式安裝的聊天機器人，會出現在每個 CMS 集合頁面上。請以整個網站網址訓練聊天機器人，讓它也能回答關於任何內容（包含 CMS 頁面）的問題。

如果你的 CMS 內容經常變動，可以考慮內含自動重新訓練功能的 Standard 方案（每月 $119.99），聊天機器人會定期重新檢索你的網站，自動掌握新的 CMS 項目。

Webflow 電子商務

若是 Webflow 電子商務網站，請用你的產品頁面、運送政策、退貨政策與常見問題訓練聊天機器人。它就能回答產品相關問題、說明運送選項，並處理退貨詢問。詳細設定建議請見我們的電子商務聊天機器人指南。

測試環境 vs. 正式環境

如果你在發布到自訂網域前，會先用 Webflow 的測試環境（yoursite.webflow.io）進行測試，可以將聊天機器人的 script 同時加到兩個環境，再用網域限制控管聊天機器人在哪個網域生效。測試期間允許兩個網域，正式上線後則只限制在你的自訂網域。

效能影響

Agentkit 小工具採非同步載入（注意指令碼標籤中的 async 屬性），這代表它不會阻擋你的頁面載入，而是在頁面內容準備好之後，於背景載入。對你 Webflow 網站的載入時間或 Lighthouse 分數，不會有可觀測的影響。

在 Webflow 上收集潛在客戶

放在你 Webflow 網站上的聊天機器人，除了是客服工具，也是潛在客戶收集工具。願意與聊天機器人互動的訪客，已經展現出興趣；在對的時機收集他們的電子郵件，就能把一個隨意瀏覽的訪客，轉化為後續跟進的機會。

設定潛在客戶收集

1. 在 Agentkit 儀表板中，前往你聊天機器人的**「動作」**。
2. 啟用**「收集潛在客戶」**，將姓名與電子郵件設為必填欄位。
3. 在聊天機器人的指示中，設定表單何時出現：「在回答訪客關於服務或價格的問題後，主動提議寄送更多詳細資訊，並使用潛在客戶收集表單收集對方的電子郵件。」

將潛在客戶串接到你的工具

Zapier、Webhook 與 REST API 存取權限，自 Hobby 方案（每月 $29.99）起即可使用。

想深入了解潛在客戶收集策略，請參閱如何用聊天機器人開發潛在客戶。

貼合你的 Webflow 設計

你的 Webflow 網站有一套特定的設計語言，以下是讓聊天機器人融入其中、而不是格格不入的方法。

品牌色彩。 從 Webflow 樣式面板複製你主要品牌色的確切色碼，用它作為聊天機器人小工具的顏色，確保聊天氣泡與標頭與你的網站融為一體。

字體一致性。 聊天機器人小工具採用簡潔的系統字型組合，能與大多數 Webflow 字體選擇搭配良好，小工具的文字風格刻意保持中性，不會與自訂字體衝突。

間距與位置。 如果你的 Webflow 網站有固定頁尾、浮動 CTA 按鈕，或 Cookie 橫幅，請將聊天機器人放在相反的一側，避免重疊。你可以在聊天機器人設定中選擇左下角或右下角。

歡迎訊息語氣。 用與你 Webflow 網站文案相同的語氣撰寫歡迎訊息與建議訊息。如果你的網站風格輕鬆親切，聊天機器人也該如此；如果你的網站專業正式，聊天機器人也應該反映這一點。

衡量你 Webflow 網站上的聊天機器人成效

聊天機器人運作幾週後，到 Agentkit 儀表板檢視它的表現。

第一個月請每週檢視對話記錄，這正是你能找到快速改善機會的地方：那些聊天機器人回答不好、但只要加一組問與答就能輕鬆修正的問題，以及那些回答正確、可以用來驗證訓練方向的問題。

Webflow 網站適用的 Agentkit 方案

所有付費方案改採年繳，皆可省下約 20% 費用。大多數 Webflow 網站會先從 Free 方案開始測試，等看到聊天機器人確實在處理真實訪客問題後，再升級到 Hobby 方案。

常見問題排解

發布後聊天機器人沒有出現。 Webflow 的 CDN 可能需要幾分鐘才能同步，請先強制重新整理頁面。如果仍然沒有出現，請確認 script 是否放在正確的 Custom Code 欄位中（Project Settings 的 Footer Code，或 Page Settings 的 Before </body> tag）。

聊天機器人在 Designer 中出現，但正式網站上沒有（或相反）。 Designer 預覽畫面不會執行自訂 script，你只會在已發布的網站上看到聊天機器人，這是 Webflow 的正常行為。

聊天機器人與 Webflow 元素重疊。 在 Agentkit 設定中變更聊天機器人的位置（左下角或右下角），或是調整該 Webflow 元素的 z-index，讓它顯示在聊天機器人之上。

聊天機器人給出錯誤答案。 到對話記錄中檢視該特定問題，接著新增或更新一組帶有正確答案的問與答，問與答會覆蓋掉相符問題的檢索內容。

聊天機器人在特定頁面沒有載入。 如果你使用的是僅限特定頁面的安裝方式，請確認該頁面的 Custom Code 設定中確實有 script。如果你使用全站安裝，請檢查是否有衝突的 script 或安全性標頭正在封鎖它。

開始上手

在 Webflow 網站加入 AI 聊天機器人，是投入最少、成效卻最顯著的改變之一。只要一段指令碼標籤，你就能擁有一個全天候的助理，回答訪客問題、收集潛在客戶，並提升每一位訪客的體驗。

1. 註冊 Agentkit（免費）。
2. 建立一個聊天機器人，用你的 Webflow 網站網址訓練它。
3. 針對訪客最常問的問題新增問與答。
4. 客製化小工具，貼合你的品牌。
5. 把嵌入程式碼貼到 Webflow 的 Custom Code 設定中。
6. 發布並測試。

整個過程大約需要 20 分鐘，你的聊天機器人會立刻開始回答真實訪客的問題。

免費建立你的聊天機器人 →

不需信用卡。