外贸网站如何配置Facebook Messenger插件代码?

时间:2022年11月07日 23:37

        最佳回答:外贸网站与海外客户及时方便的沟通,能够提升网站的转化率和询盘。借助 Facebook Messenger 平台的顾客聊天插件,您可以直接在自己的外贸网站中集成 Messenger 体验。这样,客户可以随时与您的公司互动,同时获得与使用 Messenger 一样的个性化富媒体体验。

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

      浏览器支持

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

     消息类型和模板支持

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

功能 是否支持

文本消息

视频/图片/音频/GIF

常规/按钮模板

是(支持有限按钮类型)

回传

网址按钮

呼叫按钮

购买按钮

“分享”按钮

登录按钮

退出按钮

玩游戏按钮

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

快速回复

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

文本快速回复

用户手机号快速回复

用户电子邮箱快速回复

位置快速回复

固定菜单

发送者操作

添加 SDK

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

本地化与国际化

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


插件的动态控制

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

设置插件

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

选项 1:使用设置工具

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

  1. 前往主页设置 > Messenger 平台

  2. 在“顾客聊天插件”版块,点击“设置”按钮。

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

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

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

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

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

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

    需要提供域名和 HTTPS

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

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

    • 通过 HTTPS 提供服务

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

    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 事件

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

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

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

    对于现有对话,如果您在添加顾客聊天插件时设置了 ref 属性,则当用户通过插件重新开启对话时,我们将向您的 Webhook 发送 messaging_referrals 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 事件中添加要传回的其他上下文,您可以传递一个可选的参考参数。此参数有许多用途,例如追踪用户启动对话的页面、将用户导向智能助手中可用的特定内容或功能,或将 Messenger 用户与网站上的会话或帐户进行连接。

禁用固定菜单

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

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

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

缓存行为

默认情况下,欢迎对话框会在桌面端显示,在移动端最小化。用户还可通过点击来显示或最小化对话框。此状态会在浏览器上缓存,甚至会在浏览器关闭或重新打开后继续保留。

检测消息来源

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

疑难问题解决方法

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

  • 如果您看到类似于“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 移动浏览器会默认拦截内容追踪,由此阻止系统显示此插件。只需关闭内容拦截(在搜索栏中点击灰色盾牌图标),此插件便会出现。