FB聊天訊息對話框嵌入網站
【教學】Meta Facebook Messenger嵌入碼在哪?如何嵌入網站?|天矽網頁設計
獲取Facebook Messenger嵌入碼
以下是獲取Facebook Messenger嵌入碼的方式,要記得在獲取嵌入碼之前,要使用「最高權限管理者」的帳號才可以繼續唷!
➤ 步驟一:進入Meta Business Suite
首先我們需要有一個粉絲專頁,若已經成立完成,則可前往「Meta Business Suite」開始進行設定。
➤ 步驟二:進入收件匣
在Meta Business Suite中找到「收件匣」並點選進入。
➤ 步驟三:進入查看所有設定
在收件匣畫面中,找到右上方的齒輪icon點選後,找到「查看所有設定」的按鈕並點擊進入。
➤ 步驟四:選擇洽談外掛程式中的設定
點選所有設定後,即可進入「收件匣設定」之介面,找到「洽談外掛程式」、選擇「設定你的洽談外掛程式」中的「設定」按鈕,並點選進入。
➤ 步驟五:設定方式選擇標準
這裡選擇設定方式,除非你的網站是使用WordPress、Shopify、Wix、Squarespace…等畫面中出現的方式,不然一般選擇「標準」就可以了。
➤ 步驟六:設定語言
為你的外掛程式選擇語言,通常台灣的網站都是選「中文(台灣)」即可,若有特殊可選擇其他顯示語言。
➤ 步驟七:新增網域
這裡新增你要嵌入的網站的網域(就是網站的網址),若在Facebook粉絲專頁上已有提供網站的網址,系統就會自動幫你抓進來,要是還需要新增其他網域,也可點選下方「新增網域」的按鈕繼續新增,如果不需要就點選「儲存並繼續」即可。
➤ 步驟八:複製程式碼
完成後就可以獲得一段程式碼,也就是Facebook Messenger的嵌入碼唷!
➤ 步驟九:貼上程式碼於<body>標籤後方
複製此段程式碼後,只要提交給網頁設計公司協助處理即可,複製方式除了一般的複製之外,也可以使用電子郵件寄送的方式處理;若要自行貼上此程式碼,可將此貼於<body>標籤後方。
➤ 步驟十:完成
到步驟九完成後,就已經成功囉!
接下來若有需要再自行設定外掛的相關資訊,比如自動化、顯示離線時間、問候語、歡迎訊息、專屬外掛樣式…等,則可再繼續停留在本頁,繼續相關的設定。
打造專屬的Facebook Messenger外掛程式
這裡的設定與否,可依企業需求而訂定,可以另行調整也可以不用,不過在設定完畢之後,一定要記得按下最右下方的「發布」按鈕,所設定的相關資訊才會同步更新喔!
Facebook Messenger自動化設定
「根據你設定的排程新增自動化訊息。你也可以向網站訪客顯示常見問題和自訂的回覆。」
- 離線時間:
系統會根據你為離線,自動回覆訊息設定的時間,自動將狀態和問候語從「在線上」更新為「離線」;也可透過排程,將狀態自動更新。
- 問候語:
作用是邀請用戶聊天。這個問候語只會顯示在網站上的聊天按鈕旁邊,不會出現在對話的訊息之中。
- 歡迎訊息:
客人點選「開始聊天」後,歡迎對方進入聊天室的訊息。
- 常見問題:
開啟「常見問題」功能的先決條件是必須將「歡迎訊息」開啟,這裡可以建立客人常詢問的問題並由系統自動回覆,減少過多不必要的重複性問題。
Facebook Messenger專屬外掛程式設定
「根據品牌風格變更洽談外掛程式的色彩和對齊方式。」
- 訪客洽談:
這個功能讓在我們網站上的客人,不必另外登入Facebook就能以訪客的身分繼續與企業溝通對話,如果沒有開啟這個選項,那麼就請客人登入Facebook才能繼續對話。
- 變更外掛程式的色彩:
這裡可以自行調整外掛的顏色,調整色彩讓外掛更貼近企業識別。
- 變更聊天按鈕、圖示與文字:
嵌入的聊天按鈕與圖示風格的外觀,Facebook提供了各三種樣式讓我們選擇,而聊天按鈕的文字也可以選擇「聊天」、「向我們詢問」或是「尋求協助」三種選項。
- 顯示方式:
顯示方式可選擇外掛在網站呈現時,想要的顯著程度,一樣有三種選項,分別是「按鈕」、「按鈕和問候」和「洽談外掛程式視窗」。
- 聊天按鈕、視窗大小選擇:
可選擇聊天按鈕的大小,並可分別設定桌上型電腦和手機的大小。
- 位置設定:
控制外掛在網站上的位置,可選擇對齊方式與底部間距,底部間距同樣也可分為桌面板與行動版分開調整。
- 發布:
記得!記得!
設定完畢之後一定要要按發布,變更的內容才會更新喔!要查看變更,請重新整理網站瀏覽器,才能查看變更後的樣式。