[2023 更新] 如何在 WordPress 網站新增 Facebook Messenger 顧客聊天外掛程式？

這篇文章最後更新日期：2024 年 6 月 1 日
作者： Mack Chan

由於近年電商網站大行其道，使用 WordPress + WooCommerce 可以建立簡單的小型 / 微型電商網站，我們這次探討關於訪客在整個銷售流程裡的「初期瞭解」和「售後服務」階段，潛在消費者會希望取得直接和一對一的客戶查詢服務，這不需要額外付款和購買外掛，我們將會帶你使用 Facebook 官方的 Facebook Messenger 顧客聊天外掛程式，難度並不高，但卻能為你的網站帶來源源不絕的產品和服務查詢。

溫馨提醒和更新：2023 年 03 月 11 日
由於 Facebook (Meta) 喜歡經常改版，Facebook Messenger 顧客聊天外掛程式的設定位置會隨著每次改版而變動，讓人無所適從，如果發現找不到設定的位置，請於下方留言區發言，我們會盡量確保跟上 Facebook 的改版進度，謝謝！

---

你將會學習得到以下知識和技能：

• 前期準備工作
• Facebook 政策改變
• 將 Facebook 程式碼置入在你的網站裡
• 前往 Facebook 粉絲專頁管理介面
• 前往 [訊息] → [訊息功能設定]
• 選擇 [將 Messenger 新增到你的網站] 的設定
• 設定你的洽談附加程式
• 新增和設定你的「網站網域」
• 設定你的「歡迎訊息 Welcome Message」的內容
• 設定「常見問題 / FAQ」
• 設定你的「訪客洽談」和「自訂品牌色彩」
• Facebook Messenger 小圖示的位置對齊選擇
• 設定小圖示在底部的距離
• 設定「自動展開」功能
• 實時預覽網站的效果
• 設定洽談附加程式 – 步驟 1：設定語言
• 設定洽談附加程式 – 步驟 2：新增網域
• 設定洽談附加程式 – 步驟 3：複製程式碼
• 設定洽談附加程式 – 步驟 4：貼上程式碼
• 透過 Insert Headers and Footers 外掛處理
• Insert Headers and Footers 外掛設定
• 訪客和真實身份查詢的差異
• 方法二：[比較不推薦] 安裝 Facebook 官方外掛
• 如何安裝 The Official Facebook Chat Plugin

---

Youtube 教學影片：

影片長度：	15 分鐘
語言：	國語
字幕：	繁體中文

---

準備工作：
首先當然你需要有一個運作中的 Facebook 粉絲專頁，設定顧客聊天外掛程式的工作都會在那邊進行，然後 Facebook 會把所有設定打包成「一組程式碼」，最後你只需要把這些簡單的程式碼貼回你的網站即可，減少了沒有編程背景的朋友無法自行設定的煩惱。

Facebook 政策改變：
為了避免各種濫用 Facebook Messenger 的行為，最新的政策在訪客透過 Facebook Messenger 查詢開始起計，廠方只有 24 小時的「推廣時間」，24 小時之後的任何推廣行為視為「違反 Facebook 的社群政策」，最壞情況會關閉你的帳號。

---

方法一：推薦將 Facebook 程式碼置入在你的網站裡

由於最近 Facebook 在 2021 年的改版，粉絲專頁的控制更加友善，而且可以直接生產簡易的程式碼，大大降低了使用 Facebook Messenger 顧客聊天外掛程式的門檻，所以我們現在來說，比較傾向推薦自己來，不依賴別人的外掛程式。

---

技術要求：如何新增 HTML、CSS 和 JavaScript 程式碼到你的網站裡？Insert Headers and Footers 外掛應用

Insert Headers and Footers 是一款很簡單的工具，讓新手可以在不懂任何編程技術的情況之下，應對像 Google 應用服務或 Facebook 類別的要求，新手不會看到如何插入程式碼就停止學習的步伐。當然如果基礎知識比較不足之下，仍然會感到一絲迷惑，但這外掛的確解決了大部分的疑難。

---

前往 Facebook 粉絲專頁管理介面

首先你需要創建自己部落格或公司的 Facebook 粉絲專頁，沒有？請前往如何建立Facebook 粉絲專頁瞭解相關資料。專頁可協助企業、品牌、機構及公眾人物分享動態，與用戶連結。如同個人檔案一樣，您可以自訂專頁的動態和活動等內容。對專頁讚好或加以追蹤的用戶會在動態消息中收到該專頁的更新內容。

若要建立專頁：

1. 可前往 facebook.com/pages/create。
2. 點擊以選擇類別。
3. 填寫必要資訊。
4. 點擊建立專頁。
5. 新增選用個人檔案或封面相片，然後點擊儲存。

注意：任何人都可以建立專頁，但只有官方代表才能替組織、企業、品牌或公眾人物建立 Facebook 專頁。

接著，在 Facebook 粉絲專頁管理介面的左方選單，點擊 [設定] → [訊息]，這裡是接受所有外來潛在客戶信息的統一管理面板。

