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

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

    轉介 Webhook 事件範例

    {
        "object": "page",
        "entry": [
            {
                "id": "<PAGE_ID>",
                "time": 1559598385735,
                "messaging": [
                    {
                        "recipient": {
                            "id": "<PAGE_ID>"
                        },
                        "timestamp": 1559598385735,
                        "sender": {
                            "id": "<USER_PSID>"
                        },
                        "referral": {
                            "ref": "<DEVELOPER_DEFINED_REFERRAL>",
                            "source": "CUSTOMER_CHAT_PLUGIN",
                            "type": "OPEN_THREAD",
                            "referer_uri": "<REFERRAL_URI>"
                        }
                    }
                ]
            }
        ]
    }

自訂附加程式

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

屬性 描述

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。詳情請參閱下方的快取行為部分。

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"]

Messenger 個人檔案 API 承載範例

{
  "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 帳戶的用戶訪問您的網站時,系統不會顯示客戶聊天室附加程式。

快取行為

系統會在瀏覽器上快取問候語對話框,並在瀏覽器關閉或重新開啟時保持相同狀態。附加程式會根據瀏覽器快取(Safari 12 瀏覽器除外),一律預設為用戶離開時的最後狀態。

在預設情況下,每次收到新的附加程式要求時,桌面電腦及流動裝置均會顯示問候語對話框。用戶可以點擊關閉按鈕,將對話框縮到最小,或使用自己的顯示偏好設定,覆寫要求的預設值。

偵測訊息來源

有時候,您可能需要確定用戶是否透過客戶聊天附加程式與您的企業互動。如要做到這一點,對於所有透過附加程式傳送的訊息,Messenger Platform 將在訊息承載中包含 "source": "customer_chat_plugin" 屬性

訊息 Webhook 事件範例

{
    "object": "page",
    "entry": [
        {
            "id": "<PAGE_ID>",
            "time": 1559598624359,
            "messaging": [
                {
                    "sender": {
                        "id": "<USER_PSID>"
                    },
                    "recipient": {
                        "id": "<PAGE_ID>"
                    },
                    "timestamp": 1559598623749,
                    "message": {
                        "tags": {
                            "source": "customer_chat_plugin"
                        },
                        "mid": "nhEqs_THGoYyAhpK93uNCrIfLZD...",
                        "text": "hello, from customer chat!"
                    }
                }
            ]
        }
    ]
}

Wordpress 附加程式

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

解決疑難貼士

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

  • 如果您看到像「因上代違反內容安全政策指令:***,導致系統拒絕在框架中顯示***」這樣的主控台錯誤訊息,請檢查您是否已將要顯示附加程式的專頁網域加入允許清單。此外,請確定您並未將 Referrer-Policy 標題設定為 no-referrer
  • Firefox Facebook 容器附加程式會阻止系統顯示此附加程式。如果您想顯示此附加程式,請先移除該容器附加程式。
  • 根據預設,Firefox 桌面版私人瀏覽器(版本 63 及以上)及 Firefox 流動瀏覽器會封鎖內容追蹤功能,從而阻止系統顯示此附加程式。只需關閉內容封鎖功能(點擊搜尋欄中的灰色盾牌圖示),此附加程式便會出現。