客服人员实时转接

1. 简介

53003251caaf2be5.png 6717b85f57d859d3.png

上次更新时间：2021 年 8 月 23 日

使用 Business Messages 转移实时代理

借助 Business Messages 的人工客服转接功能，您的客服人员能够以聊天机器人的身份发起对话，并在对话过程中将对话切换为人工客服（真人代表）。聊天机器人可以处理诸如营业时间等常见问题，而人工客服可以为用户提供定制的体验，从而更深入地了解用户的背景信息。如果这两种体验能够无缝转换，用户就可以快速准确地回答问题，从而实现更高的回报互动率和客户满意度。

在此 Codelab 中，您将了解如何充分利用实时代理转接功能。

构建内容

在此 Codelab 中，您将为代理构建一个 webhook，用于发送和接收实时代理转移作业事件。您将使用起始代码提供的基本界面来测试您所构建的内容。

49aca3df6b196c50.png

学习内容

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

此 Codelab 将重点介绍如何使用 Business Message 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 聊天机器人

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

获取起始代码

在终端中，使用以下命令将 Live Agent Transfer 起始代码克隆到项目的工作目录中：

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

了解起始代码

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

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

  • bin：此目录包含用于设置和配置服务器的 www 启动脚本。
  • libs：此目录包含 datastore_util.js，其中包含用于从 Cloud Datastore 读写数据的便捷方法。您无需了解此文件的运作方式。只需注意可用的方法及其作用即可。
  • resources：这会以名为 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 接收消息。该应用向用户回显消息，并将消息线程记录到 Cloud Datastore 中。

配置您的代理

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

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

db0cca5b74f999ad.png

与 Echo 聊天机器人对话

在 Developer Console 中打开您的代理。您将看到概览页面，在此页面中可以查看代理的详细信息。复制与您的移动设备测试设备匹配的代理测试网址。请在移动设备上使用此网址启动代理的对话界面。

536313929e5c0b3e.png

通过发送一些消息与客服人员互动。对话界面只会复制您说的话，用户体验并不实用。如果真有办法，能与真人交谈！

3. 加入对话

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

此步骤的起始代码会添加一个基本的 CRM，其中会列出客服人员的所有正在进行的对话会话。我们来看一下该 CRM 系统，看看哪些对话可能需要人工客服注意。

转到 step-2 目录，然后按照上一步的方式再次部署应用。

部署应用时，您会看到目标网址。在浏览器中转到此网址，即可查看您在上一步中开始的对话会话的商家信息。对话的状态为“由聊天机器人管理”，因为 echo 聊天机器人在此对话中是客服人员的代表。

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 和代表性。

查看 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) {
...
}

网络钩子已经使用此方法从 echo 聊天机器人发送响应。该方法首先将传入的消息数据存储在对话的 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 事件。
  • 在对话中发送消息，告诉用户他们正在与 echo 聊天机器人对话。使用 storeAndSendResponse 方法。请注意，客服代表已改回BOT。

最后一步为用户阐明对话的状态。销售代表退出聊天后，用户会看到某个事件，但不一定知道自己在与 echo 聊天机器人对话。通过直接从聊天机器人发送消息，您可以减少用户的困惑并改善体验。

由于聊天机器人已经开始处理问题，您的人工客服可以自由加入其他对话。请尽情试用示例代码和 CRM。不妨测试一下您对企业实时客服人员转接体验的想法，看看您能想到什么。

6. 即将完成

恭喜您完成实时代理转移 Codelab！

您已创建可以处理从头到尾的人工客服接送事宜的代理。您还学习了一种跟踪与 Cloud Datastore 对话状态的方法。

通过人工客服转接功能，您可以将常见请求留给聊天机器人，而人工客服可以处理更复杂的咨询。您的用户将对新的个性化和实用体验更加满意，从而提高了他们再次访问您的商家并向朋友推荐您的商家的可能性。

后续操作

查看以下 Codelab：

深入阅读

参考文档