「教學」用 FB2WP 將臉書 Messenger 聊天機器人加入 WordPress 網站 | Victor Hung's Diary

在網站上安裝 Live Chat 線上客服可以留住一些懶得填寫表單或撰寫 Email 的客戶，線上 Live Chat 服務有很多選擇，例如常見的 Zendesk(Zopim)、台灣的 Cami、Kerebro 或免費的 Tawk.to，不過根據筆者自己的經驗，除了必須要安裝 Live Chat 自有的客服軟體（或一直開啟管理後台）而且若顧客使用 Live Chat 沒有即時得到回覆，之後再收到客服回覆的電子郵件，可能也不會繼續諮詢了。

如果是使用 Facebook Messenger 當作線上客服系統，首先臉書已經有很完善的粉絲專頁管理工具，只要有顧客傳送訊息，粉絲專頁管理員的裝置就會收到推播通知，可以即時回覆顧客。就算沒有即時回覆，顧客稍後還是會從電腦或手機的 Facebook Messenger 收到通知，相較電子郵件比較不容易被忽略。最值得一提的是，目前 Facebook Messenger 還可以達到基本的自動回覆功能，也就是這幾年很熱門的聊天機器人，絕對是維持顧客關係的一大利器。

原本安裝與設定 Customer Chat Plugin (顧客洽談外掛程式) 還是多少需要一點程式概念，不過現在透過 Chun 開發的 FB2WP 的外掛，就可以輕鬆的在 WordPress 後台安裝與設定 Customer Chat Plugin。

安裝 FB2WP 外掛

直接在安裝外掛頁面搜尋 FB2WP 就可以找到啦！

FB2WP integration tools

或是直接點連結也可以下載。

設定 Facebook App

在 FB2WP 的設定中，最重要的就是這四個欄位：

• 應用程式編號
• 應用程式密鑰
• 粉絲頁編號
• 粉絲頁應用程式授權碼

那我們在哪裡可以找到這些東西呢？就跟著本文一步一步來設定吧！

建立臉書應用程式

目前 Messenger 開放平台是透過臉書應用程式管理的，因此我們可以用臉書帳號登入 Facebook for Developers 來建立新的應用程式。網址是：https://developers.facebook.com/ 登入後點擊上方我的應用程式、新增應用程式。

接著設定應用程式的名稱，例如：大頭的部落格，聯絡電子郵件就填寫工作用或慣用的電子郵件即可。最後點選「建立應用程式編號」

進入到應用程式頁面後，新增「Messenger」功能，在「Messenger」下方點選「設定」

應用程式編號

還記得剛剛 FB2WP 的設定中，要填寫的第一個欄位就是應用程式編號，你可能已經看到了，就在應用程式頁面的上方，點擊就可以複製。

應用程式密鑰

在左側選單、設定、基本資料，應用程式編號的右邊，可以找到應用程式密鑰的欄位，預設是隱藏起來的，點選右側的「顯示」輸入臉書密碼驗證後，就可以顯示了，一樣複製貼回到 FB2WP 設定。

粉絲頁編號

接著，因為是透過 Facebook Messenger 回覆顧客，因此勢必要以粉絲專頁的身份來回覆，粉絲專頁你應該已經有了，在粉絲專頁的「關於」頁面最下方可以找到粉絲專頁編號。

粉絲頁應用程式授權碼

回到剛剛的 Facebook for Developers 應用程式頁面，點選左側選單、Messenger、設定，找到「權杖產生」的區塊，從下拉式選單選擇要使用的粉絲專頁，這時會跳出確認授權的視窗：

這邊授權的權限，大致上就是應用程式可以使用粉絲專頁的權限與顧客傳送訊息，並且取得一些顧客的基本資料。

確認權限之後產生出一長串的存取權杖，對了，這就是所謂的「粉絲頁應用程式授權碼」請複製起來並回到 FB2WP 設定貼上吧！

Facebook Webhooks 設定

接著來到 FB2WP 第二個頁籤，Facebook Webhooks 設定，這邊 FB2WP 已經自動產生一個回呼網址，你只要在想一個回呼驗證權杖就可以了，這邊沒有什麼限制，隨便一個單字都可以，例如：apple、banana，隨便就好了。

再回到 Facebook for Developers 應用程式頁面，剛剛「權杖產生」區塊下方，可以找到「設定 Webhooks」的按鈕，點選，並貼上 FB2WP 自動產生的回呼網址，以及剛剛 隨便 想的 單字 驗證權杖。

接著很重要，在訂閱欄位中，我們要勾選訂閱 messages、messaging_postbacks、standby、messaging_handovers 這四個事件，其實在 FB2WP 上面還有提到 conversations、feed、ratings，但這三個必須要在 Facebook for Developers 的 Webhook 功能另外設定，因此我們就先勾選前面四個。

最後點選「驗證並儲存」

這樣子 Webhooks 就驗證完成了。

接著在下拉式選單選擇粉絲專頁，訂閱。

設定 Messenger 開放平台

回到粉絲專頁設定，點選 Messenger 開放平台

回覆方式

在一般設定中，如果之後想要設定聊天機器人的話，回覆方式可以選擇「回覆有部分是自動操作，並以部分人工操作輔助」若是單純管理員人工回覆，也可以選擇「所有回覆都是由真人提供」

剛剛在應用程式 Webhooks 設定中有訂閱粉絲專頁了，如果沒有出現，可以在下方「連結應用程式到你的粉絲專頁」用應用程式編號，把應用程式加入。此時將應用程式設為 Primary Receriver；Page Inbox 則設為 Secondary Receriver。

允許網域

這也是相當重要的一個步驟，在下方「允許清單中的網域」欄位將「網站的網址」加入並儲存。

其實照理說到這個步驟完成後，Customer Chat Plugin 應該已經可以正常使用了，但是在近期臉書隱私問題大地震，臉書開發者權限也跟著大混亂，因此做到這邊，網站前台還是會發生錯誤，聊天視窗是無法正常顯示的。

設定顧客洽談外掛程式

我們回到粉絲專頁的 Messenger 開放平台

找到「顧客洽談外掛程式」區塊，點選「設定」

語言選擇「中文(台灣)」，問候訊息等一下我們可以使用 FB2WP 來設定，可以先跳過，點選「繼續」

回覆時間可以使用預設的「自動設定回覆時間」，外觀一樣可以等一下使用 FB2WP 來設定，點選「繼續」

再次貼上網站的網址並儲存。程式碼的部分 FB2WP 那邊已經處理好了，所以也不需要複製，直接點選「完成」

大功告成

前台成功出現顧客洽談外掛程式了，包含了預設的問候語跟臉書代表色。

在 FB2WP 的 Facebook 外掛功能設定中，我們可以更改問候語以及外觀顏色。

更改之後的樣子

顧客點選開始洽談後，就可以直接與粉絲專頁對話。

粉絲專頁管理員則會收到通知，並且可以在網頁收件匣或手機應用程式回覆顧客，右側也會顯示顧客的基本資料，如果是有進行銷售，追蹤付款與備註的這些功能也相當完善。

包含輸入中、已讀功能在前台都能正常向顧客顯示。

本文示範圖檔所使用的帳戶、使用者、粉絲專頁以及應用程式名稱、編號等資訊經過變造，以及隨臉書應用程式、粉絲專頁或外掛改版，可能會造成內容與介面與本文有些許不同，請自行對照當前版本。