客戶聊天室附加程式(測試版)

透過 Messenger Platform 的客戶聊天室附加程式,您便可直接在網站中加入 Messenger 體驗。這樣,您的客戶便可隨時與您的企業互動,同時獲得在 Messenger 所享有的相同個人化多媒體體驗。

客戶聊天室附加程式會自動載入用戶與您企業之間的近期聊天記錄,因此他們將可以看到最近在 messenger.com、Messenger 應用程式或網站的客戶聊天室附加程式與您企業之間的互動。這樣有助於為您的客戶建立單一體驗,並可讓您在他們離開網站後延續對話。您不需要擷取他們的資料來進行後續追蹤,只要在 Messenger 中延續對話即可。

內容

功能支援

瀏覽器支援

客戶聊天室附加程式支援所有桌面電腦瀏覽器和流動瀏覽器(Messenger 應用程式內瀏覽器除外)。

訊息類型和範本支援

客戶聊天室附加程式目前支援下列訊息類型和結構化訊息範本:

功能 支援

文字訊息

影片/圖像/音訊/GIF

一般/按鈕範本

是(適用於少數按鈕類型)

回傳

網址按鈕

「致電」按鈕

「購買」按鈕

「分享」按鈕

「登入」按鈕

「登出」按鈕

「玩遊戲」按鈕

清單/媒體/開放式圖表範本

快速回覆

是(適用於少數快速回覆類型)

文字快速回覆

用戶電話號碼快速回覆

用戶電郵快速回覆

地點快速回覆

固定選單

傳送者動作

加入 SDK

若要使用客戶聊天附加程式,您必須在顯示附加程式的頁面中加入包含客戶聊天 SDK 的 Facebook JavaScript SDK 版本。

若要了解有關加入 SDK 的指示,請參閱客戶聊天 SDK

本地化與國際化

若要善用國際化功能(包括自動語言翻譯),您需要變更 SDK 的本地語言以符合您網站的本地語言。尤其是在初始化 SDK 時,您需要將 en_US 更改為系統支援的本地語言代碼。

若要瞭解更多資訊,請參閱使用社交附加程式和 JavaScript SDK 進行本地化

附加程式的動態控制

我們還提供了允許您動態控制附加程式特定行為的 API,例如打開和關閉對話框。

詳情請參閱客戶聊天室 SDK

設定附加程式

如要在網頁加入客戶聊天室附加程式,您可選擇使用設定工具,或使用開發人員步驟來設定:

選項 1:使用設定工具

對於專頁管理員,Messenger Platform 也提供了簡易設定工具,讓您自訂顧客聊天附加程式。若要使用設定工具,請遵循下列步驟:

  1. 前往專頁設定 > Messenger Platform
  2. 在「客戶聊天室附加程式」部分中,點擊「設定」按鈕。

設定工具提供了簡易用戶介面,可讓您自訂問候語、主題顏色,以及顯示的回應時間,並為附加程式設定獲列入允許清單的網域。

完成後,設定工具會自動產生可供您複製/貼上的程式碼片段,以便在網頁中加入客戶聊天室附加程式。

選項 2:使用開發人員步驟來設定

若要在網頁中加入客戶聊天室附加程式,請完成下列操作:

  1. 將網站網域列入允許清單

    基於安全理由,只有當附加程式於您已加入允許清單的網域載入時,附加程式才會正常顯示。請詳閱 whitelisted_domains 參考資料以瞭解如何透過程式輔助的方式,將網域加入允許清單。

    網域名稱與 HTTPS 為必要項目

    網域必須符合下列必要條件才能列入允許清單:

    • 透過 HTTPS 提供

    • 使用完全符合條件的網域名稱,例如 https://www.messenger.com/。IP 位址與 localhost 不支援允許清單。

    其 Messenger 體驗由服務供應商提供的企業由於並不擁有 Facebook 應用程式,因此將無法在應用程式設定中存取專頁憑證產生器。在這種情況下,您可以透過「專頁設定」新增或移除已加入允許清單的網域。若要將網域加入允許清單,請按照下列步驟進行:

    1. 點擊專頁上方的設定
    2. 點擊左側的 Messenger Platform
    3. 已列入允許清單的網域部分中,針對您的專頁編輯已加入允許清單的網域
  2. 在網頁中加入附加程式

    若要在網頁中加入附加程式,請在 HTML 中使用下列屬性加入 div
    <div class="fb-customerchat"
     page_id="<PAGE_ID>">
    </div>

    根據預設,問候語對話框會顯示在桌面電腦上,在流動裝置上則會隱藏。如要自訂問候語對話框行為,可使用 greeting_dialog_display 和「greeting_dialog_delay」屬性。

    建議擺放方式

    我們極力建議您不要更改位於網頁右下角的客戶聊天室附加程式預設位置。

    如需查看屬性的完整清單,請參閱客戶聊天室附加程式參考資料

  3. 選用。處理新對話的 messaging_postbacks 事件

    如果新對話是透過附加程式展開,且您的 Bot 已設定開始使用按鈕,那麼當用戶點擊該按鈕時,我們就會將 messaging_postbacks webhook 事件傳送到您的 webhook。

    如果您在加入客戶聊天室附加程式時設定了 ref 屬性,這個屬性就會包含在回傳事件中。

  4. 選用。處理現有對話的 messaging_referrals 事件

    若是現有對話,如果您在加入客戶聊天室附加程式時設定了 ref 屬性,則每次現有對話透過附加程式延續時,messaging_referrals webhook 事件都會傳送到 webhook。

    ref 可以是任何字串,並可用於各種用途。舉例來說,您可以使用它來追蹤哪些客戶曾透過附加程式與您的企業互動。

