Framer
使用 Custom Code 將你的代理程式新增至 Framer 網站。
透過 Custom Code 將你的 AI 代理程式新增至 Framer 網站。此程式碼片段在網站發布後，會載入到每個頁面上。
在 Agentkit 開啟 Channels → Website embed → Chat widget，啟用頻道並複製完整的產生程式碼。程式碼包含內嵌的初始化指令碼，以及另外載入小工具的指令碼。
快速設定
- 在 Framer 中開啟你的專案。
- 在左側邊欄點選 Project Settings（齒輪圖示）。
- 選擇 Custom Code 分頁。
- 若這是第一筆程式碼，請點選 Add Script；否則請點選 + 圖示。
- 為指令碼取一個容易辨識的名稱（例如 Agentkit Widget）。
- 將產生的兩個 script 標籤一起貼到 Custom Code 欄位。不要修改指令碼網址或代理程式 ID。
- 在放置位置中選擇 End of
<body>tag（Body End）——這是聊天小工具建議使用的選項。 - 選擇載入於 All pages。
- 點選 Save。
- 點選右上角的 Publish，將更新推送上線。
不要使用只有一個指令碼標籤的範例，也不要自行輸入小工具網址。發布後，檢查頁面原始碼是否包含兩個產生的 <script> 標籤，再開啟小工具並傳送測試訊息。JavaScript 小工具指南 →
為什麼要放在 <body> 結尾，而不是 Head
Framer 將 Custom Code 分為 Head Code 與 End of <body> Code 兩種。聊天小工具應放在 <body> 結尾，這樣才不會拖延頁面的首次繪製——這也與指令碼上的 async 屬性相符。
Head Code 則保留給必須極早執行的項目，例如分析像素或字型預先載入。
個別頁面安裝
若只想在特定頁面載入小工具：
- 在 Framer 的圖層面板中選取一個頁面。
- 開啟 Page Settings（右側面板）。
- 在該處新增 Custom Code，而非在 Project Settings 中新增。
頁面層級的程式碼只會在該特定頁面上執行。
方案與網域
- Framer 要求付費方案才能連接自訂網域。請測試已發布的
*.framer.website網址或已連接的自訂網域。 - 只要你的方案允許在預設的
*.framer.website網址上使用 Custom Code，小工具就能正常運作。
發布之後
Framer 的 Custom Code 不會在編輯器或預覽畫面中執行——只會在已發布的網站上執行。點選 Save 後，再點選 Publish，接著開啟正式網址確認。
疑難排解
小工具沒有出現在編輯器預覽中。
- 這是正常現象。Custom Code 只會在已發布的網站上執行。
小工具在已發布的網站上也沒有出現。
- 確認你已同時點選 Save 與 Publish。
- 檢查已發布 Framer 網域的網域限制。
- 強制重新整理頁面（⌘+Shift+R）以繞過 CDN 快取。
小工具閃現後隨即消失。
- 檢查是否有 Framer 的頁面轉場或動畫效果導致 DOM 重新載入。小工具應該會在每次頁面載入時重新掛載——如果沒有，請聯絡支援團隊。
測試
- 在隱身視窗中開啟已發布的網址。
- 尋找聊天氣泡。
- 點選開啟聊天視窗並傳送一則測試訊息。