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

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

點此看範例網頁

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

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

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

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

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

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

二、簡易安裝流程

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

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

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




首先按上圖 A~C 順序

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

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

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

• 將 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 相關工具：