This bar serves to notify visitors of important updates

1
首页 博客 外贸网站如何配置Facebook Messenger插件代码？
发布时间： 2019-04-18
浏览数量： 1256
作者： 山东支点网络Kevin
来源： 山东支点网络科技有限公司

        最佳回答：外贸网站与海外客户及时方便的沟通，能够提升网站的转化率和询盘。借助 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 移动浏览器会默认拦截内容追踪，由此阻止系统显示此插件。只需关闭内容拦截（在搜索栏中点击灰色盾牌图标），此插件便会出现。