網站 Webchat

把聊天機器人放進你自己的網站：訪客點右下角的聊天按鈕就能提問，AI 用同一套知識庫與流程回答。

概述

Webchat 是嵌入網站的聊天視窗，不需要另外串接任何平台帳號，專案建立後就能使用。網站訪客的對話會進到同一個聊天室，和 LINE、Facebook、Instagram 的訊息一起管理。

設定位置：專案「設定 → Webchat」，分成三個區塊：

外觀： 品牌名稱、歡迎訊息、品牌主色與 Logo
聊天按鈕位置與人工客服轉接
發佈與安裝： 公開聊天連結與嵌入程式碼

畫面右側的「即時外觀預覽」可切換桌機與手機，邊調整邊確認效果；也可以點「在新分頁測試完整 Webchat」實際對話看看。有未儲存的修改時會出現儲存列，按「儲存變更」才會套用到網站。

外觀

欄位	用途
品牌名稱	顯示在聊天視窗的標題列
歡迎訊息	顯示在聊天按鈕旁，訪客打開聊天前就看得到，建議簡短
品牌主色	聊天按鈕與聊天視窗的識別色
品牌 Logo	同時作為聊天按鈕圖示。支援 PNG、JPG、GIF，建議使用正方形圖片

訪客打開聊天視窗後看到的第一段對話，來自流程設計器裡的歡迎流程，不是這裡的歡迎訊息。

聊天按鈕位置

右下角： 多數網站的預設位置
左下角： 網站右下角已經有其他按鈕（例如回到頂端、購物車）時使用

另外可以分別設定桌機與手機的水平、垂直邊距，避免聊天按鈕蓋住網站原有的元素。

安裝到網站

在「發佈與安裝」區塊選擇安裝方式，點「複製程式碼」。程式碼裡已經帶好你的專案 ID，直接貼上即可。

直接嵌入網站
Google Tag Manager

適合可以編輯網站 HTML 的情況。把程式碼貼在網站每一頁的 </body> 標籤之前（通常是共用的頁尾範本），程式碼長這樣：

<script>
  window.ChatbottaConfig = { chatbotId: '你的專案 ID' };
</script>
<script src="https://app.chatbotta.com/webchat-widget.js" async></script>

使用 WordPress、Shopify、Wix 等架站平台時，貼到平台提供的「自訂程式碼」或主題範本中、會在每一頁載入的位置即可。

貼上後重新整理網站，畫面角落就會出現聊天按鈕。

公開聊天連結

不想改網站、或還沒有網站時，可以使用「公開聊天連結」：一個獨立的聊天頁面網址，可以放在社群貼文、Email 簽名、QR Code 或按鈕上，也很適合在正式安裝前先測試。

人工客服轉接

網站訪客多半是匿名的過路客。開啟轉接後，需要真人協助的訪客可以把整段對話帶到 LINE 或 Messenger，客服在聊天室看到完整脈絡，接著回覆。

LINE 轉接： 開啟後，訪客可透過已連接的 LINE 官方帳號繼續與客服對話
Facebook Messenger 轉接： 選擇一個已連接的粉絲專頁，訪客會被引導到該專頁的 Messenger

這個區塊需要先連接 LINE 或 Facebook 粉絲專頁。轉接時訪客會拿到一組一次性的短代碼，加入官方帳號後輸入，網頁對話就會搬過去，訪客不用重講一次。流程介紹見官網訪客轉 LINE。

JavaScript API

嵌入程式碼載入後，網站可以透過 window.Chatbotta 用程式碼控制聊天視窗，例如在商品頁讓機器人主動介紹、或把會員編號帶進對話。

方法	作用
`Chatbotta.open()` / `Chatbotta.close()`	開啟或關閉聊天視窗，可接在網站自己的「聯絡客服」按鈕上
`Chatbotta.triggerFlow('節點 ID')`	讓機器人從指定節點開始說話。新訪客會以這個節點取代歡迎流程；回訪的訪客則接在原本的對話後面
`Chatbotta.sendMessage('文字')`	以訪客身分送出一則訊息，機器人會照一般輸入回覆
`Chatbotta.setVariables({ 變數名稱: 值 })`	依變數名稱寫入這位訪客的變數，流程中可用 `@變數名稱` 讀取
`Chatbotta.on('ready' \| 'open' \| 'close', 函式)`	在聊天視窗就緒、開啟或關閉時執行你的程式碼

triggerFlow 與 sendMessage 預設會同時開啟聊天視窗；如果只想在背景準備好訊息，可以加上 { open: false }。

<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>

在嵌入程式碼載入完成前呼叫也沒關係，指令會排隊，等聊天視窗就緒後依序執行。

疑難排解

網站上沒有出現聊天按鈕

確認程式碼貼在每一頁都會載入的位置，且兩段 <script> 都有貼上
使用 GTM 時，確認代碼的觸發條件是所有網頁，且容器已經發布（只儲存不會生效）
網站有快取或 CDN 時，清除快取後再試
打開瀏覽器開發者工具的 Console，查看是否有載入錯誤；網站若設有 Content Security Policy，需要允許載入 app.chatbotta.com

聊天按鈕蓋住網站的其他按鈕

改用左下角，或調整桌機、手機的邊距。

JavaScript API 沒有作用

確認是在嵌入程式碼載入後呼叫，或使用上面範例的 withChatbotta 寫法
triggerFlow 的節點必須已經發布
Console 出現 [Chatbotta] 警告時，依訊息檢查節點 ID 或變數設定

人工客服轉接顯示「尚未連接可用的客服頻道」

需要先在「設定 → 頻道串接」連接 LINE 官方帳號或 Facebook 粉絲專頁，點提示裡的「前往頻道串接」即可。