顾客聊天插件(封测版)

借助 Messenger 顾客聊天插件,您可以直接在自己的网站中集成 Messenger 体验。这样,客户可以随时与您的公司互动,同时获得与使用 Messenger 一样的个性化富媒体体验。

该顾客聊天插件会自动加载客户与公司最近的聊天记录,无论是在 messenger.com 上,还是在 Messenger 应用中,又或是在您网站的顾客聊天插件中,只要是该客户最近与您公司之间的互动,都会显示出来。这有助于为客户打造不间断沟通的体验,同时确保即使在客户离开您的网页之后,您也能继续与他们之间的对话。集成这一插件后,您无需再为了跟进而四处捕捉客户的信息,只需在 Messenger 中打开与对方的对话即可。

目录

功能支持

浏览器支持

顾客聊天插件支持除 Messenger 应用内浏览器之外的所有桌面浏览器和移动浏览器。

消息类型和模板支持

目前,顾客聊天插件支持以下消息类型和结构化消息模板:

功能 是否支持

文本消息

视频/图片/音频/GIF

常规/按钮模板

是(支持有限按钮类型)

回传

网址按钮

呼叫按钮

购买按钮

“分享”按钮

登录按钮

退出按钮

玩游戏按钮

列表/媒体/开放图谱模板

快速回复

是(支持有限快速回复类型)

文本快速回复

用户手机号快速回复

用户电子邮箱快速回复

位置快速回复

固定菜单

发送者操作

添加 SDK

如要使用顾客聊天插件,您必须在要显示插件的主页中添加包含顾客聊天 SDK 的 JavaScript 版 Facebook SDK 版本。

如需获取有关添加 SDK 的说明,请参阅顾客聊天 SDK

本地化与国际化

如要发挥国际化的作用(包括使用自动语言翻译),您需要根据网站的语言设置更改 SDK 的语言。具体而言,在初始化 SDK 时,您需要将 en_US 更改为受支持的语言代码。

详情请参阅社交插件本地化和 JavaScript SDK

插件的动态控制

我们还会提供 API,以便您动态控制插件的特定行为,例如打开和关闭对话框。

详情请参阅顾客聊天 SDK

设置插件

如要在网页上添加顾客聊天插件,您可以使用设置工具或按照开发者步骤操作:

选项 1:使用设置工具

对于主页管理员,主页设置还提供易于使用的设置工具,方便他们自定义顾客聊天插件。如要使用设置工具,请执行下列操作:

  1. 前往主页设置 > 高级消息功能
  2. 在“顾客聊天插件”版块,点击“设置”按钮。

设置工具用户界面简洁,可方便您自定义欢迎语、主题颜色、显示的回复时间,以及为插件设置网域白名单。

完成设置后,设置工具会自动生成代码片段,您只需复制/粘贴此代码片段,便可在您的网页中添加顾客聊天插件。

选项 2:使用开发者步骤进行设置

如要在网页上添加顾客聊天插件,请执行下列操作:

  1. 将您网站的域加入白名单

    为安全起见,此插件只有在加载到已加入白名单的网域时才会显示。请参阅 whitelisted_domains 参考文档,了解如何以编程方式将网域加入白名单。

    需要提供域名和 HTTPS

    域必须满足以下要求才能加入白名单:

    • 通过 HTTPS 提供服务

    • 使用完全限定的域名,例如 https://www.messenger.com/。不支持使用 IP 地址和 localhost 加入白名单。

    公司如果通过服务提供商提供 Messenger 体验,即表示他们不是相关 Facebook 应用的所有者,因而没有权限使用应用设置中的主页访问口令生成器。在这种情况下,您可通过主页设置添加或删除白名单域。要将域加入白名单,请执行以下操作:

    1. 点击主页顶部的设置
    2. 点击左侧的 Messenger 平台
    3. 白名单域版块中编辑主页的白名单域
  2. 在网页上添加插件

    如要在您的网页添加插件,请在 HTML 中加入 div 并将其属性设置为以下值:
    <div class="fb-customerchat"
     page_id="<PAGE_ID>">
    </div>

    默认情况下,桌面端和移动端会显示欢迎对话框。如需自定义欢迎对话框行为,您可以使用 greeting_dialog_display 和“greeting_dialog_delay”属性。

    推荐位置

    默认情况下,顾客聊天插件会显示在页面的右下角,我们强烈建议您不要更改这一默认位置。

    如需查看完整的属性列表,请参阅顾客聊天插件参考文档

  3. 可选。处理新对话的 messaging_postbacks 事件

    如果用户通过插件发起新对话,且您的智能助手已设置“开始”按钮,则当用户点击此按钮时,我们将向您的 Webhook 发送 messaging_postbacks Webhook 事件

    如果在添加顾客聊天插件时设置了 ref 属性,则回传事件中将包含该属性。

  4. 可选。处理现有对话的 messaging_referrals 事件

    对于现有对话,如果您在添加顾客聊天插件时设置了 ref 属性,则当用户通过插件重新开启对话时,我们将向您的 Webhook 发送 messaging_referrals 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

可选。设置插件加载后延迟多少秒才显示欢迎对话框。您可使用此属性自定义欢迎对话框的显示时机。如果设置了 greeting_dialog_delay,但未设置 greeting_dialog_display,我们仍会延迟在桌面上显示欢迎对话框,但在移动设备上不会延迟显示。

ref

可选。如果想要在 Webhook 事件中添加要传回的其他上下文,您可以传递一个可选的参考参数。此参数有许多用途,例如追踪用户启动对话的页面、将用户导向智能助手中可用的特定内容或功能,或将 Messenger 用户与网站上的会话或帐户进行连接。

禁用固定菜单

有时您可能想要在顾客聊天插件中禁用智能助手的固定菜单。如要执行此操作,您需在设置固定菜单时添加 "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 帐户的用户可以立即发起与智能助手的对话。如果用户尚未登录,默认情况下,页面会显示一条欢迎消息,邀请用户登录或新建 Facebook 帐户。

含年龄/国家/地区限制的主页

如果您的主页已在主页设置中设置年龄或国家/地区限制,则当未登录 Facebook 帐户的用户访问您的网站时,顾客聊天插件不会显示。

缓存行为

系统会在浏览器上缓存欢迎对话框,并在浏览器关闭或重新打开时保持相同状态。插件会根据浏览器缓存(Safari 12 浏览器除外),默认使用用户离开时的最后状态。

默认情况下,每收到新的插件请求,桌面端和移动端均会显示欢迎对话框。用户可点击“关闭”按钮来最小化对话框,或使用自己的显示偏好设置覆写请求默认值。

检测消息来源

有时,您可能需要确定用户是否在使用顾客聊天插件与您的公司互动。为实现这一点,对于所有通过插件发送的消息,Messenger 平台将在消息负载中包含 "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 插件。

疑难问题解决方法

如果无法正常呈现此插件,请尝试以下解决方法:

  • 如果您看到类似于“Refused to display *** in a frame because an ancestor violates the following Content Security Policy directive: ***”的控制台错误,请检查显示插件的页面网域是否已加入白名单。另外,请确保您未将 Referrer-Policy 标头设置为 no-referrer
  • Firefox Facebook Container 附加程序会阻止系统显示此插件。如要显示该插件,请移除此附加程序。
  • Firefox 桌面私人浏览器(版本 63 及以上)和 Firefox 移动浏览器会默认拦截内容追踪,由此阻止系统显示此插件。只需关闭内容拦截(在搜索栏中点击灰色盾牌图标),此插件便会出现。