網站要不要加即時客服？5 分鐘把 AI 聊天小工具嵌入你的網站
Chatbotta 創易聊 · 2026 年 8 月 6 日
訪客逛到你的網站，對商品有個小疑問——找不到答案，他不會寫信問你，他會直接關掉分頁。 網站右下角那顆聊天按鈕(Webchat)存在的意義，就是在疑問出現的當下接住它。 這篇文章幫你評估網站客服的選項，並示範如何把 AI Webchat 嵌入自己的網站。
網站客服的三種選項
- 真人線上客服：體驗最好，但需要人力輪班；下班時間與假日形同虛設
- 傳統客服外掛：本質是留言表單或罐頭訊息，訪客得到回覆前早已離開
- AI 聊天機器人 + 真人備援：AI 依知識庫即時回答大部分常見問題，答不了的轉真人。這是目前性價比最高的做法
步驟一：準備好你的聊天機器人
Webchat 只是一個「頻道」，背後回答問題的是你的聊天機器人。如果還沒有，先照 這篇教學建立專案、 把常見問答放進 AI 知識庫——同一個機器人可以同時服務 LINE 與網站，不用重做。
步驟二：設定 Webchat 外觀
在專案的「設定 → Webchat 設定」中（詳見文檔）:
- 設定品牌名稱、歡迎訊息、品牌主色與 Logo，讓聊天視窗和你的網站風格一致
- 選擇聊天按鈕位置（左下/右下）與桌機、手機的邊距
- 視需求開啟「人工客服轉接」，讓訪客能透過 LINE 延續對話
步驟三：嵌入你的網站
在 Webchat 設定頁複製嵌入程式碼，貼到網站每一頁的 </body> 之前，格式像這樣：
<script>
window.ChatbottaConfig = { chatbotId: '你的專案 ID' };
</script>
<script src="https://app.chatbotta.com/webchat-widget.js" async></script>- 一般網站 / WordPress:貼進佈景主題的 footer 或用外掛插入
- Google Tag Manager:設定頁提供 GTM 專用版本，新增 Custom HTML 代碼後發布容器即可
💡 沒有網站工程師？設定頁也提供「公開聊天連結」——一條可以直接分享的聊天頁網址，放在名片、社群簡介或 QR Code 都行。
步驟四：實測與管理
- 用無痕視窗打開你的網站，實際點開聊天按鈕問幾個問題
- 網站訪客的對話會進入聊天室，與 LINE、Messenger、Instagram 的對話統一管理
- 需要真人時，小編在後台「轉人工接手」即可無縫接管
想進一步了解網站 AI 客服的完整功能？ 參考 網站 AI 客服(Webchat)功能介紹。
常見問題
Q: 嵌入 Webchat 會拖慢網站速度嗎？
A: 嵌入程式碼使用 async 非同步載入，不會阻塞網頁渲染；聊天視窗本體在訪客點開聊天按鈕時才載入，對網站速度影響極小。
Q: 我的網站是用 WordPress / Shopify / Wix 做的，可以裝嗎？
A: 可以。只要平台允許加入自訂 HTML 或透過 Google Tag Manager 插入程式碼，就能安裝 Webchat，不限網站技術。
Q: 網站訪客的對話，和 LINE 的對話會分開管理嗎？
A: 不會分開。Webchat 是與 LINE、Messenger、Instagram 並列的頻道，所有對話進到同一個聊天室後台統一管理，共用同一套對話流程與知識庫。