在以前facebook就有推出一款messenger外掛,使用戶可以在自己的網站產生messenger的button 與粉絲專頁互動,但是這個外掛基本上就是一個連結,點下按鈕後會開啟新的messenger對話頁面,實在是個很不佳的用戶體驗。但這次推出的顧客聊天外掛,可以讓用戶直接在您的網站顯示messenger對話框,在不離開您的網站的情況下,直接進行交談互動。這樣的體驗會比先前的模式好很多很多。

如何安裝messenger顧客聊天外掛?

(一).具備一個粉絲專頁 

(二).有一個自己的網站

(三).建立一個facebook app應用程式

(四).將腳本放置於自己的網站

重要提示

(1).網站需要具備https 網址

(2).需要在粉絲專頁將網站網址填入白名單內


我想會需要這個外掛的人,肯定已經有自己的粉絲專頁與網站了,所以下面將會略過建立粉絲專頁與網站的步驟,直接從建立facebook 應用程式開始。


建立facebook app 應用程式

進入facebook開發人員

https://developers.facebook.com

點開 [我的應用程式] -> [新增app應用程式]

1517987157204774.jpg

輸入應用程式顯示名稱與聯絡的電子郵件,輸入完畢後,按下建立應用程式編號

註:假如有使用facebook第三方登入的話,那個顯示名稱會出現在用戶使用第三方登入時的授權畫面

建立新的facebook應用程式

輸入擾人的驗證碼(也太難辨認了)

3.JPG

成功建立 facebook 應用程式

1517987857865686.jpg


app應用程式基本設定

紅色的框:表示為必須

藍色的框:表示為建議填寫

在這階段我們先填寫紅色框的部分,也就是輸入隱私政策網址的欄位,fb要求一定要填寫此欄位才能正式發布應用程式,不發布應用程式一般人便無法使用您的服務。

所以填寫隱私政策網址很重要,但假如沒有隱私政策網址的話,就...隨意填寫您的網站內任一有效的網址吧~(例如:關於我們、首頁的網址)。

不過要注意填寫的網址若非有效的網址的話,有可能會不通過。例如輸入了404頁面的網址。


至於藍色框的部分,等您有空在自行填寫吧~ 

facebook應用程式基本設定

應用程式審查

接著,我們進入應用程式審查頁面,發布我們的應用程式。

facebook應用程式審查 - 發布應用程式

確認發布應用程式

公開發布facebook應用程式


發布後,建立應用程式的部分就搞定囉~



添加messenger顧客聊天外掛

將程式腳本放入您的網站,放置於</body>之上就可以了。(可參考下方範例圖)

<div class="fb-customerchat" page_id="您的粉絲專頁id" >
</div>
<script>
  window.fbAsyncInit = function() {
    FB.init({
      appId            : '您的應用程式id',
      autoLogAppEvents : true,
      xfbml            : true,
      version          : 'v2.5'
    });
  };
  (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/zh_TW/sdk/xfbml.customerchat.js";
     fjs.parentNode.insertBefore(js, fjs);
   }(document, 'script', 'facebook-jssdk'));
</script>

範例圖

9.JPG


應用程式id 

可以去主控版的地方,有一個應用程式編號,那個就是應用程式id了。

1517987857865686.jpg

粉絲專頁編號 

進入您的粉絲專頁 -> 點關於 -> 往下拉就會看到粉絲專頁編號

查詢粉絲專頁編號


接著下來還有一個最重要的步驟,那就是將您的網站添加到粉絲專頁的白名單內。不然顧客聊天外掛會無法顯示。

一樣在粉絲專頁,點[設定] -> [Messenger開放平台] -> 往下拉 -> [ Whitelisted Domains ] -> 將網站網址填入 並保存

粉絲專頁的白名單

1517990805377202.jpg


再來呢? 就是到自己網站 享受完成的樂趣了 哈哈


完成效果

messenger顧客聊天外掛 效果圖






文章轉載或引用,請先告知並保留原文出處與連結!!(單純分享或非營利的只需保留原文出處,不用告知)

原文連結:
https://blog.aidec.tw/post/add-facebook-messenger-plugin-in-my-site