客服人员实时转接

1. 简介

53003251caaf2be5.png 6717b85f57d859d3

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

使用 Business Messages 实时转接客服人员

借助 Business Messages 的实时客服人员转移功能,您的客服人员能够以聊天机器人的身份发起对话,并在对话过程中将对话切换到人工客服代表。聊天机器人可以处理常见问题(例如营业时间),而人工客服可以为用户提供定制化体验,并更好地访问用户情境。如果这两种体验可以无缝衔接,用户就可以快速准确地回答问题,从而实现更高的回访率和客户满意度。

在此 Codelab 中,您将学习如何充分利用人工客服转移功能。

构建内容

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

49aca3df6b196c50

学习内容

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

此 Codelab 将重点介绍如何使用 Business Message API 来实现人工客服转接。您可以仔细阅读每个阶段的起始代码,但只需要实现与 Business Messages 相关的代码。

所需条件

  • Business Messages 代理,包括您的服务账号密钥。您可以按照“创建代理”指南来创建代理。
  • 与您的代理的 GCP 项目关联的有效 Cloud Datastore 配置。您可以使用 Cloud Datastore 快速入门来设置此项。您无需了解如何使用 Cloud Datastore。
  • 一台安装了 Google Cloud SDKNode.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 的文件。
  • routesindex.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

通过发送一些消息与代理互动。对话界面只会复制您所说的内容,这对用户体验来说并不实用。要是有办法与真人交谈就好了!

3. 正在加入对话

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

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

转到 step-2 目录,然后像上一步一样再次部署应用。

部署应用时,您会看到一个目标网址。在浏览器中访问此网址,即可看到您在上一步中开始的会话邮件集的列表。对话状态目前为“由聊天机器人管理”因为 echo 聊天机器人是代理在此对话中的代表。

8f624e9befb8e827

系统会显示加入聊天按钮,但还无需执行任何操作。此外,您无法通过此界面判断用户是否想要与人工客服交谈。

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

但是,由于代理尚未实现发送消息,您需要在此步骤中完成该操作。

打开 routes/index.js 文件并查看 3 个新添加的端点:

  • /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) {
...
}

Webhook 已使用此方法从 echo 聊天机器人发送响应。该方法首先将传入的消息数据存储在对话的 Cloud Datastore 对象中。然后,它会发送响应消息。请仔细查看它创建的消息对象,尤其是具有代表性类型的消息对象。

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

设置完成后,重新部署应用,然后回到 CRM 中的对话。您现在可以在聊天记录中看到消息。您还可以在移动测试设备上看到代理的消息。

49aca3df6b196c50

在继续操作之前,请确保您了解新端点的工作原理。在下一步中,您将添加自己的端点以退出对话。

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:

深入阅读

参考文档