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

什麼是 Facebook 顧客聊天外掛程式呢？本文最上方擷圖就是實際顯示範例，透過這功能可以將臉書 Messenger 聊天工具整合到網站或部落格，直接讓顧客或使用者透過即時線上傳訊來與你聯繫。

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

STEP 1

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

https://developers.facebook.com/docs/javascript/quickstart/

<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>

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>

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

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

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