---

前往 [訊息] → [訊息功能設定]

新版 Facebook (Meta) 的介面比較複雜，但我們只需要點擊 [訊息] 按鈕，然後會帶我們前往設定 [訊息功能設定] 的介面。

---

選擇 [將 Messenger 新增到你的網站] 的設定

客戶信息的統一管理面板，在下方 [將 Messenger 新增到你的網站] 會出現「顧客聊天外掛程式 Chat Plugin」的選項，點擊 [立即開始] 按鈕。

隨著 Facebook 不停的改版，往後的名稱可能會出現改變，但應該離不開「Messenger」和「Chat」這個關鍵字，新手大約觀察到就可以，點擊往我們可以往下再操作下去。

---

設定你的洽談附加程式

然後，畫面會來到「洽談附加程式」專屬的介面，左邊提供簡單的設定選項，反之右邊則是「桌面版預覽」和「流動版預覽」的即時效果，這意味你作出的所有變更動作，都會立即反映在這裡，你不用去猜想之後會獲得的結果。

---

新增和設定你的「網站網域」

可以新增一個或多個網站，但如果網站業務和公司是不同的，建議還是個別獨立設定，一般這部分不會出什麼意外，比較有可能發生問題，是你公司的網域 (Domain) 曾經被 Facebook 判為黑名單或惡意網站。

---

設定你的「歡迎訊息 Welcome Message」的內容

步驟一：
這個並非必須的功能，的確有些朋友不喜歡剛進網站，就被「歡迎訊息 Welcome Message」打擾。但如果啟用的話，你可以輸入少量的歡迎字句，允許放入超連結。

步驟二：
你可以立即瀏覽真實網站的效果，當然作為歡迎詞，不適宜長篇大論，簡單幾句就足夠。

---

設定「常見問題 / FAQ」

步驟一：
是否開啟這個自動對答的功能？我們推薦是打開這個選項，當然您需要小心決定什麼是潛在客戶最經常提問的，例如你公司的「營業時間」、「地址」或「價錢」等等。

步驟二：
截至 2021 為止，暫時 Facebook 官方只允許 3 條提問，這個上限對我們有點不足夠，但也無可奈何。點擊「鉛筆 icon」就可以編輯「問題」和「答案」。

步驟三：
右邊會立即展示你的實際效果，當然題問的字數不宜過高，簡單數句就能解決客戶的問題是最佳的，更多的資訊可以提供額外的網址輔助。

---

設定你的「訪客洽談」和「自訂品牌色彩」

步驟一：
不少客戶並不希望使用自己的「真實身份」來查詢，打開這個功能可以讓訪客「匿名」地查詢，減少他們離開的機會率。

步驟二：
預設的「Facebook Messenger」小圖示 icon 為「藍色 Blue」，打開這個功能可以使用你公司的品牌識別色，輸入色彩碼即可。

---

Facebook Messenger 小圖示的位置對齊選擇

這個功能很貼心，不過暫時所見，世界上絕大部分的網站的顧客聊天外掛程式都是選擇「靠右」邊的對齊方式。也較符合人類的閱讀和上網行為，不過這取決每個網站的處境而不同，沒有對與錯。

---

設定小圖示在底部的距離

比較常見是因為我們網站的底部有不少功能，例如「返回最上 Back to Top」、Line 通訊、Whatsapp 通訊或社交平台的小工具等等，大部分都允許調整各自在底部的距離，你需要取捨那個放在最上方，那個放在最下方，而且「手機版」的情況也要考慮。

步驟一：
設定底部距離 (桌面版)，由於桌面版有較寬廣的空間，這個小小的 icon 其實不會太佔網站版面位置和空間，一般問題不大。

步驟二：
設定底部距離 (流動版)，不過相反，在手機的介面就相對狹窄很多，新手站長可能需要反覆調整多次才能達到滿意。

---

設定「自動展開」功能

可能是我比較先入為主，如果在我未能從你的網站獲得「任何價值」之前，你的網站彈出這個對話框，我會感到很煩躁和覺得被打擾。所以比較不推薦大家開啟這個功能，就算生意做不成，至少留給訪客一個「良好印象」，為往後的可能性埋下伏筆。

備注：
於桌面電腦載入你的頁面或於流動裝置載入歡迎橫額後，立即展開洽談附加程式對話框。如果你想讓洽談附加程式更引人注目，可考慮開啟這項設定。

---

實時預覽網站的效果

在進行設定時，右方始終立即顯示結果給你看，這也是我推薦在 Facebook 後台設定，而非透過安裝 WordPress 外掛的其中一個原因，對不懂程式的新手非常友善。你可以自由切換桌面版與流動版之間的版面，由於可以設定的東西不多，一般我們都是在「安全區域」裡設置參數，不會走歪官方預設的設計方向。

---

進入最後調整階段

步驟一：
請按下上方的「設定」按鈕，接下來我們會設定最後的四個步驟，整個在 WordPress 網站新增 Facebook Messenger 顧客聊天外掛程式的過程就會完結。

