客服人员实时转接

1. 简介

53003251caaf2be5.png 6717b85f57d859d3.png

上次更新日期：2021 年 8 月 23 日

通过 Business Messages 移交给人工客服

借助 Business Messages 的人工客服转接功能，您的代理可以先以聊天机器人的身份开始对话，然后在对话中途切换到人工客服（人工代表）。您的机器人可以处理营业时间等常见问题，而人工客服可以根据用户背景信息提供更个性化的体验。当这两种体验之间的过渡顺畅时，用户可以快速准确地获得问题的解答，从而提高回访互动率并提升客户满意度。

此 Codelab 将教您如何充分利用转人工客服功能。

构建内容

在此 Codelab 中，您将为代理构建一个可以发送和接收实时代理转移事件的网络钩子。您将使用起始代码提供的基本界面来测试您构建的内容。

49aca3df6b196c50.png

学习内容

  • 如何存储和管理对话状态。
  • 如何使用 Business Messages 发送实时客服转移事件。
  • 如何设置网络钩子和基本界面，以便作为客服人员加入对话。
  • 使用 Business Messages API 的最佳实践。

本 Codelab 主要介绍如何使用 Business Messages API 实现实时客服转移。您可以通读每个阶段的起始代码，但只需实现与 Business Messages 相关的代码。

所需条件

  • Business Messages 代理，包括您的服务账号密钥。您可以按照创建代理指南创建代理。
  • 与代理的 GCP 项目相关联的正常运行的 Cloud Datastore 配置。您可以使用 Cloud Datastore 快速入门来设置此功能。您无需了解如何使用 Cloud Datastore。
  • 安装了 Google Cloud SDK 和 Node.js（版本 10 或更高版本）的计算机。
  • 用于测试用户体验的 Android 设备（搭载版本 5 或更高版本）或 iOS 设备。
  • 具有 Web 应用编程方面的经验。您将编写少量 JavaScript 代码，并且可能需要调试您编写的代码。

2. 创建回声机器人

在此步骤中，您将部署一个名为“Echo 机器人”的基本机器人代表。此机器人会接收用户消息，将其记录到 Cloud Datastore 中的对话线程中，然后通过回复相同的内容来“回显”用户消息。有了基本聊天机器人和日志记录基础架构后，您可以在后续步骤中在此基础上添加功能，以实现完整的实时客服转接。

获取起始代码

在终端中，使用以下命令将实时客服转接起始代码克隆到项目的工作目录中：

git clone https://github.com/google-business-communications/bm-nodejs-live-agent-transfer

了解起始代码

我们来看看您将在整个 Codelab 中使用的起始代码结构。

前往 step-1 目录并查看其内容。它包含以下元素：

  • bin：此目录包含用于设置和配置服务器的 WWW 启动脚本。
  • libs：此目录包含 datastore_util.js，其中包含用于从 Cloud Datastore 读取数据和向 Cloud Datastore 写入数据的便捷方法。您无需了解此文件的运作方式。只需记下可用的方法及其作用即可。
  • 资源：此文件夹包含您的服务账号密钥，以名为 credentials.json 的文件形式存在。
  • routes：index.js 文件包含 webhook 及其所有辅助方法。这是您将要使用和添加到的主要文件。
  • views：此目录包含界面元素的 EJS 模板文件。在后续步骤中，它将包含更多文件。
  • app.js、app.yaml、package.json：这些文件用于配置应用及其依赖项。

在部署之前，请下载您的 GCP 服务账号密钥，并将 JSON 凭据文件复制到示例代码中的每个资源目录。请针对 Codelab 的每个步骤执行此操作。

cp credentials.json bm-nodejs-live-agent-transfer/step-<step number>/resources/credentials.json

部署起始代码

在终端中，导航到示例的 step-1 目录。然后，通过设置您用于向相应 API 注册的项目 ID，将 gcloud 工具设置为使用您的 Google Cloud 项目。

gcloud config set project <PROJECT_ID>

如需部署应用，请运行以下命令：

gcloud app deploy

请记下最后一个命令输出的内容中已部署应用的网址：

