FB聊天訊息對話框嵌入網站

【教學】Meta Facebook Messenger嵌入碼在哪?如何嵌入網站?|天矽網頁設計

【教學】Meta Facebook Messenger嵌入碼在哪?如何嵌入網站?|天矽網頁設計

 

由於Facebook的操作介面會不斷的更新與改版,因此設定的位置有可能會因為版本更新而改變位置,因此若在下方教學文章中找不到正確的位置,很有可能是Facebook又改版了唷!

獲取Facebook Messenger嵌入碼


 以下是獲取Facebook Messenger嵌入碼的方式,要記得在獲取嵌入碼之前,要使用「最高權限管理者」的帳號才可以繼續唷!

 

步驟一:進入Meta Business Suite

首先我們需要有一個粉絲專頁,若已經成立完成,則可前往「Meta Business Suite」開始進行設定。

Facebook Messenger嵌入碼

 

步驟二:進入收件匣

在Meta Business Suite中找到「收件匣」並點選進入。

Facebook Messenger嵌入碼

 

步驟三:進入查看所有設定

在收件匣畫面中,找到右上方的齒輪icon點選後,找到「查看所有設定」的按鈕並點擊進入。

Facebook Messenger嵌入碼

 

步驟四:選擇洽談外掛程式中的設定

點選所有設定後,即可進入「收件匣設定」之介面,找到「洽談外掛程式」、選擇「設定你的洽談外掛程式」中的「設定」按鈕,並點選進入。

Facebook Messenger嵌入碼

 

步驟五:設定方式選擇標準

這裡選擇設定方式,除非你的網站是使用WordPress、Shopify、Wix、Squarespace…等畫面中出現的方式,不然一般選擇「標準」就可以了。

Facebook Messenger嵌入碼

 

步驟六:設定語言

為你的外掛程式選擇語言,通常台灣的網站都是選「中文(台灣)」即可,若有特殊可選擇其他顯示語言。

Facebook Messenger嵌入碼

 

步驟七:新增網域

這裡新增你要嵌入的網站的網域(就是網站的網址),若在Facebook粉絲專頁上已有提供網站的網址,系統就會自動幫你抓進來,要是還需要新增其他網域,也可點選下方「新增網域」的按鈕繼續新增,如果不需要就點選「儲存並繼續」即可。

Facebook Messenger嵌入碼

 

步驟八:複製程式碼

完成後就可以獲得一段程式碼,也就是Facebook Messenger的嵌入碼唷!

Facebook Messenger嵌入碼

 

步驟九:貼上程式碼於<body>標籤後方

複製此段程式碼後,只要提交給網頁設計公司協助處理即可,複製方式除了一般的複製之外,也可以使用電子郵件寄送的方式處理;若要自行貼上此程式碼,可將此貼於<body>標籤後方

Facebook Messenger嵌入碼

 

步驟十:完成

到步驟九完成後,就已經成功囉!
接下來若有需要再自行設定外掛的相關資訊,比如自動化、顯示離線時間、問候語、歡迎訊息、專屬外掛樣式…等,則可再繼續停留在本頁,繼續相關的設定。

Facebook Messenger嵌入碼

 

打造專屬的Facebook Messenger外掛程式


 這裡的設定與否,可依企業需求而訂定,可以另行調整也可以不用,不過在設定完畢之後,一定要記得按下最右下方的「發布」按鈕,所設定的相關資訊才會同步更新喔!

Facebook Messenger外掛程式

 

Facebook Messenger自動化設定

「根據你設定的排程新增自動化訊息。你也可以向網站訪客顯示常見問題和自訂的回覆。」

Facebook Messenger外掛程式

  • 離線時間:
    系統會根據你為離線,自動回覆訊息設定的時間,自動將狀態和問候語從「在線上」更新為「離線」;也可透過排程,將狀態自動更新。
    Facebook Messenger外掛程式

 

  • 問候語:
    作用是邀請用戶聊天。這個問候語只會顯示在網站上的聊天按鈕旁邊,不會出現在對話的訊息之中。
    Facebook Messenger外掛程式

 

  • 歡迎訊息:
    客人點選「開始聊天」後,歡迎對方進入聊天室的訊息。
    Facebook Messenger外掛程式

 

  • 常見問題:
    開啟「常見問題」功能的先決條件是必須將「歡迎訊息」開啟,這裡可以建立客人常詢問的問題並由系統自動回覆,減少過多不必要的重複性問題。
    Facebook Messenger外掛程式

 

 

Facebook Messenger專屬外掛程式設定

「根據品牌風格變更洽談外掛程式的色彩和對齊方式。」

Facebook Messenger外掛程式

 

  • 訪客洽談:
    這個功能讓在我們網站上的客人,不必另外登入Facebook就能以訪客的身分繼續與企業溝通對話,如果沒有開啟這個選項,那麼就請客人登入Facebook才能繼續對話。
    Facebook Messenger外掛程式

 

  • 變更外掛程式的色彩:
    這裡可以自行調整外掛的顏色,調整色彩讓外掛更貼近企業識別。
    Facebook Messenger外掛程式

 

  • 變更聊天按鈕、圖示與文字:
    嵌入的聊天按鈕與圖示風格的外觀,Facebook提供了各三種樣式讓我們選擇,而聊天按鈕的文字也可以選擇「聊天」、「向我們詢問」或是「尋求協助」三種選項。
    Facebook Messenger外掛程式

 

  • 顯示方式:
    顯示方式可選擇外掛在網站呈現時,想要的顯著程度,一樣有三種選項,分別是「按鈕」、「按鈕和問候」和「洽談外掛程式視窗」。
    Facebook Messenger外掛程式

 

  • 聊天按鈕、視窗大小選擇:
    可選擇聊天按鈕的大小,並可分別設定桌上型電腦和手機的大小。
    Facebook Messenger外掛程式

 

  • 位置設定:
    控制外掛在網站上的位置,可選擇對齊方式與底部間距,底部間距同樣也可分為桌面板與行動版分開調整。
    Facebook Messenger外掛程式

 

  • 發布:
    記得!記得!
    設定完畢之後一定要要按發布,變更的內容才會更新喔!要查看變更,請重新整理網站瀏覽器,才能查看變更後的樣式。
    Facebook Messenger外掛程式

 

 

share FB LINE
看天矽作品集 回上一頁
ID:@323foylw