---

設定洽談附加程式 – 步驟 1：設定語言

為洽談附加程式選擇語言。預設語言只有在你將程式碼複製並貼上至網站時才會顯示，無法預覽。

步驟一：
在「設定語言」的介面，這是四步曲的開始。

步驟二：
你可以在下拉式選單找到「中文(台灣)」，即是繁體中文。

---

設定洽談附加程式 – 步驟 2：新增網域

步驟一：
在「新增網域」的介面，為你希望顯示洽談附加程式的所有網站新增網域，這是四步曲的第二階段。

步驟二：
如果之前已經完成新增網域的動作，這裡用預設即可。

---

設定洽談附加程式 – 步驟 3：複製程式碼

新增程式碼到網站時發生問題嗎？請看看這些逐步指示，瞭解如何新增洽談附加程式到 WordPress、Shopify、Wix、Squarespace 和其他網站建造工具。

步驟一：
在「複製程式碼」的介面，你會發現 Facebook 已經為你製作好合適的「程式碼」，請不要作任何的更動。

步驟二：
點擊「複製程式碼」的按鈕，這代表把上方的所有程式碼複制好備用。

---

設定洽談附加程式 – 步驟 4：貼上程式碼

步驟一：
在「貼上程式碼」的介面，在你想要顯示洽談附加程式的每個網頁上，直接將此程式碼片段貼在起始 <body> 標籤後方。

步驟二：
點擊「完成」的按鈕，我們已經完成大部分的動作，會關閉這個視窗。

---

透過 Insert Headers and Footers 外掛處理

區域一：網站後台
Insert Headers and Footers 外掛的設定位置在 [網站後台] → [設定] 裡，如果看不到，請重新確認是否已經正確安裝。

區域二：HTML 語法的具體內容
點擊 Insert Headers and Footers 名稱，進入簡單的設定介面。

---

Insert Headers and Footers 外掛設定

區域一：網站後台
把之前從 Facebook Messenger 顧客聊天外掛程式複制的語法直接貼上來即可以看到效果。

區域二：確認正確無誤，請記得儲存資料
如果可以的話，請為語法寫上「註解」，方便後續管理，如沒問題，請按「儲存」按鈕。

---

實際測試程式效果

區域一：
點擊「登入 Messenger」會彈出登入和切換 Facebook 帳號的選項，這意味你將使用真實身分和這個網站互動，對方會知道你是誰。

區域二：
點擊「以訪客身分繼續」，站長不會知道你是誰，你的用戶名稱將由隨機的數字代替，可以保障你的個人隱私。

---

訪客和真實身份查詢的差異

區域一：
以匿名身分展開對話的訪客，個人頭像會是空白，用戶名稱會是「訪客 + 隨機數字」。

區域二：
如果使用真實身分和這個網站互動，對方內容會顯示用戶的個人頭像和用戶名稱。

---

方法二：[比較不推薦] 安裝 Facebook 官方外掛

使用 WordPress 的其中一個準則，能夠不用「外掛」就盡量不要使用，每堆疊一個外掛，都會有可能拖慢網站的速度和效能，既然有「不使用外掛」都能達到的方式，就盡量優先不用。

---

如何安裝 The Official Facebook Chat Plugin

---

外掛說明

Facebook 聊天室外掛程式是一項免費且容易使用的工具，能讓您和自家網站上的顧客建立聯繫。您只須點擊幾下，即可將外掛程式新增至網站，讓顧客在瀏覽網站時能傳送訊息給您。在您網站上展開的對話可延續到顧客的 Messenger 應用程式，讓您永遠不會與顧客失去聯繫。顧客即使沒有 Facebook Messenger 帳號，也可透過訪客模式和您對話，讓您順利觸及更多顧客。

BlendJet 執行長 Ryan Pamplin 表示：「提供開放的溝通管道能贏得顧客的信任，進而促使他們從瀏覽的階段前進到最終的結帳階段。」「我們發現，顧客與我們溝通互動後，完成結帳的可能性高出三到四倍。聊天室外掛程式讓我們能夠觸及更多顧客，因此自從提供這項顧客互動管道後，我們的銷售業績便已成長至三倍。」

---

常見問題 FAQ

---

參考資料和引用文獻：

• Facebook：Messenger Platform 政策概覽
• Facebook：在您的網站新增 Facebook 洽談附加程式
• 維基百科：Facebook 簡介
• WordPress 外掛目錄：The Official Facebook Chat Plugin
• WordPress 外掛目錄：Facebook 開發團隊
• 網站迷谷：如何新增 HTML、CSS 和 JavaScript 程式碼到你的網站裡？Insert Headers and Footers 外掛應用
• 網站迷谷：【5 大 FB 社團新功能】|回應投票|專家系統|社員檔案|壯大群組|標籤功能
• WPBeginner：How to Add Header and Footer Code in WordPress (the Easy Way)

---

WordPress 學員人數
15,000+ 人 (持續增加之中)