在 WhatsApp Business 开放平台上发送互动消息

2022年11月21日发布者：Rashed Talukder

WhatsApp Business 开放平台中引入由 Meta 托管的云端 API 之后，各公司正在摸索新的方法，以在各自项目中充分利用 WhatsApp 的作用。其中一大发现就是 WhatsApp 互动消息功能，该功能可丰富交流体验，且支持公司使用标准文本信息之外的内容与客户互动。

本文重点讲述 WhatsApp 互动消息功能，并探索如何借助云端 API 发送互动消息。对此，本文使用简单的 Node.js 应用程序进行了演示。

互动消息

互动消息是指一类消息，支持用户使用其中提供的提示与之互动。例如，用户可以从一个产品选项清单中选择一个需要的项目。

另外，互动消息还支持为用户提供量身定制的选项，使用户无需在您网站上浏览大量产品清单。这种消息可帮助您提高回复率。

本文着眼于云端 API 提供的两种互动消息功能（清单消息和回复按钮）及其使用方法。

清单消息中包含一个菜单，里面最多可提供十个选项供用户选择。该菜单对用户可以选择的选项进行了概述。这些选项可以包括餐厅特色菜、送货时间、预约时间、T 恤颜色等。

回复按钮在一条消息中可最多提供三个按钮选项，用户可选择其中一个来作出回复。这些按钮可使用“是”或“否”等有所区别的答案快速响应消息。

您可以在对话流程中结合使用上述不同的消息类型。例如，您可以结合使用清单消息和回复按钮，使用户可以选择一个选项，然后根据该选项执行一个操作。

这些消息类型仅限用于在用户与您联系后的 24 小时内回复用户发起的对话。

在应用中添加互动消息

熟悉互动消息之后，下面我们来看如何在您的应用程序中实现这些互动消息。进入本教程之前，请以 Meta 开发者身份注册，并创建一个应用。详情请点击此处。

创建 Meta 应用可让您获得一个临时访问口令、测试电话号码和电话号码编号。您必须添加一个收信人电话号码用以接收示例消息。您将需要记录这些值，以供后续使用。

前提条件

您必须已安装 Node.js 和能够解析 Javascript 及其他文件的集成开发环境 (IDE)。本文将演示 Visual Studio Code 中的开发工作。您将需要根据相应文档中列出的以下步骤，将该应用程序的一部分作为 Heroku 应用启动，但应使用此处引用的应用程序代码。

若要使用测试电话号码发送和接收 WhatsApp 消息，请完整阅读设置开发者资产和开放平台访问权限教程。您将使用 Heroku 应用的网址来设置 Webhooks。

该项目的完整代码可在 GitHub 上获取，其中包含 Node.js 应用程序代码。

设置环境

若要发送互动消息，需要向以下网址发送 HTTP 请求：

 https://graph.facebook.com/{{API_VERSION}}/{{YOUR_PHONE_NUMBER_ID}}/messages.

附上消息对象，设置 type=interactive，然后添加互动对象。

若要查看实际效果，必须使用以下步骤创建 Node.js 应用程序。

创建一个文件夹，用于存储该应用程序。在 VS Code 中打开该文件夹。打开一个终端窗口，运行命令 npm init ，为项目设置新的 npm 包。接受所有默认设置，然后对各提示都回复“是”。您现在应该拥有了一个项目文件夹，其中包含一个 package.json 文件，如下所示：

在开发期间，为便于将所有配置保存在一个位置，而不是将其分散在代码之间，请将其置于一个文件中。

使用以下配置，在项目根目录下创建一个 .env 文件：

APP_ID=<<YOUR-WHATSAPP-BUSINESS-APP_ID>>
APP_SECRET=<<YOUR-WHATSAPP-BUSINESS-APP_SECRET>>
RECIPIENT_PHONE_NUMBER=<<THE-TEST-RECIPIENT-PHONE-NUMBER>>
VERSION=v13.0
PHONE_NUMBER_ID=<<YOUR-WHATSAPP-BUSINESS-PHONE-NUMBER-ID>>
ACCESS_TOKEN=<<YOUR-SYSTEM-USER-ACCESS-TOKEN>>

现在，在 package.json 所属的同级目录下，新建一个文件，并命名为 index.js。安装 Axios，以向图谱 API 发出异步调用。运行命令 npm install axios ，安装最新版本。

设置好环境之后，将以下代码复制并粘贴到 index.js 文件中：

const axios = require("axios");
require('dotenv').config();

const accessToken = process.env.ACCESS_TOKEN;
const apiVersion = process.env.VERSION;
const recipientNumber = process.env.RECIPIENT_PHONE_NUMBER;
const myNumberId = process.env.PHONE_NUMBER_ID;

