7/31/2018

為網站安裝 Facebook 即時通(messenger)外掛﹍顧客洽談機器人

為網站安裝 Facebook 即時通(messenger)外掛﹍顧客洽談機器人

A+
fb-messenger-customer-chat.jpg-為網站安裝 Facebook 即時通(messenger)外掛﹍顧客洽談機器人我們常常會在某些網站的右下角,看到 FB 即時通的圖示,點開後就能直接留言。這個功能很熱門,英文名稱為 Customer Chat Plugin(客戶聊天機器人),很多人都提問過要如何安裝,本篇就來整理非常簡單的安裝流程。




一、FB 即時通留言的優缺點


如果網站側邊欄有聯絡表單的話,就不一定要另外裝即時通外掛,影響網頁速度。但是聯絡表單總是沒有那麼直覺,對網站很熟的訪客才會知道哪裡有表單可留言。而即時通圖示固定浮動在右下角,對於需要做生意、留住商機的網站,安裝即時通外掛非常必要,且即時線上客服可以加很多分

其實可以放在網站的第三方即時通外掛很多,並非一定要使用 FB 即時通。不過仔細想想後,其實安裝 FB 外掛有不少優點:

  • FB 比較知名,程式比較有保障,存活時間可以比較久
  • 那麼即時通留言紀錄也可以留存比較久,否則第三方服務倒了就全沒了。
  • 只要網站有安裝過讚、粉絲團等 FB 外掛,不用再額外跑一次主程式
  • 這樣的話,跟其他第三方外掛相比,影響網頁速度程度稍低一些。


同時也列一下 FB 即時通的缺點:

  • 其他第三方外掛可能不需登入就能留言
  • 訪客一定要登入 FB 帳號才能留言



二、簡易安裝流程


  • 首先需要一個 FB 粉絲頁。
  • 進入粉絲頁 → 設定 → Messenger 開放平台
  • 找到「允許清單中的網域」這裡


fb-messenger-customer-chat-1.jpg-為網站安裝 Facebook 即時通(messenger)外掛﹍顧客洽談機器人


  • 如上圖,輸入所有要允許外掛執行的網域
  • 不在允許名單的網域,就算裝了外掛,也將無法執行程式。
  • 所以無法冒用別人的粉絲團擺放即時通。


fb-messenger-customer-chat-2.png-為網站安裝 Facebook 即時通(messenger)外掛﹍顧客洽談機器人

畫面往下,找到「顧客洽談外掛程式」這裡,按下右邊的設定,官方會一步步指引完成安裝流程。


fb-messenger-customer-chat-3.jpg-為網站安裝 Facebook 即時通(messenger)外掛﹍顧客洽談機器人

首先按上圖 A~C 順序

  • A:設定語系
  • B:按「變更」後,修改自訂的歡迎文字。
  • C:按「繼續」


fb-messenger-customer-chat-4.jpg-為網站安裝 Facebook 即時通(messenger)外掛﹍顧客洽談機器人

  • A:可自訂回覆時間
  • B:將「自訂顏色」改成 ON 狀態後,可設定 FB 即時通圖示的色系。
  • C:按「繼續」


fb-messenger-customer-chat-5.jpg-為網站安裝 Facebook 即時通(messenger)外掛﹍顧客洽談機器人

到了最後這一步,上圖會顯示安裝程式碼。

  • 將 A 與 B 兩段程式碼,都貼到範本中 </body> 的前一行即可。
  • 如果熟悉程式碼的話,可檢查範本中是否已經有 fb-root 這一行,有的話刪除這一行。

2018.9.3 補充:貼到 Blogger 範本中時,要將符號 "&" 改成 "&amp;" 才不會出現錯誤訊息。



三、補充說明


1. 使用參數

可參考 FB 官網中文頁面「顧客洽談外掛程式(測試版)」,這個外掛有一些參數可以調整。

例如想要預設關閉歡迎畫面的話,可使用 greeting_dialog_display="hide"

我目前的測試結果是,任何參數都沒有作用!?怎麼改都是官方預設效果...

這個外掛官方自己也說了,是測試版,也許每天會看到的結果都不一樣,因為工程師還在調整中。那麼等正式版出來後,再來研究參數吧!


2. 顯示效果

測試的結果:

  • 使用者已登入 FB 帳號時,會自動彈出歡迎視窗
  • 使用者沒登入 FB 時,不會顯示歡迎視窗,必須點擊即時通圖示,才會顯示歡迎視窗。


3. 其他說明

  • 在多個網域測試的結果,大部分網站都能成功執行,例如「DEMO 網頁
  • 但 WFU BLOG 主站無法執行,推測是主站的外掛 JS 比較多,不知道跟哪個起衝突。
  • 無法成功執行的讀者,如果熟悉程式碼,可一一檢查跟範本中哪段語法相衝,自行 Debug 試試看。


更多 Facebook 相關工具:
如這篇文章對你有幫助,歡迎「分享」或給我個讚:

5 則留言:

  1. 大神,您的博文非常好,能解决我的问题。

    我复制代码,也就是最后一步的时候出了问题,可否看看怎么回事,麻烦您了

    回覆刪除
    回覆
    1. 你好,請見留言注意事項,提問請附上網址,謝謝~

      刪除
    2. 我当时附上代码的截图了,我再添加一次
      最后一步,复制fb代码到blogger的HTML,出现解析XML错误,大神可否帮忙看一下

      刪除
    3. 很抱歉,大神,那个代码问题解决了,感谢您的关心

      刪除
    4. "解析XML错误" → 我大概知道問題了, Blogger 範本要將 "&" 要改 "&amp;" 才不會出現錯誤訊息

      刪除

張貼留言注意事項:

◎ 勾選「通知我」可收到後續回覆的mail!
◎ 請在相關文章留言,與文章無關的主題請至「Blogger 中文論壇」。
◎ 提問若無法提供足夠的資訊供判斷,可能會被無視。建議先參考這篇「Blogger 提問技巧及注意事項」。
◎ CSS 相關問題非免費諮詢,建議使用「Chrome 開發人員工具」尋找答案。
◎ 手機版相關問題請參考「Blogger 行動版範本的特質」→「三、行動版範本不一定能執行網頁版工具」。
◎ 非官方範本問題、或貴站為商業網站,請參考「Blogger 免費諮詢 + 付費諮詢
◎ 若留言要輸入語法,"<"、">"這兩個符號請用其他符號代替,否則語法會消失!
◎ 為了過濾垃圾留言,所有留言不會即時發佈,請稍待片刻。
◎ 本站「已關閉自刪留言功能」。

TOP