Deployed service [default] to [https://PROJECT_ID.appspot.com]

您刚刚部署的起始代码包含一个 Web 应用，该应用具有用于从 Business Messages 接收消息的 webhook。该应用会将消息回显给用户，并将消息线程记录到 Cloud Datastore 中。

配置您的代理

前往 Business Communications 开发者控制台中的“账号设置”页面，然后将您的 Webhook 设置为已部署应用的网址。例如 https://PROJECT_ID.appspot.com/callback/。

然后在“代理信息”页面上，将主要和辅助互动方式分别配置为“聊天机器人”和“人工”。

db0cca5b74f999ad.png

与回声机器人对话

在开发者控制台中打开您的代理。您会看到概览页面，您可以在其中查看代理的详细信息。复制与您的移动测试设备相符的代理测试网址。在移动设备上使用此网址启动代理的对话界面。

536313929e5c0b3e.png

通过发送几条消息与代理互动。对话界面只会复制您说的话，用户体验并不理想。如果能与真人交谈就好了！

3. 加入对话

现在，我们从实时客服人员的角度来看一下对话。作为实时客服人员，您需要在加入对话之前了解一些有关对话的信息，例如对话 ID。了解用户是否已请求与人工客服对话也很有帮助。在此步骤中，您将使用基本的 CRM（客户关系管理）页面来查看此信息，并以实时客服人员的身份加入对话。

此步骤的起始代码添加了一个基本 CRM，其中列出了客服人员的所有正在进行的对话线程。我们来看看该 CRM，了解哪些对话可能需要人工客服的介入。

前往 step-2 目录，然后像上一步一样再次部署应用。

部署应用时，您会看到目标网址。在浏览器中前往此网址，即可看到包含您在上一步中开始的对话串的列表。由于回声机器人在此对话中充当代理的代表，因此对话的状态目前为“机器人管理”。

8f624e9befb8e827.png

系统会显示加入聊天按钮，但该按钮目前还无法执行任何操作。您也无法从此界面中得知用户是否想与真人客服对话。

Business Messages 提供了一个请求人工客服事件，用于指示用户何时想要与人工客服对话。您需要跟踪该状态，以便在界面中列出该状态。

查看 index.js 中的回调方法。TODO 注释表明您需要在何处捕获用户对人工客服的请求并更新线程状态。

step-2/routes/index.js

/**
 * The webhook callback method.
 */
router.post('/callback', async function(req, res, next) {
  ...
    } else if (requestBody.userStatus !== undefined) {
      if (requestBody.userStatus.requestedLiveAgent !== undefined) {
  ...
        // TODO: Update the thread state to QUEUED_THREAD_STATE.
      }
    }
  });
...
});

您需要使用 libs/datastore_utils.js 中的方法加载当前对话线程，并将其状态更新为 QUEUED_THREAD_STATE。

如果您不确定该怎么做，可以先看看解决方案。起始代码在每个需要完成一些代码的步骤下都包含一个 solutions 目录。这些目录包含整个应用的副本，其中包含相应步骤的完整实现。

完成实现并重新部署应用后，请使用移动设备上对话中的溢出菜单来请求在线客服人员。

e58d2b77e9c64492.png

现在，如果您返回到 CRM，应该会在对话串中看到一条“已请求实时客服”的备注。此用户需要人工帮助！您需要实现 joinConversation 端点才能使按钮正常工作。

在 /joinConversation 的桩方法中找到另一个 TODO 注释。

step-2/routes/index.js

/**
 * Updates the thread state and sends a representative join signal to the user.
 */
router.post('/joinConversation', async function(req, res, next) {
  let conversationId = req.body.conversationId;

  // TODO: Update the thread state to LIVE_AGENT_THREAD_STATE and post a REPRESENTATIVE_JOINED event.

  res.json({
    'result': 'ok',
  });
});

您需要再次更新线程状态，这次更新为 LIVE_AGENT_THREAD_STATE。此外，您还需要使用 Business Messages API 的 conversations.events.create 方法来发布 REPRESENTATIVE_JOINED 事件。

如需创建请求载荷，您需要设置下表中列出的字段：

字段名称

提示

parent

将此项设置为“conversations/{conversationId}”。

eventId

为活动生成您自己的随机 ID。

auth

使用提供的 initCredentials 方法。

resource

这是活动本身的正文。您应设置 eventType 和 representative。

如需帮助，请查看 create 方法的参考页面或事件参考页面。

完成实现后，重新部署应用，然后点击加入聊天按钮。系统随即会显示已加入对话对话框，聊天状态也会变为“实时聊天”。如果您在移动设备上查看对话，会看到聊天中显示实时客服已加入的通知。

恭喜！在下一步中，我们将了解如何让实时客服人员与用户对话。

4. 以人工客服的身份发送消息