// Update this variable to the interactive object to send
const interactiveObject = {}; 

let messageObject = {
    messaging_product: "whatsapp",
    recipient_type: "individual",
    to: `${recipientNumber}`,
    type: "interactive",
    interactive: listInteractiveObject
};
 
axios
  .post(
    `https://graph.facebook.com/${apiVersion}/${myNumberId}/messages`,
    messageObject,
    {
      headers: {
        Authorization: `Bearer ${accessToken}`,
      },
    }
  );

现在，为每种消息类型创建一个互动对象。

清单消息

按如下方式修改 interactiveObject ：

const interactiveObject = {
  type: "list",
  header: {
    type: "text",
    text: "Select the food item you would like.",
  },
  body: {
    text: "You will be presented with a list of options to choose from",
  },
  footer: {
    text: "All of them are freshly packed",
  },
  action: {
    button: "Order",
    sections: [
      {
        title: "Section 1 - Fruit",
        rows: [
          {
            id: "1",
            title: "Apple",
            description: "Dozen",
          },
          {
            id: "2",
            title: "Orange",
            description: "Dozen",
          },
        ],
      },
      {
        title: "Section 2 - Vegetables",
        rows: [
          {
            id: "3",
            title: "Spinach",
            description: "1kg ",
          },
          {
            id: "2",
            title: "Broccoli",
            description: "1kg",
          },
        ],
      },
    ],
  },
};

上方对象定义了一个清单消息，其中的项目分为两大类：水果和蔬菜。每一类都有两个项目。

发送清单消息的准备工作至此便已完成。但是，请记住，您仅可在回复用户发起的消息时，才能发送清单和按钮。首先，使用测试收信人的电话号码向测试商家号码发出一条消息。发起对话后，在终端中运行命令 node index.js 。

收信人将收到以下消息，且能通过点击“发送”按钮进行回复：

借助清单消息，用户可以从提供的清单中选择他们偏好的项目，此处是 12 个橙子。然而，清单功能目前仅允许一次选择一个项目，需要选择多项的客户将需要为每个选项反复使用同一个清单。

回复按钮

接下来，我们来讨论如何使用回复按钮快速回复您发送的消息或问题。

若要使用回复按钮发送消息，按如下方式将 回复按钮 对象指定为 interactiveObject ：

const interactiveObject = {
  "type": "button",
  "header": {
      "type": "text",
      "text": "Dear valued customer."
  },
  "body": {
      "text": "Would you like to receive marketing messages from us in the future?"
  },
  "footer": {
      "text": "Please select an option"
  },
  "action": {
      "buttons": [
          {
              "type": "reply",
              "reply": {
                  "id": "1",
                  "title": "Yes"
              }
          },
          {
              "type": "reply",
              "reply": {
                  "id": "2",
                  "title": "No"
              }
          },
          {
              "type": "reply",
              "reply": {
                  "id": "3",
                  "title": "Never"
              }
          }
      ]
  }
}

这将定义一条消息，其中包含三个按钮，供用户点击作为回复。

再次运行命令 node index.js。收信人将收到一条消息，且能通过点击以下按钮之一进行回复：

结合使用清单消息和回复按钮

到目前为止，您已了解如何在不同消息中发送清单和回复按钮。如要增强用户的激情和愉悦之感，您可以在单个消息流程中结合使用清单消息和回复按钮。要实现此目的，您必须能使用适当的消息回复传入的消息。

例如，根据以上几个示例，用户发起对话时，您发送一个清单消息，其中包含多个选项可供用户选择。用户使用某个选项回复后，您就可以使用回复按钮发送一条消息，以便他们确认选择。

如要实现此目的，您必须知道用户何时发送消息。通过设置 Webhooks（WhatsApp Business 开放平台的一项功能），您会收到这些通知。

由于已在前文做出详细介绍，我们会以流程大纲的形式介绍本教程：

在可以处理 HTTPS 请求的安全服务器上创建一个端点。对于本教程，您可以创建 Node.js 应用程序。
添加下方提供的代码，然后将其部署到 Heroku。如需详细了解如何将 Node.js 应用程序部署到 Heroku，请点击此处。必须先免费创建一个 Heroku 帐户，才能部署。
将项目保存到 GitHub 存储库，然后使用 GitHub 方法将其部署到 Heroku。

将编码添加到您应用程序中的准备工作至此便已完成。将 index.js 文件替换为 index.js 文件（位于 GitHub 上）。

运行命令 npm install body-parser dotenv express x-hub-signature axios ，安装所需依赖项。现在，将此代码入库 (commit)，并将其部署到 Heroku。然后，流程的运作方式如下：