功能介紹 使用流程 方案定價 常見問題 推廣合作 實用工具 開發者中心
免費試用 客戶登入
Widget 嵌入

一行代碼 即可上線

把後台產生的嵌入代碼貼到您網站的 </body> 前一行,重新發布。Widget 載入時會自動拉設定、發送心跳、隨時準備接收訪客訊息。

五分鐘上手

不論你的網站是用什麼框架,三步驟搞定

01

從後台複製嵌入代碼

登入 客戶後台,進入您要嵌入的 Bot → 「連線設定」區看到嵌入代碼,按複製。代碼長這樣:

<script src="https://aibot.chungtair.com/static/widget/loader.js" data-token="abcd1234..." async></script>

02

貼到網站的 </body> 前一行

不論您網站是用什麼平台(WordPress / Shopify / 純 HTML / React 等),把代碼貼到 </body> 結束標籤前一行就對了。各平台具體做法看下面。

03

驗證連線

重新整理網站,右下角(或左下角)應出現聊天按鈕。回後台打開「🔍 連線診斷」面板,按「⚡ 立即測試連線」可主動驗證接線成功。

各平台逐步教學

純 HTML 網站

用編輯器打開您的 .html 檔,找到 </body> 標籤,把嵌入代碼貼在它前一行。存檔上傳即可。

WordPress

後台「外觀 → 主題檔案編輯器 → footer.php」,在 </body> 前貼上代碼並儲存。或安裝「Insert Headers and Footers」外掛,把代碼貼到 Footer 區塊。

Shopify

後台「線上商店 → 佈景主題 → 動作 → 編輯程式碼 → Layout/theme.liquid」,在 </body> 前貼上代碼,點儲存。

Wix

編輯器「新增 → 嵌入 → 嵌入 HTML iframe」,貼上代碼。或從「設定 → 自訂代碼」加入到所有頁面。

Squarespace

「設定 → 進階 → 程式碼注入 → Footer」,把代碼貼到 Footer 欄位並儲存。

Webflow

「Project Settings → Custom Code → Footer Code」貼上代碼,重新發布網站。

React / Vue / Next.js 等框架

把代碼放到根 layout(如 Next.js 的 app/layout.tsx、Nuxt 的 nuxt.config.ts,或 index.html)。第一次載入後 SDK 就會掛上,路由切換不會重複注入。

CSP 設定(Content Security Policy)

若您網站有設定 CSP,需要明確放行以下來源讓 Widget 能正常載入與通訊:...

客製化外觀

Widget 的「主色、按鈕位置、Bot 顯示名稱、頭像、歡迎語、輸入框 placeholder」可在後台「Widget 設定」修改。...

接下來

🔍

看 Debug 面板教學

接線後若有問題,Debug 面板能秒看出 HTTP 互動哪裡卡住。

看教學 →
🛠️

常見錯誤排查

「Widget 不顯示」「CORS 擋住」等 10 個常見問題與解法。

看排查 →