文件

Webflow

使用 Project Settings 中的 Custom Code，將你的代理程式加入 Webflow 網站。

將嵌入程式碼貼到 Project Settings → Custom Code，即可把你的 AI 代理程式加入任何 Webflow 網站。這段程式碼片段會自動在每個頁面上載入。

首先，從儀表板的 代理程式 > 發布 取得你的嵌入程式碼。

快速設定

  1. 在 Webflow Designer 中開啟你的專案。
  2. 點選左側邊欄中的 齒輪圖示（Project Settings）。
  3. 前往 Custom Code 分頁。
  4. 捲動至 Footer Code（標示為「Before </body> tag」的欄位）。
  5. 貼上你的嵌入程式碼。
  6. 點選 Save Changes。
  7. 點選右上角的 Publish，將網站發布上線。

範例格式（請使用 代理程式 > 發布 中的實際數值）：

<script
  src="YOUR_WIDGET_URL"
  data-chatbot="YOUR_CHATBOT_ID"
  async
></script>

小工具指令碼的設計是在頁面具備互動性之後才載入。將它貼到 Footer Code 可以避免阻擋初始轉譯，也符合 async 屬性的行為。

方案需求

Custom Code 是否可用，取決於你的 Site plan 等級。Webflow 過去曾限制免費的 Starter 方案使用全站自訂程式碼，且此規則會隨方案版本調整而變動。

請前往 https://webflow.com/pricing 查看 Webflow 的方案比較，以取得目前的規則。如果 Custom Code 分頁顯示鎖頭圖示，或 Footer Code 欄位呈停用狀態，請升級你的 Site plan。

個別頁面安裝

若只想在特定頁面上載入小工具：

  1. 在 Designer 中開啟該頁面。
  2. 點選該頁面上的 Page Settings 齒輪圖示。
  3. 捲動至 Custom Code → Before </body> tag。
  4. 將你的嵌入程式碼貼在這裡，而不是貼到全專案適用的欄位。

頁面層級的程式碼會針對該特定頁面覆寫並疊加專案層級的程式碼。

發布後

自訂程式碼只會在 已發布 的網站上執行，Designer 預覽畫面中不會執行。儲存後，請點選 Publish 並選擇你的網域：

  • *.webflow.io —— 預備環境網域
  • 你連結的 自訂網域（如果有的話）

請發布到你實際想要測試的網域。

疑難排解

小工具沒有出現在 Designer 預覽畫面中。

  • 這是預期行為。Custom Code 只會在已發布的網站上執行，請開啟正式上線的網址。

小工具在正式上線的網站上也沒有出現。

  • 確認你已點選 Save Changes 及 Publish。
  • 確認你的網域已在 代理程式 > 發布 > 安全性 中被允許。
  • 執行強制重新整理（⌘+Shift+R）以略過 CDN 快取。

Custom Code 欄位呈停用狀態。

  • 你的 Site plan 等級未包含 Custom Code，請前往 https://webflow.com/pricing 升級。

測試

  1. 在無痕視窗中開啟已發布的網站。
  2. 尋找聊天氣泡。
  3. 點選開啟並傳送一則測試訊息。

後續步驟