這篇會帶你把 Teasweb 的官網聊天完整上線，適用於一般官網、品牌官網、產品網站與落地頁。依照步驟完成後，你的網站右下角會出現聊天泡泡，訪客可以直接留言，你在 Teasweb 後台就能即時收到並回覆。
適合誰
1. 有官網、品牌網站、產品頁、落地頁的公司
2. 想降低客服成本、提升回覆速度
3. 需要留存對話、統一客服入口
你會完成的事情
1. 建立一個「Website Inbox」
2. 取得前端嵌入碼
3. 貼到官網（含 CMS / 部落格 / HTML）
4. 測試是否成功收到訊息
—
前置準備
1. 你已登入 Teasweb 後台
2. 你有網站的管理權限（可改 HTML / 佈景主題 / 插入腳本）
—
步驟一：建立 Website Inbox
1. 進入 Teasweb 後台
2. 前往 `Settings` → `Inboxes`
3. 點 `Add Inbox`
4. 選擇 `Website`
5. 輸入 Inbox 名稱（例如：官網客服）
6. 完成建立
完成後，你會看到「Website Token」與嵌入碼。
—
步驟二：取得嵌入碼
在剛建立的 Website Inbox 頁面，複製以下類似的程式碼（系統會提供你的專屬 token）：
```html
<script>
(function(d,t) {
var BASE_URL="https://chat.teasweb.com";
var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
g.src=BASE_URL+"/packs/js/sdk.js";
g.async = true;
s.parentNode.insertBefore(g,s);
g.onload=function(){
window.chatwootSDK.run({
websiteToken: '你的網站Token',
baseUrl: BASE_URL
})
}
})(document,"script");
</script>
```
—
步驟三：貼到官網
請將嵌入碼貼到網站的 `</body>` 結束標籤之前，常見位置如下：
1. 一般 HTML 網站
放在所有頁面共同的版型檔案（例如 footer 或 layout）
2. WordPress
可用外掛或放在主題的 `footer.php` / `header.php`
3. Shopify
進入 `Online Store` → `Themes` → `Edit code` → 找 `theme.liquid`，貼在 `</body>` 前
4. Webflow / Wix / 其他 CMS
通常可在「自訂程式碼」或「頁尾程式碼」區插入
—
步驟四：測試是否成功
1. 用無痕視窗開啟官網
2. 右下角應出現聊天泡泡
3. 送出一則訊息
4. 回到 Teasweb 後台 → `Conversations` 應看到新對話
若沒有出現泡泡：
1. 確認是否貼在 `</body>` 前
2. 確認 `BASE_URL` 是 `https://chat.teasweb.com`
3. 確認 `websiteToken` 正確
4. 清除瀏覽器快取後重試
—
常見問題
Q1：一定要每個頁面都貼嗎？
A：只要貼在全站共用的版型檔案（layout / theme）就好。
Q2：會不會影響網站速度？
A：聊天腳本為非同步載入，對效能影響極小。
Q3：可以只在某些頁面顯示嗎？
A：可以。只在特定頁面插入嵌入碼即可。
Q4：可以改成 Teasweb 的品牌嗎？
A：可以，已支援品牌化設定（Logo / 文字），若需要自訂可聯繫我們。
—
進階建議
1. 建議設定客服「營業時間」
2. 建議設定預設自動回覆（歡迎訊息）
3. 可搭配 FAQ / Prompt 提升 AI 回覆品質
—
完成後你就有官網即時客服了
如果想接著整合 LINE、Email、WhatsApp 或 API，請看下一篇教學。