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.11.5 補充:貼到 Blogger 範本中時,官方提供的程式碼會出現錯誤訊息,請將原本的 attribution=setup_tool 加上括號,變成 attribution="setup_tool",或是乾脆刪除此字串,就不會出現錯誤訊息。

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



三、補充說明


1. 使用參數

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

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

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

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


2. 顯示效果

測試的結果:

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


3. 其他說明

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


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

11 則留言:

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

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

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

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

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

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

      刪除
  2. 請問,已經有將"&" 要改 "&" ,但還是出現以下錯誤,要如何解決呢?

    剖析 XML 時發生錯誤 (第 5102 行,第 15 欄):Open quote is expected for attribute "attribution" associated with an element type "div"

    回覆刪除
    回覆
    1. 根據此錯誤訊息,代表 div 缺少括號。看了官方提供的程式碼,的確少了括號,已新增「2018.11.5 補充」的內容,請再試試看。

      刪除
  3. 請問手機IOS是不是無法顯示??

    回覆刪除
    回覆
    1. 我用 iPhone 測試使用 Chrome 可以顯示

      刪除
    2. 官方宣稱支援行動版瀏覽器 如果 safari 不行只能等官方自行修復
      或是你可以跟 FB 官方反應這個狀況

      刪除

張貼留言注意事項:

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

TOP