现在您已加入对话，接下来可以以实时客服人员的身份发送一些消息了。

前往 step-3 目录，然后重新部署应用。在 CRM 中，点击上一步中的对话串。您现在应该会看到一个基本的聊天界面。在此处，您可以实时查看用户的消息。

46dd083f08f43961.png

不过，以代理身份发送消息的功能尚未实现。您需要在这一步中完成该操作。

打开 routes/index.js 文件，然后查看新添加的三个端点：

  • /messages：获取 messages.ejs 视图文件并在浏览器中呈现。当您点击索引中的某个对话串时，系统会转到以下某个页面。
  • /retrieveMessages：获取线程的消息内容，并返回对话中所有消息的格式化列表。“消息”页面会定期调用此端点，以显示最新消息。
  • /sendMessage：向用户发送来自人工客服代表的消息。当您点击“发送”时，消息页面会调用此方法。目前尚未实现。

现在，我们来看看现有的 storeAndSendResponse 方法：

step-3/routes/index.js

/**
 * Updates the thread, adds a new message and sends a response to the user.
 *
 * @param {string} message The message content that was received.
 * @param {string} conversationId The unique id for this user and agent.
 * @param {string} threadState Represents who is managing the conversation for the CRM.
 * @param {string} representativeType The representative sending the message, BOT or HUMAN.
 */
async function storeAndSendResponse(message, conversationId, threadState, representativeType) {
...
}

网络钩子已使用此方法发送来自回声机器人的响应。该方法首先将收到的消息数据存储在对话的 Cloud Datastore 对象中。然后，它会发送响应消息。仔细查看它创建的消息对象，尤其是代表类型。

现在，请自行实现 /sendMessage 端点。您可以使用现有的 storeAndSendResponse 方法来完成大部分工作。重要的是，请务必设置正确的代表。

此功能正常运行后，重新部署应用，然后返回到 CRM 中的对话。现在，您可以看到自己的消息显示在聊天记录中。您还可以在移动测试设备上看到代理的消息。

49aca3df6b196c50.png

在继续之前，请确保您了解新端点的运作方式。在下一步中，您将添加自己的端点以结束对话。

5. 退出对话

在帮助用户解决问题后，您可能需要退出对话，让用户再次与聊天机器人对话。在 Business Messages 中，此变更通过 REPRESENTATIVE_LEFT 事件进行通知。

前往 step-4 目录，重新部署应用，然后返回到对话串。现在，线程底部会显示关闭并退出对话链接。此链接目前尚无法正常运行，因为 leaveConversation 端点尚未实现。

ef4ad8107c3fff2.png

查看 index.js 文件。有一个 TODO 注释指示您创建新的 leaveConversation 端点。

step-4/routes/index.js

/* 
 * TODO: Create a '/leaveConversation' endpoint that does the following:
 * - Updates the thread to BOT_THREAD_STATE.
 * - Sends a REPRESENTATIVE_LEFT event.
 * - Sends a message to the thread informing the user that they are speaking to the echo bot again.
 * 
 * Hint: You can use the same methods that '/joinConversation' uses.
 */

若要实现此功能，您需要将目前为止从 Codelab 中学到的所有知识融会贯通。此端点应执行以下操作：

  • 将线程更新为 BOT_THREAD_STATE。
  • 发送 REPRESENTATIVE_LEFT 事件。
  • 在对话中发送一条消息，告知用户他们正在与回声机器人对话。使用 storeAndSendResponse 方法。请注意，代表已更改回 BOT。

最后一步会向用户明确对话的状态。当客服人员离开对话时，用户会看到一个事件，但他们不一定会知道自己又在与回声机器人对话。通过直接从聊天机器人发送消息，您可以减少用户困惑并改善用户体验。

现在，机器人正在处理相关事宜，您的实时客服人员可以加入其他对话。您可以尽情试用示例代码和 CRM。测试您为商家设计的实时客服转接体验，看看效果如何。

6. 即将完成

恭喜您完成实时客服转移 Codelab！

您已创建了一个可以处理从开始到结束的实时客服转接的代理。您还了解了一种使用 Cloud Datastore 跟踪对话状态的方法。

借助人工客服转接功能，您可以让聊天机器人处理常见请求，而人工客服则可以处理更复杂的咨询。用户会对新的自定义实用体验更加满意，从而更愿意再次光顾，并向朋友推荐您的业务。

后续操作

查看以下 Codelab：

深入阅读

参考文档