找我們做網站
↑
Wordpress · WordPress 外掛推薦

tawk.to 教學:WordPress 免費線上客服外掛安裝與對話框設定

WordPress 外掛推薦發布 2018.02.12更新 2026.10.02閱讀約 6 分鐘
tawk.to 教學:WordPress 免費線上客服外掛安裝與對話框設定

重點整理
tawk.to 是免費的網站線上客服系統,官方說明不限客服人數、對話量與網站數量;只有移除「Powered by tawk.to」字樣、AI 自動回覆、代僱客服人員等加值服務要付費。WordPress 網站只要三步:到 tawk.to 免費註冊並建立網站資源 → 安裝 Tawk.To Live Chat 外掛(2026 年 10 月版本 0.9.3、啟用網站超過 10 萬個)→ 在「設定 > Tawk.to」登入帳號並選擇對話小工具。用外掛就不需要再到佈景主題貼程式碼。

訪客在商品頁想問規格、價格或售後服務,如果只能留言等回覆,等個兩三天,購買意願早就沒了,甚至轉去別家。網站角落放一個即時對話框,訪客當下就能問,你也能用電腦或手機 App 立刻回覆。這篇示範 tawk.to 的註冊、在 WordPress 安裝外掛與設定顯示頁面,以及在 tawk.to 後台調整對話框顏色、語言與新增客服人員。

步驟一:安裝 Tawk.To Live Chat 外掛

到 WordPress 後台「外掛 >安裝外掛」,搜尋 tawk.to,找到 Tawk.To Live Chat 後按「立即安裝」,再按「啟用」。

在 WordPress 安裝外掛頁面搜尋 Tawk.to Live Chat
在 WordPress 安裝外掛頁面搜尋 Tawk.to Live Chat
Tawk.to Live Chat 外掛的立即安裝按鈕
Tawk.to Live Chat 外掛的立即安裝按鈕
Tawk.to Live Chat 安裝完成後的啟用按鈕
Tawk.to Live Chat 安裝完成後的啟用按鈕

啟用後到「設定 > Tawk.to」,會看到登入畫面。這裡要用 tawk.to 的帳號登入,所以接下來先去官網註冊。

WordPress 設定選單中的 Tawk.to 項目
WordPress 設定選單中的 Tawk.to 項目
Tawk.to 外掛設定頁的登入畫面
Tawk.to 外掛設定頁的登入畫面

步驟二:註冊 tawk.to 帳號並建立網站

到 tawk.to 官網 免費註冊,填寫名稱、Email 與密碼即可。註冊畫面與流程會隨官網改版調整,下圖為舊版畫面,欄位大致相同。

tawk.to 官網註冊畫面(舊版),輸入名稱、電子信箱與密碼
tawk.to 官網註冊畫面(舊版),輸入名稱、電子信箱與密碼

接著選擇介面語言,選繁體中文後,tawk.to 後台與網站上的對話框都會是中文。

tawk.to 註冊流程中選擇介面語言
tawk.to 註冊流程中選擇介面語言

然後輸入網站名稱與網址,建立這個網站的「資源」(Property)。一個帳號可以管理多個網站。

輸入網站名稱與網址建立 tawk.to 網站資源
輸入網站名稱與網址建立 tawk.to 網站資源
網站資源建立完成的畫面
網站資源建立完成的畫面

可以邀請其他客服人員加入,用對方的 Email 當登入帳號。角色分成管理員(可以改設定與外觀)與客服人員(只能回覆對話)。

新增團隊成員的畫面,設定 Email 與角色
新增團隊成員的畫面,設定 Email 與角色

流程中會顯示一段以 <!--Start of Tawk.to Script--> 開頭的安裝程式碼,並讓你選擇網站平台。WordPress 網站選 WordPress 並使用外掛即可,不需要複製程式碼;這段程式碼是給沒有外掛可用的網站手動安裝用的。

tawk.to 提供的對話框安裝程式碼與網站平台選擇
tawk.to 提供的對話框安裝程式碼與網站平台選擇

最後可能會出現付費加值服務的介紹(例如移除品牌字樣),不需要的話直接略過。

註冊流程最後的付費加值服務頁面,可略過
註冊流程最後的付費加值服務頁面,可略過

完成後會進入 tawk.to 控制台,可以看到訪客、對話、客服成員與對話框設定。

tawk.to 控制台首頁
tawk.to 控制台首頁

步驟三:在 WordPress 登入 tawk.to 並設定顯示頁面

