Facebook 顧客聊天外掛程式將 Messenger 嵌入網站提供即時通訊教學

上個月初 Facebook 宣布即將推出官方「顧客聊天外掛程式」（Customer Chat Plugin），昨天就收到通知，目前這項功能已經進入公開測試階段，如果你的網站、部落格跟 Facebook 社群連結很深，又會經常透過 Facebook Messenger 接收顧客訊息、提供客戶服務的話，這個功能可能為你帶來更好的效果，尤其是目前有使用一些第三方聊天功能，或許可以關注接下來的資訊。

什麼是 Facebook 顧客聊天外掛程式呢？本文最上方擷圖就是實際顯示範例，透過這功能可以將臉書 Messenger 聊天工具整合到網站或部落格，直接讓顧客或使用者透過即時線上傳訊來與你聯繫，以往此功能必須透過第三方才能做到，例如：Messengerify、WhatsHelp.io，在臉書推出官方版「顧客聊天外掛程式」後勢必對市場上現有的服務造成衝擊。

如果你想在網站上顯示更多聯絡資訊，不限於 Messenger 的話，還可使用：

既然 Facebook 已經推出「顧客聊天外掛程式」，那麼就來寫一篇教學教站長們如何將此外掛程式整合到自己的網站或部落格，同時與 Facebook 粉絲專頁連結，步驟不會太難，只是需要動一些程式碼，而目前 Customer Chat Plugin 還在測試階段，不保證之後的操作功能及步驟會一樣。

顧客聊天外掛程式設定教學

STEP 1

首先，必須將 Facebook SDK 加入你的網站。如果你的網站目前有 Facebook Likes 按鈕、留言等相關臉書功能，那麼應該都已將 Facebook SDK 加入，或者可以直接檢查一下有沒有類似下面這一大段程式碼。

<script>

 window.fbAsyncInit = function() {

 FB.init({

 appId : 'your-app-id',

 autoLogAppEvents : true,

 xfbml : true,

 version : 'v2.11'

 });

 };

 (function(d, s, id){

 var js, fjs = d.getElementsByTagName(s)[0];

 if (d.getElementById(id)) {return;}

 js = d.createElement(s); js.id = id;

 js.src = "https://connect.facebook.net/en_US/sdk.js";

 fjs.parentNode.insertBefore(js, fjs);

 }(document, 'script', 'facebook-jssdk'));

</script>

view raw
Facebook-SDK.htm
hosted with ❤ by GitHub

STEP 2

接著開啟 Facebook 粉絲專頁的「設定」功能，從選單找到「Messenger 平台」，點擊後可以從右側看到一個「Whitelisted Domains」，這裡必須將你的網站首頁網址輸入，前面必須加上 http:// 或 https:// ，完成後按下「Save」來保存設定。

STEP 3

要顯示時只需要在網站加入以下程式碼：

<div class="fb-customerchat"

 page_id="<PAGE_ID>"

 ref="<OPTIONAL_WEBHOOK_PARAM>"

 minimized="<true|false>">

</div>

view raw
facebook-customer-chat-plugin.htm
hosted with ❤ by GitHub

<PAGE_ID> 部分改為你的 Facebook 粉絲專頁編號，如果不知道編號，可從粉絲專頁「關於」頁面的最下方找到「粉絲專頁編號」（管理員權限才能看到）。

「ref」設定參數可以直接省略拿掉，若要設定請參閱以下兩個鏈結說明：

最後「minimized」可以設定是否在開啟網頁時跳出歡迎文字，預設情況下為停用（false），也就是會自動冒出歡迎視窗，我認為對於瀏覽者來說可能會有一些干擾，如果只想顯示 Messenger 圖示在右下方，可將「minimized」設定為啟用（true）屬性。

點擊「開始聊天」後會進入與 Facebook 粉絲專頁的對話視窗。

其他我之前介紹過的 Facebook 站長工具：

值得一試的三個理由：

Facebook 官方推出的 Messenger 顧客聊天外掛，可嵌入網站或部落格
開啟網站時自動跳出歡迎訊息，提高使用者點擊意願
捨棄第三方服務，直接選用官方版不僅速度快也更安全可靠

顧客聊天外掛程式設定教學

值得一試的三個理由：

關於 Pseric