如何在網站上新增線上客服插件？5分鐘完成部署
網頁客服插件（Live Chat Widget）只需一段程式碼即可嵌入任何網站。本文介紹完整安裝步驟、常見問題和選購建議，適合非技術人員閱讀。
TL;DR — 在任何網站上新增線上客服插件只需要 4 步：註冊帳號 → 複製一段 JavaScript 程式碼 → 貼上到網頁 → 重新整理驗證。整個過程不需要懂程式設計，5 分鐘內可以完成。
每天有多少訪客在你的網站上瀏覽了幾分鐘，然後悄悄關掉分頁——沒有留下任何聯絡方式，沒有問任何問題？
網頁客服插件（Live Chat Widget）就是為了解決這個問題而存在的。一段程式碼嵌入網站，訪客點擊右下角的氣泡圖示就能與客服即時對話，無需跳轉頁面、無需下載 App。
安裝步驟（通用流程）
無論使用哪款線上客服軟體，安裝流程基本一致：
第一步：註冊並登入客服平台
訪問你選擇的客服平台官網，註冊帳號。好的平台不需要提供營業執照或實名認證——信箱加密碼即可完成註冊，幾分鐘內就能進入後台。
第二步：建立對話頻道
登入後台，在「對話」或「頻道」設定中建立一個新的聊天連結。系統會自動產生一段 JavaScript 嵌入程式碼。
第三步：複製嵌入程式碼
程式碼通常類似這樣：
<script>
(function(d,t) {
var BASE_URL="https://your-domain.com";
var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
g.src=BASE_URL+"/sdk.js";
g.defer = true;
g.async = true;
s.parentNode.insertBefore(g,s);
g.onload=function(){
window.ChatWidget.init({
baseUrl: BASE_URL,
// lang: 'zh-TW' // 可選: 'zh-CN' | 'zh-TW' | 'en'
});
}
})(document,"script");
</script>注意程式碼裡的 async 屬性——這確保插件程式碼非同步載入，不會阻塞頁面渲染，對 Lighthouse 評分沒有影響。
第四步：貼上到你的網站
將程式碼貼上到網站每個頁面的 </body> 標籤之前（或 <head> 內）。
不同建站平台的操作位置：
| 平台 | 操作位置 |
|---|---|
| WordPress | 外觀 → 佈景主題檔案編輯器 → footer.php，或安裝「Insert Headers and Footers」插件 |
| Shopify | 線上商店 → 佈景主題 → 編輯程式碼 → theme.liquid 檔案末尾 |
| 自建 HTML 網站 | 直接貼上到每個 .html 檔案的 </body> 前 |
| Webflow | 專案設定 → 自訂程式碼 → Footer Code |
| Wix | 設定 → 進階 → 自訂程式碼 |
| Next.js / React | 加入到 _document.tsx 或 layout.tsx 的 <body> 末尾 |
第五步：驗證安裝
儲存修改並重新整理你的網站，右下角應該出現聊天氣泡圖示。點擊圖示，傳送一則測試訊息，在客服後台確認能收到——整個驗證過程不超過 2 分鐘。
安裝後必做的三項設定
裝上插件只是開始。這三項設定直接決定實際效果：
觸發器：變被動等待為主動觸達
預設情況下，只有訪客主動點擊氣泡才會發起對話。但大多數訪客不會主動開口——他們會在猶豫中離開。
觸發器能改變這個局面。三個最有效的設定：
- 訪客在定價頁停留 30 秒後自動彈出問候（購買意向最強的時刻）
- 訪客即將離開頁面時觸發（挽回最後一次機會）
- 訪客訪問次數超過 3 次但未註冊時觸發（回頭客，有意向但有顧慮）
主動觸達的轉換效果，通常遠好於被動等待。
詢前表單：留存線索 vs. 降低摩擦
要求訪客在對話前填寫姓名和信箱，好處是即使客服離線，聯絡方式也不會遺失。代價是多一步操作，發起對話的比例會下降。
選擇建議：
- 銷售導向型業務 → 開啟詢前表單，線索比對話量更重要
- 即時支援場景 → 關閉或只保留非必填欄位，降低摩擦優先
離線狀態：客服下班後怎麼辦
三種方案，按效果排序：
- 切換 AI 機器人自動回覆 — 全天候回應，不讓夜間諮詢石沉大海（需平台支援 AI 模組）
- 顯示離線提示 + 留言表單 — 訪客留下聯絡方式，客服上班後跟進
- 隱藏聊天入口 — 適合只有固定客服時段、不希望產生錯誤期待的場景
選購時必須確認的四件事
市面上的客服插件從免費到每月數千元不等。付錢前先確認這四點：
① 支援你的建站平台嗎？
優先選提供通用 JS 程式碼的方案——相容所有網站，不依賴特定插件生態。在你的實際環境裡裝一遍，不要只看截圖。
② 開通需要提交什麼資料？
部分平台要求營業執照、身分證件或行業資質審核。如果你需要快速上線，選擇信箱註冊即可開通、無 KYC 要求的平台。
③ 資料存在哪裡？
對話記錄儲存在哪個國家的伺服器？是否符合你所在地區的合規要求？跨境業務尤其要問清楚。
④ 按座位收費還是按對話量收費？
按座位收費更容易預算；按對話量收費在活動大促期間成本會急劇上升，要算清楚峰值場景下的費用。
試用期裡必須測這三件事
功能示範看起來都很好用，試用期才是真正的測試機會。
測穩定性：找 3–5 個人同時給你傳訊息，看有沒有延遲和訊息遺失。高峰期的並發處理能力才是最關鍵的。
測多語言（如果需要）：讓一個說英語或其他語言的人傳訊息，看翻譯品質是否達到實際使用要求。不要只測中文。
測轉人工流程：當 AI 無法回答時，轉人工的體驗是否流暢？使用者等待時間多久？這直接影響使用者對服務的整體印象。
常見問題
客服插件會拖慢網站載入速度嗎？
不會。設計合格的插件程式碼是非同步載入的（async 屬性），不阻塞頁面渲染。對載入速度的影響通常在 50–100ms 以內，Lighthouse 評分不受影響。
可以自訂聊天視窗的外觀嗎？
可以。顏色、Logo、問候語、氣泡位置都能調整。專業版以上通常支援完全白標——訪客看不到任何第三方平台的標識。
訪客用手機能正常使用嗎？
訪客端完全相容手機瀏覽器，無需額外設定。客服端通常有配套 App，方便在手機上處理對話，不錯過訊息。
一個帳號可以在多個網站使用嗎？
取決於方案。部分平台支援多網域部署，透過對話來源區分流量。如果你管理多個品牌或站台，購買前確認網域限制。
對話資料可以匯出備份嗎？
正規平台支援匯出歷史對話為 Excel 或 CSV，包含對話內容、訪客資訊、時間戳，用於資料分析和合規存檔。
按照本文的步驟，5 分鐘內可以完成部署。Qiabot 提供通用 JavaScript 嵌入程式碼，相容所有主流建站工具，信箱註冊即可取得，無需提交任何資質材料——現在註冊，今天就能上線。