自訂附加程式

客戶聊天室附加程式支援下列自訂項目。當您的網頁加入了這個附加程式時,所有自訂項目都會設為屬性:

屬性 描述

theme_color

選用。用作為附加程式主題的顏色,包括客戶聊天室附加程式圖示的背景顏色,以及所有用戶訊息的背景顏色。支援任何以前導數字符號開頭的十六進制顏色代碼(如 #0084FF),白色除外。我們極力建議您選擇與白色呈極大對比的顏色。

logged_in_greeting

選用。在用戶已登入 Facebook 的狀態下顯示的問候語。最多 80 個字元。

logged_out_greeting

選用。在用戶未登入 Facebook 的狀態下顯示的問候語。最多 80 個字元。

greeting_dialog_display

選用。設定問候語對話框的顯示方式。我們所支援的值如下:


  • show:系統會在 greeting_dialog_delay 屬性所設定的秒數後於桌面電腦及流動裝置顯示問候語對話框,並保持開啟狀態。
  • hide:問候語對話框將一直隱藏,直至用戶在桌面版和流動版網頁點擊附加程式,系統才會顯示對話框。
  • fade:若是桌面版網頁,系統會在 greeting_dialog_delay 屬性所設定的秒數後短暫地顯示問候語對話框,然後對話框便會淡出。若是流動版網頁,對話框會一直隱藏。

若是桌面版網頁,附加程式設定將預設為 show,而流動版網頁則預設為 hide

greeting_dialog_delay

選用。設定附加程式載入後、問候語對話框顯示前的延遲秒數。這可讓您自訂您想問候語對話框出現的時機。

minimized

停用通知

這個屬性現已停用。請改用 greeting_dialog_display 以自訂您的附加程式。greeting_dialog_delay 屬性將優先於 minimized 屬性。

選用。

  • true 設定為 true 時,其效果與設定 greeting_dialog_delay = "fade" 相同。
  • false 設定為 false 時,其效果與設定 greeting_dialog_delay = "show" 相同。

ref

選用。如果想在 webhook 事件中加入要傳回的其他上下文,則可以傳遞一個可選的參考參數。此功能有許多用途,例如追蹤用戶啟動對話的頁面、將用戶帶至 Bot 中可用的特定內容或功能,或將 Messenger 用戶連繫至網站的作業階段或帳戶。

停用固定選單

有時候,我們會建議您停用客戶聊天室附加程式 Bot 的固定選單。若要這麼做,請在設定固定選單時新增 "disabled_surfaces": ["CUSTOMER_CHAT_PLUGIN"]

{
  "persistent_menu":[
    {
      "locale":"default",
      "disabled_surfaces": ["CUSTOMER_CHAT_PLUGIN"],
      "composer_input_disabled": false,      
      "call_to_actions":[
        {
          "title":"My Account",
          "type":"postback",
          "payload":"PAYBILL_PAYLOAD"
        }
      ]
    }
  ]
}

用戶登入

如果用戶已登入 Facebook 帳戶,他們將可立即與您的 Bot 聊天。如果用戶還未登入,系統會顯示預設的迎賓訊息,並提示他們登入或建立新的 Facebook 帳戶。

設有年齡或國家/地區限制的專頁

如果您的專頁在專頁設定中設定了年齡或國家/地區限制,則當未登入 Facebook 帳戶的用戶訪問您的網站時,系統不會顯示客戶聊天室附加程式。

快取行為

根據預設,問候語對話框會顯示在桌面版網頁中,並會在流動版網頁中保持最小化。用戶還可點擊以顯示或最小化對話框。系統會在瀏覽器上快取這個狀態,並在瀏覽器關閉或重新打開時保持相同狀態。

偵測訊息來源

有時候,您可能需要確定用戶是否透過客戶聊天室附加程式與您的企業互動。如要做到這一點,Messenger Platform 會針對所有來自附加程式的訊息,在所有回傳事件及訊息承載的 tags 陣列中加入 "source": "customer_chat_plugin"

"message": {
  "mid":"mid.14577641449818:41d102a3e1ae206a38",
  "text":"hello, from customer chat!",
  "tags": [
    {
      "source": "customer_chat_plugin"
    }
  ]
}

Wordpress 附加程式

為了讓您更輕鬆地將客戶聊天附加程式整合至 Wordpress 網站,我們現於 wordpress.org 提供會官方 Messenger 客戶聊天 Wordpress 附加程式。

解決疑難貼士

如果您無法讓附加程式正常顯示,請嘗試下列提示:

  • 如果您看到像「因上代違反內容安全政策指令:***,導致系統拒絕在框架中顯示***」這樣的主控台錯誤訊息,請檢查您是否已將要顯示附加程式的專頁網域加入允許清單。此外,請確定您並未將 Referrer-Policy 標頭設定為 no-referrer