網站要不要加即時客服？5 分鐘把 AI 聊天小工具嵌入你的網站

訪客逛到你的網站，對商品有個小疑問——找不到答案，他不會寫信問你，他會直接關掉分頁。 網站右下角那顆聊天按鈕(Webchat)存在的意義，就是在疑問出現的當下接住它。 這篇文章幫你評估網站客服的選項，並示範如何把 AI 網站聊天嵌入自己的網站。

網站客服的三種選項

• 真人線上客服：體驗最好，但需要人力輪班；下班時間與假日形同虛設
• 傳統客服外掛：本質是留言表單或罐頭訊息，訪客得到回覆前早已離開
• AI 聊天機器人 + 真人備援：AI 依知識庫即時回答大部分常見問題，答不了的轉真人。這是目前性價比最高的做法

步驟一：準備好你的聊天機器人

網站聊天只是一個「頻道」，背後回答問題的是你的聊天機器人。如果還沒有，先照 這篇教學建立專案、 把常見問答放進 AI 知識庫——同一個機器人可以同時服務 LINE 與網站，不用重做。

步驟二：設定網站聊天（Webchat）外觀

在專案的「頻道」按「新增頻道」選「網站聊天」，或到「設定」›「網站聊天」（詳見網站聊天說明）:

• 設定品牌名稱、招呼訊息、品牌主色與 Logo，讓聊天視窗和你的網站風格一致
• 選擇聊天按鈕位置（左下/右下）與電腦、手機上和畫面邊緣的距離
• 視需求在「訪客想找真人時」選擇已連線的 LINE 官方帳號或粉絲專頁，讓訪客能到 LINE 或 Messenger 延續對話

步驟三：嵌入你的網站

在「把程式碼貼到網站」這一步複製程式碼，貼到網站每一頁的 </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 代碼後發布容器即可

進階：讓網站主動發起對話

嵌入後，網站的 JavaScript 可以透過 window.Chatbotta 控制聊天視窗。 例如訪客在方案頁停留時，讓機器人從「方案介紹」這一步主動開口，並把會員編號帶進對話：

<script>
  function withChatbotta(fn) {
    if (window.Chatbotta) fn(window.Chatbotta)
    else window.addEventListener('chatbotta:ready', function () { fn(window.Chatbotta) }, { once: true })
  }
  withChatbotta(function (chat) {
    chat.setVariables({ member_id: 'A123' })
    chat.triggerFlow('方案介紹這一步的步驟 ID')
  })
</script>

• 步驟 ID:在流程中點選步驟打開「步驟設定」，展開「進階」，在「步驟 ID」旁按「複製」；步驟必須已經發布
• 欄位:需先在欄位面板選擇「開放網頁設定」，且只接受文字與數字
• 其他功能:還能開關視窗、以訪客身分送出訊息，完整說明見網站聊天 JavaScript API 說明

步驟四：實測與管理

• 用無痕視窗打開你的網站，實際點開聊天按鈕問幾個問題
• 網站訪客的對話會進入聊天室，與 LINE、Messenger、Instagram 的對話統一管理
• 需要真人時，小編在聊天室直接接手，訪客會在聊天視窗看到真人客服的回覆

想進一步了解網站 AI 客服的完整功能？ 參考 網站 AI 客服(Webchat)功能介紹。

常見問題