就是愛尚生活 - 94i3 Life

 找回密碼
 免費註册

Sign in with facebook

Connect with friends.

人氣: 4719|回復: 0

「教學」用 FB2WP 將臉書 Messenger 聊天機器人加入 WordPress 網站

  [複製鏈接]
字體大小: 正常 放大

新浪微博達人勛

總積分排名︰1
簽到
2145
鮮花(68) 雞蛋(2)
累計在線
342789分鐘
發表於 2018-8-5 13:52:25 | 顯示全部樓層 |閱讀模式
  
0.jpg
在網站上安裝 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 就可以找到啦!
或是直接點連結也可以下載。
1.jpg
設定 Facebook App
在 FB2WP 的設定中,最重要的就是這四個欄位:
  • 應用程式編號
  • 應用程式密鑰
  • 粉絲頁編號
  • 粉絲頁應用程式授權碼

那我們在哪裡可以找到這些東西呢?就跟著本文一步一步來設定吧!
2.jpg
建立臉書應用程式
目前 Messenger 開放平台是透過臉書應用程式管理的,因此我們可以用臉書帳號登入 Facebook for Developers 來建立新的應用程式。網址是:https://developers.facebook.com/ 登入後點擊上方我的應用程式、新增應用程式。
0.jpg
接著設定應用程式的名稱,例如:大頭的部落格,聯絡電子郵件就填寫工作用或慣用的電子郵件即可。最後點選「建立應用程式編號」
4.jpg
進入到應用程式頁面後,新增「Messenger」功能,在「Messenger」下方點選「設定」
5.jpg
應用程式編號
還記得剛剛 FB2WP 的設定中,要填寫的第一個欄位就是應用程式編號,你可能已經看到了,就在應用程式頁面的上方,點擊就可以複製。
應用程式密鑰
在左側選單、設定、基本資料,應用程式編號的右邊,可以找到應用程式密鑰的欄位,預設是隱藏起來的,點選右側的「顯示」輸入臉書密碼驗證後,就可以顯示了,一樣複製貼回到 FB2WP 設定。
6.jpg
粉絲頁編號
接著,因為是透過 Facebook Messenger 回覆顧客,因此勢必要以粉絲專頁的身份來回覆,粉絲專頁你應該已經有了,在粉絲專頁的「關於」頁面最下方可以找到粉絲專頁編號。
7.jpg
粉絲頁應用程式授權碼
回到剛剛的 Facebook for Developers 應用程式頁面,點選左側選單、Messenger、設定,找到「權杖產生」的區塊,從下拉式選單選擇要使用的粉絲專頁,這時會跳出確認授權的視窗:
8.jpg
這邊授權的權限,大致上就是應用程式可以使用粉絲專頁的權限與顧客傳送訊息,並且取得一些顧客的基本資料。
9.jpg
確認權限之後產生出一長串的存取權杖,對了,這就是所謂的「粉絲頁應用程式授權碼」請複製起來並回到 FB2WP 設定貼上吧!
10.jpg
Facebook Webhooks 設定
接著來到 FB2WP 第二個頁籤,Facebook Webhooks 設定,這邊 FB2WP 已經自動產生一個回呼網址,你只要在想一個回呼驗證權杖就可以了,這邊沒有什麼限制,隨便一個單字都可以,例如:apple、banana,隨便就好了。
11.jpg
再回到 Facebook for Developers 應用程式頁面,剛剛「權杖產生」區塊下方,可以找到「設定 Webhooks」的按鈕,點選,並貼上 FB2WP 自動產生的回呼網址,以及剛剛 隨便 想的 單字 驗證權杖。
接著很重要,在訂閱欄位中,我們要勾選訂閱 messages、messaging_postbacks、standby、messaging_handovers 這四個事件,其實在 FB2WP 上面還有提到 conversations、feed、ratings,但這三個必須要在 Facebook for Developers 的 Webhook 功能另外設定,因此我們就先勾選前面四個。
最後點選「驗證並儲存」
12.jpg
這樣子 Webhooks 就驗證完成了。
13.jpg
接著在下拉式選單選擇粉絲專頁,訂閱。
14.jpg
設定 Messenger 開放平台
回到粉絲專頁設定,點選 Messenger 開放平台
15.jpg
回覆方式
在一般設定中,如果之後想要設定聊天機器人的話,回覆方式可以選擇「回覆有部分是自動操作,並以部分人工操作輔助」若是單純管理員人工回覆,也可以選擇「所有回覆都是由真人提供」
剛剛在應用程式 Webhooks 設定中有訂閱粉絲專頁了,如果沒有出現,可以在下方「連結應用程式到你的粉絲專頁」用應用程式編號,把應用程式加入。此時將應用程式設為 Primary Receriver;Page Inbox 則設為 Secondary Receriver。
16.jpg
允許網域
這也是相當重要的一個步驟,在下方「允許清單中的網域」欄位將「網站的網址」加入並儲存。
17.jpg
其實照理說到這個步驟完成後,Customer Chat Plugin 應該已經可以正常使用了,但是在近期臉書隱私問題大地震,臉書開發者權限也跟著大混亂,因此做到這邊,網站前台還是會發生錯誤,聊天視窗是無法正常顯示的。
18.jpg
設定顧客洽談外掛程式
我們回到粉絲專頁的 Messenger 開放平台
19.jpg
找到「顧客洽談外掛程式」區塊,點選「設定」
20.jpg
語言選擇「中文(台灣)」,問候訊息等一下我們可以使用 FB2WP 來設定,可以先跳過,點選「繼續」
21.jpg
回覆時間可以使用預設的「自動設定回覆時間」,外觀一樣可以等一下使用 FB2WP 來設定,點選「繼續」
22.jpg
再次貼上網站的網址並儲存。程式碼的部分 FB2WP 那邊已經處理好了,所以也不需要複製,直接點選「完成」
23.jpg
大功告成
前台成功出現顧客洽談外掛程式了,包含了預設的問候語跟臉書代表色。
24.jpg
在 FB2WP 的 Facebook 外掛功能設定中,我們可以更改問候語以及外觀顏色。
25.jpg
更改之後的樣子
26.jpg
顧客點選開始洽談後,就可以直接與粉絲專頁對話。
27.jpg
粉絲專頁管理員則會收到通知,並且可以在網頁收件匣或手機應用程式回覆顧客,右側也會顯示顧客的基本資料,如果是有進行銷售,追蹤付款與備註的這些功能也相當完善。
28.jpg
包含輸入中、已讀功能在前台都能正常向顧客顯示。
29.jpg
本文示範圖檔所使用的帳戶、使用者、粉絲專頁以及應用程式名稱、編號等資訊經過變造,以及隨臉書應用程式、粉絲專頁或外掛改版,可能會造成內容與介面與本文有些許不同,請自行對照當前版本。victor


就是愛尚生活 - 94i3Life - 歡迎您 加入 !

回復 鮮花(68) 雞蛋(2)論壇版權

使用道具 舉報

您需要登錄後才可以回帖 登錄 | 免費註册 | 新浪微博登陸 Sign in with facebook

本版積分規則


快速回復 返回列表 聯繫我們 搜索

line|關于我們|聯絡我們|就是愛尚生活 - 94i3 Life |簡體中文

GMT+8, 2018-8-15 10:52 PM

Powered by 就是愛尚 - 94i3.tw - X3.2

© 2007-2018 愛上誠信。愛上精緻。愛上專業。愛上時尚。愛上分享

94i3就是愛尚是一個經驗分享筆記平台,網友均可以在94i3免費互相學習別人分享之經驗。
※本站只提供空間,網友自由發表使用,也請會員網友尊重「論壇規則」、「論壇注意事項」,本網站內容均從網路上收集或網友們提供,其內容及言論的完整性以及正確性並不代表本站立場,本站不負任何法律責任,均與本站無關。倘若文章、圖片或是內容言論等有任何問題,請「聯絡我們」,我們將會第一時間優先處理或刪除。

快速回復 返回頂部 返回列表