
去年底 Facebook 推出「顧客聊天外掛程式」(Customer Chat Plugin),也就是將現有的聊天室功能串接到一般網站、部落格的實用工具,對於需要提供客戶服務來說也非常有用,不用受限於 Facebook 粉絲頁面,從網站裡一樣可以進行線上交談,通常會拿來做購買前諮詢或售後問答服務。我之前寫過一篇 「Facebook 顧客聊天外掛程式將 Messenger 嵌入網站提供即時通訊教學」,要將外掛工具放入網站並不會太困難,只需要修改一下程式碼即可。
如果你是使用 WordPress 自行架站(是 WordPress.org,不是 WordPress.com,兩者不同),好消息是 Facebook 終於推出官方版免費外掛「Messenger Customer Chat」,這個外掛讓站長可將顧客聊天功能整合到 WordPress 網站,完全不需要自己修改佈景主題或程式碼,幾乎是全自動化!目前已經上架至 WordPress 外掛資料庫。
透過 Messenger Customer Chat 可開啟快速設定模式,透過互動式介面選擇你要顯示的樣式和說明文字,最後將產生的程式碼自動回傳 WordPress,儲存後即可在 WordPress 網站看到效果,對於不知道應該如何修改網站原始碼的朋友來說會很有用。
網站名稱:Messenger Customer Chat
網站鏈結:https://wordpress.org/plugins/facebook-messenger-customer-chat/
使用教學
STEP 1
首先,開啟你的 WordPress 控制台,從左側選單點選「外掛」功能。

接著按上方「安裝外掛」直接將下載的 Messenger Customer Chat 外掛壓縮程式上傳即可安裝,我在測試時發現從搜尋功能無法找到這個外掛,不確定是不是尚未被收錄到索引中,如果你遇到無法找到該外掛的問題,就是從官方資料庫下載然後手動安裝。

STEP 2
安裝後啟用外掛,側邊欄選單就會多出一個「Customer Chat」功能,第一次使用先點選「Setup Customer Chat」設定顧客聊天外掛,設定後會產生程式碼並自動載入你的網站外掛選單。

STEP 3
接著會開啟 Facebook 的 Messenger Customer Chat 設定功能,在第一個畫面中必須先選擇你要加入網站的粉絲頁面。

會有一個簡單的介紹說明,告知使用這個功能是將 Messenger 新增到你的網站。

STEP 4
重點來了,預設情況下如果語言是英文,請先選擇「中文(台灣)」將介面改中文,然後把其他選項都調整一下。

有使用過 Messenger 的話應該會知道上方都會顯示一個「回覆時間」,告訴使用者你可能會在多久之後回覆訊息,這部分可以自行修改,或是維持預設值讓 Facebook 依照你的回覆情形自動顯示,如果你想讓 Messenger Customer Chat 更貼近網站色彩,讓它看起來不要太過突兀或不和諧,亦能在外觀選項上自訂顏色。

設定結束,點選右下角的「完成」返回 WordPress 控制台。

STEP 5
原有的 Customer Chat 外掛頁面就會帶入剛才設定好的程式碼,同時為啟用狀態,別忘記點選「儲存變更」將這些紀錄儲存起來。

不過你可能發現一個問題,就是在設定時如果輸入中文歡迎文字可能無法正確帶入外掛中,沒關係,點選「Edit Code」編輯程式碼,將最下面 logged_in_greeting
和 logged_out_greeting
改成你要顯示的歡迎文字。

STEP 6
若你的網站有使用快取(Cache)外掛,別忘記將快取檔清除,回到首頁應該就能從右下角看到 Messenger Customer Chat 功能,是一個小小的 Messenger 圖示,點選前會出現歡迎文字,點選「開始洽談」就會跳出對話視窗。

操作上大概就像下圖這樣,能為你的網站或部落格提供更即時的 Live Chat 功能。

值得一試的三個理由:
- Facebook 在 WordPress 外掛程式庫上架顧客聊天功能
- 一鍵快速設定,無須修改佈景主題原始碼
- 設定完成後會自動將程式碼帶入 WordPress