第一步：准备工作

在开始之前,请确保您已经完成了以下准备：

网站添加messenger
（图片来源网络，侵删）

  1. 拥有一个 Facebook 公共主页：

    • Messenger 聊天插件是与您的 Facebook 公共主页绑定的，如果您还没有，请先在 Facebook 上创建一个。
    • 重要提示：请使用您的业务主页，而不是个人主页，业务主页更专业，也符合 Facebook 的政策。

  2. 获取主页 ID：

    • 您需要主页 ID 来配置插件，获取方法很简单：
      • 打开您的 Facebook 业务主页。
      • 在浏览器地址栏中，URL 通常是这样的：https://www.facebook.com/[您的用户名]
      • 将 [您的用户名] 替换为 pages/ 然后加上一串数字，如果您的用户名是 mybusinesspage，您可以将地址栏改为：https://www.facebook.com/pages/mybusinesspage/123456789012345
      • 那串 123456789012345 就是您的 Page ID。

第二步：选择添加方式

以下是几种最常见的方式,您可以根据自己的需求选择。

使用 Facebook 官方聊天插件（最推荐，免费且强大）

这是最常用、功能最全的免费方式，它会在您网站的右下角显示一个聊天窗口，访客可以直接与您的 Messenger 对话。

网站添加messenger
（图片来源网络，侵删）

优点：

  • 完全免费。
  • 功能强大：支持自动回复、常问问题、打字指示器、富媒体消息（图片、按钮等）。
  • 可以将对话引导至 Messenger 手机 App。
  • 数据分析：可以查看消息摘要、回复率等数据。

添加步骤：

  1. 访问配置页面：

  2. 配置插件：

    网站添加messenger
    （图片来源网络，侵删）
    • 输入 Page ID：将您在第一步中找到的 Page ID 填入输入框。
    • 语言：选择插件显示的语言。
    • 颜色主题：选择浅色或深色主题,以匹配您的网站设计。
    • Greeting Text：设置访客打开聊天窗口时看到的第一句话。“您好！有什么可以帮您的吗？”
    • Referral Page：设置当访客从特定页面打开聊天时,可以显示不同的欢迎语。
    • Signed Request：高级选项,通常保持默认即可。

  3. 获取代码：

    • 点击页面底部的 “Generate Your Plugin Code”（生成您的插件代码）按钮。
    • 您会得到两段代码：<div> 标签和 <JavaScript SDK> 代码。

  4. 将代码添加到您的网站：

    • <div> 代码：将这段 <div id="fb-root"></div> 和 <div class="fb-customerchat" attribution="setup_tool" page_id="您的PageID"></div> 复制并粘贴到您网站 HTML 的 <body> 标签内，通常建议放在 <body> 的最末尾，就在 </body> 标签之前，这个 <div> 元素就是聊天窗口的容器。
    • <JavaScript SDK> 代码：将这段 <script>...</script> 代码复制并粘贴到您网站 HTML 的 <head> 标签内，或者放在 <body> 标签的开头，这段代码用于加载 Facebook 的 SDK。

  5. 保存并测试：

    保存您网站的更改，然后刷新页面，稍等片刻,右下角就会出现聊天按钮了。

添加“发送到 Messenger”按钮（适合引导用户）

这个方式不会在网站上直接打开聊天窗口，而是生成一个按钮，当访客点击后，会收到一个通知，点击通知才能在 Messenger 中与您对话。

适用场景：

  • 在广告落地页上,引导潜在客户发起对话。
  • 在博客文章或内容的末尾,邀请用户提问。

添加步骤：

  1. 访问配置页面：

  2. 配置按钮：

    • 输入您的 Page ID。
    • 设置按钮的样式（图标、大小）。
    • 设置 User Data：可以收集用户的名字和邮箱（需要用户授权）。
    • 设置 Pre-Checkout 等高级功能（用于电商）。

  3. 获取代码并安装：

    • 生成代码后，同样会得到 HTML 和 JavaScript 代码。
    • 将 HTML 代码（<fb-send-to-messenger> 标签）放在您希望按钮显示的位置。
    • 将 JavaScript SDK 代码放在 <head> 或 <body> 开头（与方式一相同）。

使用第三方聊天平台（功能更集成）

如果您希望将 Messenger 与其他渠道（如 WhatsApp、Instagram、邮件、网站内置聊天）整合在一个统一的聊天窗口中,可以考虑第三方平台。

优点：

  • 统一收发消息：在一个后台管理来自 Messenger、WhatsApp 等所有消息。
  • 团队协作：可以将对话分配给不同的客服人员。
  • 自动化功能：提供更强大的机器人、自动回复和工单系统。
  • 数据分析：提供更详细的客户行为分析。

知名平台：

  • ManyChat：非常流行,专注于聊天机器人和自动化营销。
  • Chatfuel：与 ManyChat 类似,也是强大的聊天机器人构建平台。
  • Tidio：提供网站内置聊天窗口，并可以连接 Facebook Messenger。
  • SendPulse：集成了邮件、短信和聊天机器人。

一般流程：

  1. 注册并选择一个第三方平台。
  2. 在平台中连接您的 Facebook 公共主页。
  3. 根据平台的指引,将它们提供的代码片段安装到您的网站上。
  4. 在平台的后台设置您的聊天流程、机器人规则和客服团队。

使用网站构建器（如 Wix, Squarespace）

如果您使用的是 Wix、Squarespace、Shopify 等网站构建器，它们通常都提供了官方的 Facebook Messenger 集成插件,操作非常简单。

以 Wix 为例：

  1. 登录您的 Wix 后台。
  2. 点击“添加”（Add）> “更多应用”（More Apps）> “市场”（Marketplace）。
  3. 搜索 “Facebook Messenger” 或 “Chat”。
  4. 选择一个官方或评价高的插件，点击“添加到站点”（Add to Site）。
  5. 按照插件向导授权您的 Facebook 账户并设置样式。

这种方式无需写代码,对新手最友好。

第三步：最佳实践和注意事项

  1. 不要滥用：不要在访客一进入网站时就弹出聊天窗口，这可能会打扰到用户,可以让访客主动点击按钮开启对话。
  2. 设置欢迎语：一个好的欢迎语可以引导访客提问，“您好！欢迎光临，请问有什么可以帮助您的吗？”
  3. 响应要及时：既然提供了实时沟通，就请确保有人在工作时间快速回复，设置“自动回复”告知用户您的服务时间。
  4. 移动端友好：确保聊天插件在手机上也能正常显示和使用。
  5. 遵守政策：请务必遵守 Facebook 的平台政策,不要发送垃圾信息或进行违规营销。
方式 优点 缺点 适用人群
官方聊天插件 免费、功能强大、官方支持 需要手动安装代码 所有希望免费、专业地集成 Messenger 的网站
发送到 Messenger 按钮 引导性强、不打扰用户 需要用户额外点击才能对话 广告落地页、内容页等需要引导转化的场景
第三方平台 统一管理、功能更集成、团队协作 通常是付费服务，月费制 需要管理多个沟通渠道、有客服团队的中大型企业
网站构建器插件 无需代码、安装简单 可定制性较低、受限于平台 使用 Wix, Shopify 等建站平台的新手用户

对于大多数网站，强烈推荐从方式一开始，即使用 Facebook 官方的聊天插件,它提供了最佳的功能与成本平衡。