文件

Framer

使用 Custom Code 將你的代理程式新增至 Framer 網站。

透過 Custom Code 將你的 AI 代理程式新增至 Framer 網站。此程式碼片段在網站發布後，會載入到每個頁面上。

首先，從後台的 Chatbot > 發布 取得你的嵌入程式碼。

快速設定

  1. 在 Framer 中開啟你的專案。
  2. 在左側邊欄點選 Project Settings（齒輪圖示）。
  3. 選擇 Custom Code 分頁。
  4. 點選 + Add Script。
  5. 為指令碼取一個容易辨識的名稱（例如 Agentkit Widget）。
  6. 將嵌入程式碼貼到指令碼內容中。
  7. 在放置位置中選擇 End of <body> tag（Body End）——這是聊天小工具建議使用的選項。
  8. 選擇載入於 All pages。
  9. 點選 Save。
  10. 點選右上角的 Publish，將更新推送上線。

範例格式（請使用 Chatbot > 發布 中的實際值）：

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

為什麼要放在 <body> 結尾，而不是 Head

Framer 將 Custom Code 分為 Head Code 與 End of <body> Code 兩種。聊天小工具應放在 <body> 結尾，這樣才不會拖延頁面的首次繪製——這也與指令碼上的 async 屬性相符。

Head Code 則保留給必須極早執行的項目，例如分析像素或字型預先載入。

個別頁面安裝

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

  1. 在 Framer 的圖層面板中選取一個頁面。
  2. 開啟 Page Settings（右側面板）。
  3. 在該處新增 Custom Code，而非在 Project Settings 中新增。

頁面層級的程式碼只會在該特定頁面上執行。

方案與網域

  • Framer 網站都能使用 Custom Code，但若要在自訂網域（非 *.framer.website）上執行，通常需要付費方案。
  • 只要你的方案允許在預設的 *.framer.website 網址上使用 Custom Code，小工具就能正常運作。

發布之後

Framer 的 Custom Code 不會在編輯器或預覽畫面中執行——只會在已發布的網站上執行。點選 Save 後，再點選 Publish，接著開啟正式網址確認。

疑難排解

小工具沒有出現在編輯器預覽中。

  • 這是正常現象。Custom Code 只會在已發布的網站上執行。

小工具在已發布的網站上也沒有出現。

  • 確認你已同時點選 Save 與 Publish。
  • 確認你的網域已列在 Chatbot > 發布 > 安全性 的允許清單中。
  • 強制重新整理頁面（⌘+Shift+R）以繞過 CDN 快取。

小工具閃現後隨即消失。

  • 檢查是否有 Framer 的頁面轉場或動畫效果導致 DOM 重新載入。小工具應該會在每次頁面載入時重新掛載——如果沒有，請聯絡支援團隊。

測試

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

後續步驟