回到 WordPress「設定 > Tawk.to」,用剛註冊的帳號登入,選擇要使用的網站資源與對話小工具,儲存後外掛就會自動把對話框加到網站上。

在 WordPress 的 Tawk.to 設定頁輸入帳號密碼登入
在 WordPress 的 Tawk.to 設定頁輸入帳號密碼登入

外掛的「顯示設定」(Visibility)可以控制對話框出現在哪些頁面:

  • 每一頁都顯示:最簡單的做法。
  • 排除特定網址:例如結帳頁不想被打擾,就把網址填進排除清單,支援萬用字元。
  • 只在特定頁面顯示:例如只在首頁、文章頁或分類頁顯示,或指定網址。

有安裝 WooCommerce 的網站,還有針對商店頁面的顯示選項。

Tawk.to 外掛的顯示設定,可選擇每頁顯示或排除特定網址
Tawk.to 外掛的顯示設定,可選擇每頁顯示或排除特定網址
在排除清單中輸入不顯示對話框的網址
在排除清單中輸入不顯示對話框的網址

回到網站前台,畫面角落就會出現 tawk.to 的對話框。

網站前台角落出現 tawk.to 對話框
網站前台角落出現 tawk.to 對話框

步驟四:在 tawk.to 後台調整對話框

更改對話框顏色與位置

預設的對話框顏色不一定配合網站主色。到 tawk.to 控制台的設定(齒輪圖示),選擇你的網站資源,進入對話小工具的外觀設定,就能改顏色、位置與樣式,右側會即時預覽。

預設的綠色 tawk.to 對話框
預設的綠色 tawk.to 對話框
tawk.to 設定中的小工具外觀,可選擇配色並即時預覽
tawk.to 設定中的小工具外觀,可選擇配色並即時預覽

新增客服人員

想讓多人一起接聽對話,在設定的成員管理中新增客服人員,輸入對方的 Email 並指定角色。

tawk.to 設定中的成員管理頁面
tawk.to 設定中的成員管理頁面
新增客服人員並指定角色
新增客服人員並指定角色

設定對話框語言與問候語

在小工具內容的設定中可以改對話框顯示的語言,也能自訂訪客打開對話框時看到的問候語、離線時的留言提示。

tawk.to 小工具內容設定,選擇對話框顯示語言
tawk.to 小工具內容設定,選擇對話框顯示語言

測試對話是否正常

在控制台可以開啟測試對話視窗,或自己用另一個瀏覽器打開網站發訊息,確認後台能即時收到並回覆。手機也可以安裝 tawk.to App,離開電腦時一樣能接聽。

在 tawk.to 控制台開啟測試對話視窗
在 tawk.to 控制台開啟測試對話視窗
測試視窗中以訪客身分發送訊息
測試視窗中以訪客身分發送訊息
在 tawk.to 控制台即時回覆訪客訊息
在 tawk.to 控制台即時回覆訪客訊息

常見問題

tawk.to 真的完全免費嗎?

核心功能免費,包括即時對話、客服人數、網站數量、工單系統與知識庫。付費的是加值服務,例如移除對話框上的「Powered by tawk.to」字樣、AI 自動回覆,以及代僱客服人員,價格以官網為準。

WordPress 裝了外掛還要在 footer.php 貼程式碼嗎?

不需要。外掛會自動在網站載入對話框,再手動貼程式碼反而可能出現兩個對話框;而且直接改佈景主題檔案,主題一更新就會被覆蓋。只有在不用外掛時,才需要用程式碼安裝。

tawk.to 可以設定成中文嗎?

可以,tawk.to 後台介面與網站上的對話框都能設定成繁體中文,問候語與離線訊息也能自己改成中文內容。

結語

tawk.to 讓小型網站也能用零成本提供即時客服:註冊帳號、安裝外掛、登入選擇對話框,就能在網站上接訪客的問題。上線後記得調整對話框顏色與問候語,並用手機 App 確保離開電腦時也接得到訊息。即時回覆的速度,往往就是訪客決定要不要下單的關鍵。

鵠學苑・鵠崙設計鵠崙設計 2014 年成立,專注 WordPress 網站開發,400 多個網站在我們自己的主機上運作。鵠學苑的文章由團隊實際操作後整理,工具與外掛的功能以撰文當時為準。
鵠崙設計

不想自己摸索,
就交給我們做。

外掛設定、主機效能、改版搬家,這裡寫的每一件事,都是我們每天在客戶網站上做的工作。留下需求,1 個工作天內回覆。