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

添加 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 可以是任意字符串，并可用于多种目的。例如，您可以用它来追踪哪些客户通过插件与您的公司进行了互动。

自定义设置插件

顾客聊天插件支持下列自定义选项。将插件添加到您的网页中时，所有自定义选项都被设置为一项属性：

禁用固定菜单

有时您可能想要在顾客聊天插件中禁用智能助手的固定菜单。如要执行此操作，您需在设置固定菜单时添加 "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 帐户。

缓存行为

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

检测消息来源

有时，您可能需要确定用户是否在使用顾客聊天插件与您的公司互动。为实现这一点，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 移动浏览器会默认拦截内容追踪，由此阻止系统显示此插件。只需关闭内容拦截（在搜索栏中点击灰色盾牌图标），此插件便会出现。