在线购买门店自提:Bonjour Meal - 第 1 部分 - 使用入门

1. 简介

637766505206e0a1.png c604dca3ca211399.png

上次更新时间:2022 年 5 月 11 日

欢迎使用 Business Messages!

此 Codelab 介绍了如何与 Business Messages 集成,让客户能够通过 Google 搜索和 Google 地图与您管理的商家建立联系。您可能是一家想要直接与 Business Messages 集成的企业,也可能正在一家独立软件供应商工作,为与您合作的企业构建消息传递解决方案,或者您可能只是偶然发现了 Business Messages,想要改进这个平台。

无论是什么促使您来到这里,此 Codelab 都是非常好的入门方式。最终,您将构建出首个可供用户与之互动的数字代理。稍加完善之后,准备好在 Business Messages 上发布应用,便有望覆盖数百万客户。

怎样才算是优秀的数字客服人员?

Business Messages 是一种对话界面,可在移动设备上提供类似应用的体验,让消费者无需安装额外的应用即可与商家联系。数字客服是客户与之互动的逻辑部分。逻辑由部署在云端或基础架构中的 Web 应用管理。这完全取决于您如何响应用户。优秀的代理能够提供背景信息来设定预期、持续与客户互动,并提供能够满足用户需求的功能。

构建内容

在此 Codelab 中,您将在 Business Messages 上为一家名为 Bonjour Meal 的虚构公司构建数字代理。该数字客服会回答几个简单的问题,例如“几点闭店?”或“我可以在线购买吗?”。

在此 Codelab 中,用户将能够通过数字代理购买商品,将用户引导至付款处理方进行收款,然后安排在商店中提货。

在本 Codelab 中,您的应用将实现下列功能:

  • 通过建议条状标签回复问题
  • 引导用户提出您的数字客服人员可以回答的问题
  • 提供丰富的对话功能,吸引用户参与对话

883b5a7f9f266276.png

学习内容

  • 如何在 Google Cloud Platform 上的 App Engine 上部署 Web 应用。您也可以使用 ngrok 公开测试您的本地应用。
  • 如何使用 Web 应用网络钩子配置 Business Messages 账号,以接收来自用户的消息
  • 如何使用 Business Messages API 发送卡片、轮播界面和对话式建议等丰富功能
  • Business Messages 如何发送您的消息

此 Codelab 将重点介绍如何构建您的第一个数字客服。

所需条件

  • 注册免费的 Business Communications 开发者帐号
  • 访问我们的开发者网站,获取相关说明
  • 搭载 Android 5 或更高版本的 Android 设备,或安装了 Google 地图应用的 iOS 设备
  • 具有 Web 应用编程方面的经验
  • 已连接到互联网!

2. 准备工作

启用 API

对于此 Codelab,由于我们要使用 Django 应用,因此将依赖 Cloud Build API 将应用部署到 App Engine。如果您使用的是 ngrok,则无需启用 Cloud Build API。

如需启用 Cloud Build API,请执行以下操作:

  1. 在 Google Cloud 控制台中打开 Cloud Build API
  2. 点击启用

创建服务账号

您需要创建一个服务账号才能访问 Business Communications API 和 Business Messages API。按照相关步骤在 Business Communications 开发者控制台中创建服务帐号

部署 Django Python EchoBot 起始代码

在终端中,使用以下命令将 Django Echo Bot 代码示例克隆到项目的工作目录中:

$ git clone https://github.com/google-business-communications/bm-bonjour-meal-django-starter-code

将为相应服务账号创建的 JSON 凭据文件复制到示例的“resources”文件夹中,并将这些凭据重命名为“bm-agent-service-account-credentials.json”。

bm-bonjour-meal-django-starter-code/bonjourmeal-codelab/step-1/resources/bm-agent-service-account-credentials.json

在终端中,转到示例的 step-1 目录。

在终端中运行以下命令以部署示例:

$ gcloud config set project PROJECT_ID*
$ gcloud app create
$ gcloud app deploy
  • PROJECT_ID 是您用于向相应 API 注册的项目的 ID。

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

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

您刚刚部署的起始代码包含一个 Web 应用,该应用使用网络钩子从 Business Messages 接收消息。该应用会向用户回显消息,并展示对话界面中提供的一些丰富功能。

配置 Webook

现在,您的服务已部署完毕,您可以在 Business Communications 开发者控制台帐号设置页面中使用该应用的网址来设置您的网络钩子网址。

网络钩子网址将是应用的网址加上“/callback/”。例如,网址可能如下所示:https://PROJECT_ID.appspot.com/callback/

前往 Business Communications Console 帐号设置页面。在右上角的导航栏下方,您应该会看到您的 GCP 项目名称。如果您看到下拉列表,请务必选择您的 GCP 项目。

填写技术联系人详细信息,然后使用您部署的应用的网络钩子网址更新 Webhook

ceb66c905ded40be.png

点击 GCP 项目引用旁边的保存

3. 创建您的第一个代理

使用 Business Communications 开发者控制台

在 Business Communications Console 中,点击左上角的徽标返回控制台信息中心,然后点击创建代理。您可以在创建代理的同时创建品牌。为代理类型选择 Business Messages,并确保合作伙伴信息正确无误。

品牌中,输入您要创建的品牌的名称。品牌是指您正在合作的商家,消费者可以与客服人员进行对话互动。在代理名称中,指定您希望用户在 Business Messages 对话中看到的内容。在虚构的 Bonjour Meal 中,Bonjour Rail 是一家管理 Bonjour Meal 餐厅的铁路公司。我要将 Bonjour Rail 指定为品牌,指定 Bonjour Meal 作为代理。

代理是代表品牌的对话实体。

88a9798e6546eb4e.png

点击创建代理,然后让控制台进行一些神奇的操作。此请求需要几秒钟时间才能向 Business Communications API 发出若干请求,以创建品牌和代理。您可以直接使用 Business Communications API 来创建代理和创建品牌。请参阅相关文档,了解 curl 请求如何用于执行与控制台相同的操作。

首次对话

打开您刚刚创建的代理,您将看到一个概览页面,您可以通过该页面开始查看代理的详细信息。查看代理测试网址。这些网址用于调用设备上的对话界面。

f6bd8ded561db36f.png

点击任一条状标签即可复制测试网址。当然,请复制您手头要用于测试的设备的测试网址。您可以随心所欲地将这条复制的消息发送到您的设备。

在移动设备上,点按该链接会调用 Business Messages 代理启动器,并预填充您的代理测试网址。

点按启动以调用代理的对话界面。

2bf9f282e09062de.png

与客服人员互动,感受其功能。在大多数情况下,您应该发现对话界面只会回显您的消息。发送类似“Hello, World!”的消息,您会看到代理也会将这条消息发回给您。

部署的应用还包含一些逻辑,用于展示 Business Messages 中提供的丰富功能。

  • 如果您发送“卡片”,则会调用复合信息卡
  • 如果您发送“条状标签”,则会调用建议内容信息卡
  • 如果您发送“轮播界面”,则会调用复合信息卡的轮播界面

恭喜!这是客服人员与您之间的首次对话!

每项丰富的功能都可用于为与代理通信的用户提供更好的上下文。通过发送复合搜索卡中的图形资源更好地传达想法,或者使用建议内容信息卡来引导对话。

更新欢迎辞和使用对话条状标签

让我们通过开发者控制台进行一些练习,了解如何修改代理的欢迎辞,以及如何利用建议内容信息卡帮助用户进行交流。

前往代理概览页面,然后选择代理信息。向下滚动到欢迎辞和对话开场白部分。

4323f988216fa054.png

将欢迎辞(黄色输入字段)更新为以下内容:

欢迎使用 Bonjour Meal 开胃菜。我可以回填您的消息,并向您展示平台支持的一些丰富功能,不妨试试这些建议!

点击上图紫色框中提到的 + 添加对话开场白,添加对话开场白以调用建议内容信息卡、轮播界面和卡片。您添加的对话开场白需要一个文本组件和一个 postbackData 组件。文本是向用户显示的内容,而 postBack 数据是发送到代理的 webhook 的内容。网络钩子会解析回传数据,并向用户发送相应的响应。906bc74668a1b215.png

修改后,控制台中的代理信息将如下所示:

8e96b0a10edd20af.png

在控制台的右侧,您可以预览代理的显示效果。看看欢迎辞是如何反映您刚刚对其进行更改的内容及其下方的建议内容信息卡的吗?

这是一款很好的工具,可以帮助您了解用户体验。您可以在构建代理和规划要支持的用户体验历程时使用它。

很抱歉,这些变更无法立即反映在对话中,因为之前的数据已缓存在 Business Messages 基础架构中。缓存大约每 2 小时清除一次,因此您应该可以明天再尝试此操作。

在此期间,让我们来了解一下其背后的运作方式。

4. 分析起始代码

10,000 英尺高的源代码视图

您部署的起始代码会向用户回显消息,并且可以显示复合信息卡、轮播界面或建议内容信息卡。我们来深入了解一下源代码,以便了解其工作原理。然后我们确定需要更改哪些内容。

起始代码是一个 Django 项目。在此 Codelab 系列的后续部分中,我们将使用 Google Datastore 来保留购物车和相关对话等数据。如果您之前没有使用过 Django,不用担心,它非常简单,并且在此 Codelab 结束时,您将了解其工作原理。

概括来讲,Django 将网址路由到视图,视图逻辑将生成一个可在浏览器中呈现的模板。我们来看一下项目的 urls.py。

bm-django-echo-bot/bmcodelab/urls.py [第 31-37 行]

from django.urls import include, path
import bopis.views as bopis_views

urlpatterns = [
    path('', bopis_views.landing_placeholder),
    path('callback/', bopis_views.callback),
]

此处定义了两个路线,因此 Django 可以在识别这两个网址时执行逻辑。如果项目网址为 https://PROJECT_ID.appspot.com/,则项目知道的路由如下:

  • https://PROJECT_ID.appspot.com/
  • https://PROJECT_ID.appspot.com/callback/

这两个网址路由都引用了来自 bopis/views.py 的 bopis_views。我们来看一下此文件中具体的操作。首先,我们先了解 bopis_views.landing_placeholder

bm-django-echo-bot/bonjourmeal-codelab/step-1/bopis/views.py [第 302-309 行]

... 
def landing_placeholder(request):
    return HttpResponse("<h1>Welcome to the Bonjour Meal Codelab</h1>
    <br/><br/>
    To message your Bonjour Meal agent, go to the Developer Console and retrieve
    the Test URLs for the agent you have created as described in the codelab
    <a href='https://codelabs.developers.google.com/codelabs/'>here</a>.")
...

您的网络服务器收到指向项目根目录的网络请求时,会执行这段逻辑。此处没有什么奇怪的:我们只向提出请求的浏览器返回一个包含一些 HTML 的 HTTPResponse。因此,是的,您确实可以打开项目的根网址,但在那里不需要执行太多操作,因为这会让您回到此 Codelab。

另一个网址会路由到名为 callback 的函数(同样位于 bopis/views.py 中)。我们来看一下该函数。

bm-django-echo-bot/bopis/views.py [第 60-101 行]

...
def callback(request):
    """
    Callback URL. Processes messages sent from user.
    """
    if request.method == "POST":
        request_data = request.body.decode('utf8').replace("'", '"')
        request_body = json.loads(request_data)

        print('request_body: %s', request_body)

        # Extract the conversation id and message text
        conversation_id = request_body.get('conversationId')
        print('conversation_id: %s', conversation_id)

        # Check that the message and text body exist

        if 'message' in request_body and 'text' in request_body['message']:
            message = request_body['message']['text']

            print('message: %s', message)
            route_message(message, conversation_id)
        elif 'suggestionResponse' in request_body:
            message = request_body['suggestionResponse']['postbackData']

            print('message: %s', message)
            route_message(message, conversation_id)
        elif 'userStatus' in request_body:
            if 'isTyping' in request_body['userStatus']:
                print('User is typing')
            elif 'requestedLiveAgent' in request_body['userStatus']:
                print('User requested transfer to live agent')

        return HttpResponse("Response.")

    elif request.method == "GET":
        return HttpResponse("This webhook expects a POST request.")
...

此处的逻辑会解析 messagesuggestionResponse 的请求正文,并将该信息传递到名为 route_message 的函数中,然后将 HttpResponse 返回给 Business Messages 基础架构,以确认收到消息。

这是一项重要功能。这个逻辑是 Web 应用的网络钩子,可接收来自与代理互动的用户的消息。您可以扩展网络钩子以向 Dialogflow 等自动化工具发送消息,以了解用户可能在说什么,并根据推断结果生成响应。您还可以转发消息,以便用户与人工客服联系。请参见下图:

b10113f9d037e6a5.png

Business Messages 将消息内容以 JSON 载荷的形式发送到您的网络钩子,然后由该网络钩子将其路由到人工客服或某个逻辑,以作为聊天机器人进行响应。在本例中,该路由机制是 route_message。一起来看看吧

bm-django-echo-bot/bopis/views.py [第 105-122 行]

...
def route_message(message, conversation_id):
    '''
    Routes the message received from the user to create a response.

    Args:
        message (str): The message text received from the user.
        conversation_id (str): The unique id for this user and agent.
    '''
    normalized_message = message.lower()

    if normalized_message == CMD_RICH_CARD:
        send_rich_card(conversation_id)
    elif normalized_message == CMD_CAROUSEL_CARD:
        send_carousel(conversation_id)
    elif normalized_message == CMD_SUGGESTIONS:
        send_message_with_suggestions(conversation_id)
    else:
        echo_message(message, conversation_id)
...

这个逻辑开始检查用户收到的消息。首先,消息通过减少所有字符进行标准化。标准化后,它会检查消息是否为文件顶部定义的常量。

bm-django-echo-bot/bopis/views.py [第 40-42 行]

...
# Set of commands the bot understands
CMD_RICH_CARD = 'card'
CMD_CAROUSEL_CARD = 'carousel'
CMD_SUGGESTIONS = 'chips'
...

也就是说,聊天机器人会解析消息,其中包含我们在本 Codelab 的上一步的对话开场白的 postback_data 中放置的任何字符串。如果这些字符串都未显示,那么它只会将消息传递给名为 echo_message 的函数,可以想象,该函数会回显消息。

发送消息

所以现在,您应该已经了解了 Web 应用接收消息的方式。这一切都通过网络钩子完成。

但是,该应用如何使用 Business Messages 向用户发送出站消息?

a9475b1da93a83e8.png

当您的基础架构对用户做出响应时,您需要将响应发送到 Business Messages API,由 Business Messages API 向用户传递消息。

Business Messages API 提供 Python、Node.js 和 Java 库。我们还提供了一个 REST API,如果您的基础架构未使用我们所提供的库的语言,您可以直接向该 API 发出请求。参阅发送消息,了解如何使用 c网址 向特定对话 ID 发送消息。

在此 Codelab 中,我们将重点介绍如何使用 Python 客户端库,该客户端库已集成到 Bonjour Meal 起始代码中,并且已部署到 GCP 项目的 App Engine 中,或通过 ngrok 在本地运行。

我们来看一下 echo_message 函数,以及我们如何与 API 交互以将消息发送到 Business Messages。

bm-django-echo-bot/bopis/views.py [第 199-212 行]

...
def echo_message(message, conversation_id):
    '''
    Sends the message received from the user back to the user.

    Args:
        message (str): The message text received from the user.
        conversation_id (str): The unique id for this user and agent.
    '''
    message_obj = BusinessMessagesMessage(
        messageId=str(uuid.uuid4().int),
        representative=BOT_REPRESENTATIVE,
        text=message)

    send_message(message_obj, conversation_id)
...

在此函数中,使用传入 echo_message 函数的消息变量对 BusinessMessagesMessage 进行实例化。实例化后,对象将与对话 ID 一起传递给 send_message

bm-django-echo-bot/bopis/views.py [第 214-236 行]

...
def send_message(message, conversation_id):
    '''
    Posts a message to the Business Messages API, first sending
    a typing indicator event and sending a stop typing event after
    the message has been sent.

    Args:
        message (obj): The message object payload to send to the user.
        conversation_id (str): The unique id for this user and agent.
    '''
    credentials = ServiceAccountCredentials.from_json_keyfile_name(
        SERVICE_ACCOUNT_LOCATION,
        scopes=['https://www.googleapis.com/auth/businessmessages'])

    client = bm_client.BusinessmessagesV1(credentials=credentials)

    # Create the message request
    create_request = BusinessmessagesConversationsMessagesCreateRequest(
        businessMessagesMessage=message,
        parent='conversations/' + conversation_id)

    bm_client.BusinessmessagesV1.ConversationsMessagesService(
        client=client).Create(request=create_request)
...

send_message 函数的全部作用就是使用您的服务帐号凭据来验证您是否可以向此对话发送消息、实例化一个 Business Messages 客户端,并创建将消息发送到给定 conversation ID 的请求。

富媒体功能也会使用此 send_message 函数,但它们创建的消息专用于复合搜索卡、轮播界面和建议内容信息卡。复合信息卡和轮播界面可能包含图形资源,而建议内容信息卡具有 postback_data,以便回调逻辑对其进行适当解析。

现在,我们已经了解了如何发送消息,接下来请研究示例如何发送复合信息卡、轮播界面和建议内容信息卡。在下一部分中,我们将修改源代码,以便使用其中一些丰富的功能发送消息。

准备就绪后,我们来自定义 Bonjour Meal 代理。

5. 自定义代理

如果您到目前为止已经学习了此 Codelab,应该会看到我们漂亮的代理。

906bc74668a1b215.png

还好,它看起来有点裸露,不能真正代表我们的业务。幸运的是,我们拥有为代理提供支持的代码的基础知识,并且我们拥有所需的工具,以任何想要的方式自定义代理。

在此 Codelab 的其余部分,我们将使用以下内容扩展该代理:

  • 添加实际徽标
  • 改进了欢迎辞
  • 提供营业时间信息
  • 告知用户在线购买商品的功能即将推出
  • 使用对话建议内容信息卡来促进对话

我们将利用 Business Communications 控制台协助我们更新徽标和欢迎辞,但您也可以随时选择直接使用 Business Communications API 来执行相应操作。然后,我们必须更新源代码以发送适当的消息来提供有关营业时间的信息,而且 Bonjour Meal 很快将提供在线购物功能。完成后,我们将返回 Business Communications Console 并创建对话建议内容信息卡,以帮助引导对话实现数字客服人员支持的幸福路径体验。

Business Communications Console 中,选择您的代理,然后前往 Agent information(代理信息)。我们将更新商家徽标,如下所述。

eb6b8ac6b62387ee.png

点击上传,您就可以选择要上传的图片,或从网址导入图片。

请参阅文档中的徽标设计指南,了解我们推荐的关于使用自己的徽标的最佳做法。

我们将上传您在此 Codelab 开始时克隆的源代码中的徽标。您可以在代码库的 ./assets/ 目录中找到该文件,该文件的名称为“bonjour_meal-logo.png”。您可以将文件拖动到网络浏览器上的模态窗口中,系统会显示一个浅色编辑工具,用于操控图片质量和剪裁。调整图片分辨率并进行剪裁,使图片小于或等于 50KB 的约束条件。如果您对图片感到满意,请点击蓝色圆圈中的对勾标记进行确认,然后点击模态窗口底部的选择

1856081f59623ae2.png

最后,点击代理信息页面右上角的保存。由于代理信息已缓存在我们的服务器中,并且应在更改后的两小时内显示,因此这项更改需要一些时间才能反映在您的设备上。

更新欢迎辞

我们在此 Codelab 的前面部分中已经更新过欢迎辞。我们再来一次,这次配置一条更适用于“Bonjour Meal”用户体验历程的欢迎辞。

在 Business Communications Console 中,选择您的代理,然后进入代理信息。向下滚动,直到看到 Welcome message 输入字段,您可以在该字段更新消息。

6598fec47021136e.png

由于我们需要添加对话开场白,可以在欢迎辞中提及这些开场白。在输入字段中,将其替换为以下文本:

“欢迎来到 Bonjour Meal。我是助理,可以帮您解答关于 Bonjour Meal 的问题。请尝试以下选项。”

最后,点击代理信息页面右上角的保存。同样,由于我们的缓存机制旨在确保简洁明了,此更改将需要一些时间才能体现出来!

提供有关营业时间的信息

为了向用户提供此信息,我们将使用 Business Messages API 向用户发送自定义消息。

您可能还记得,消息是在 views.pyroute_message 函数中解析的。函数首先对字符串进行标准化,然后开始检查标准化消息是否与任何硬编码参数匹配。为简单起见,我们添加一个额外的条件,用于检查标准化消息是否等于新常量,我们将其称为 CMD_BUSINESS_HOURS_INQUIRY,并将包含值“business-hours-inquiry”。如果条件评估结果为 true,我们将调用一个名为 send_message_with_business_hours 的函数。

route_message 函数现在将如下所示:

bm-django-echo-bot/bopis/views.py

...
def route_message(message, conversation_id):
    '''
    Routes the message received from the user to create a response.

    Args:
        message (str): The message text received from the user.
        conversation_id (str): The unique id for this user and agent.
    '''
    normalized_message = message.lower()

    if normalized_message == CMD_RICH_CARD:
        send_rich_card(conversation_id)
    elif normalized_message == CMD_CAROUSEL_CARD:
        send_carousel(conversation_id)
    elif normalized_message == CMD_SUGGESTIONS:
        send_message_with_suggestions(conversation_id)
    elif normalized_message == CMD_BUSINESS_HOURS_INQUIRY:
        send_message_with_business_hours(conversation_id)
    else:
        echo_message(message, conversation_id)
...

为了让代码能够正常运行,我们还需要再进行两项更改;第一项是定义 CMD_BUSINESS_HOURS_INQUIRY 以及其他常量,第二项是实际定义函数 send_message_with_business_hours 并使用 Business Messages API 发送消息。

我们首先在文件顶部用其他常量声明定义该常量:

bm-django-echo-bot/bopis/views.py

...
# Set of commands the bot understands
CMD_RICH_CARD = 'card'
CMD_CAROUSEL_CARD = 'carousel'
CMD_SUGGESTIONS = 'chips'
CMD_BUSINESS_HOURS_INQUIRY = 'business-hours-inquiry'
...

现在,定义 send_message_with_business_hours。您可以按照适当的 Python 语法在文件中的任何位置定义此函数。由于此函数只是发送消息(类似于 echo_message),您可以将其用作模板来定义此函数。

bm-django-echo-bot/bopis/views.py

...
def send_message_with_business_hours(conversation_id):

    message = '''Thanks for contacting us! The hours for the store are:\n
    MON 8am - 8pm\n
    TUE 8am - 8pm\n
    WED 8am - 8pm\n
    THU 8am - 8pm\n
    FRI 8am - 8pm\n
    SAT 8am - 8pm\n
    SUN 8am - 8pm
    '''

    message_obj = BusinessMessagesMessage(
        messageId=str(uuid.uuid4().int),
        representative=BOT_REPRESENTATIVE,
        text=message)

    send_message(message_obj, conversation_id)
...

这样,当用户发送“business-hours-inquiry” 时,我们的聊天机器人就应该能够使用相应的营业时间回复用户。您应该会看到如下内容:

125802166995afd5.png

将源代码部署到 GCP 后,您可以立即看到更改。我们不会像缓存代理信息那样在 Google Cloud Platform 中缓存 Web 应用,因此您可以立即测试这种体验。

虽然我们现在已经取得了一些源于更改的势头,但我们还是要再进行一项修改,让用户咨询在线购物事宜。您的数字客服人员会回复您,说明该功能尚不可用,请稍后再回来查看。

告知用户线上购物功能即将推出

我们会进行与通知用户营业时间类似的修改。这一次,我们将这些信息连同富有吸引力的图片一起放入一张复合搜索卡中。

解析标准化消息并检查条件,查找名为 CMD_ONLINE_SHOPPING_INQUIRY 且值设为“online-shopping-inquiry”的常量,该常量会在条件为 true 时调用 send_online_shopping_info_message

bm-django-echo-bot/bopis/views.py

...
# Set of commands the bot understands
CMD_RICH_CARD = 'card'
CMD_CAROUSEL_CARD = 'carousel'
CMD_SUGGESTIONS = 'chips'
CMD_BUSINESS_HOURS_INQUIRY = 'business-hours-inquiry'
CMD_ONLINE_SHOPPING_INQUIRY = 'online-shopping-inquiry'
...
...
...
def route_message(message, conversation_id):
    '''
    Routes the message received from the user to create a response.

    Args:
        message (str): The message text received from the user.
        conversation_id (str): The unique id for this user and agent.
    '''
    normalized_message = message.lower()

    if normalized_message == CMD_RICH_CARD:
        send_rich_card(conversation_id)
    elif normalized_message == CMD_CAROUSEL_CARD:
        send_carousel(conversation_id)
    elif normalized_message == CMD_SUGGESTIONS:
        send_message_with_suggestions(conversation_id)
    elif normalized_message == CMD_BUSINESS_HOURS_INQUIRY:
        send_message_with_business_hours(conversation_id)
    elif normalized_message == CMD_ONLINE_SHOPPING_INQUIRY:
        send_online_shopping_info_message(conversation_id)
    else:
        echo_message(message, conversation_id)
...

现在,定义 send_online_shopping_info_message。我们希望通过包含图片的复合信息卡发送此消息,因此我们来复制 send_rich_card 函数,将其用作模板来定义 send_online_shopping_info_message

首先,我们应更新回退文本以使其包含适当的消息。如果设备由于某种原因无法接收复合信息卡,会使用后备文本。接下来,我们应更新 BusinessMessagesRichCard,以添加相关标题、说明、建议和媒体字段。我们的函数应如下所示:

bm-django-echo-bot/bopis/views.py

...
def send_online_shopping_info_message(conversation_id):
    fallback_text = ('Online shopping will be available soon!')

    rich_card = BusinessMessagesRichCard(
        standaloneCard=BusinessMessagesStandaloneCard(
            cardContent=BusinessMessagesCardContent(
                title='Online shopping info!',
                description='Thanks for your business, we are located in SF near the Golden Gate Bridge. Online shopping is not yet available, please check back with us in a few days.',
                suggestions=[],
                media=BusinessMessagesMedia(
                    height=BusinessMessagesMedia.HeightValueValuesEnum.MEDIUM,
                    contentInfo=BusinessMessagesContentInfo(
                        fileUrl=SAMPLE_IMAGES[4],
                        forceRefresh=False
                    ))
                )))

    message_obj = BusinessMessagesMessage(
        messageId=str(uuid.uuid4().int),
        representative=BOT_REPRESENTATIVE,
        richCard=rich_card,
        fallback=fallback_text)

    send_message(message_obj, conversation_id)
...

棒极了!现在,我们的数字客服可以回复咨询网上购物方面的问题。目前,我们的数字代理尚不支持在线购物,因此我们向用户提供了一条消息,告知他们该功能即将推出。这是用户询问有关网上购物的问题时,数字代理看到的样子。

5cd63c57c1b84f9a.png

就像我们之前允许用户询问营业时间一样,此更改可以在您使用 ngrok 时立即生效,或在您将代码部署到 GCP App Engine 后立即看到。

在下一部分中,我们将使用对话开场白和建议内容信息卡来引导对话顺利进行。

使用条状标签引导对话

我们对源代码进行了一些更改,并部署了更新后的数字代理,但我们绝不希望用户通过输入“business-hours-inquiry”或“online-shopping-info”来咨询该商家。我们来更新对话开场白,这样一来,当对话打开时,用户不仅会收到一句友好的欢迎辞,还会看到对话开场白。

请前往 Business Communications Console 并访问代理的代理信息页面。我们之前为“条状标签”“卡片”和“轮播界面”定义了对话开场白。虽然这些 ID 仍然有效,但与我们的业务功能不再相关。您可以继续展示这些丰富的功能,也可以保留它们,或者移除它们,让您的数字代理显示专为 Bonjour Meal 业务提供的对话开场白。

我们将创建两种新的对话开场白。对于第一个查询,请将 text 设置为“What are your business hours?”,将回传数据设置为“business-hours-inquiry”。第二个对话开场白:将 text 设为“Can I make purchase here?”(我可以在这里购物吗?),并将回传数据设为“online-shopping-info”。

结果应如以下屏幕截图所示的配置:

ef6e6888acea93e3.png

与 Business Communications 控制台中所做的其他更改一样,这项更改需要一段时间才会生效,然后您才能看到在移动设备上所做的更改。

现在我们已经完成了对话开场白,我们还希望找出一种方法,引导用户在对话开始后顺利地开始对话。发送消息后,您可在上下文中使用条状标签来引导用户了解数字客服能够执行的其他功能。因此,每当用户询问营业时间或网上购物时,我们都会发送一条消息,建议用户通过代理做其他事情。

在函数末尾,添加以下代码:

bm-django-echo-bot/bopis/views.py

...
def send_online_shopping_info_message(conversation_id):
...
    # at the end of the function, send a message with suggestions
    message_obj = BusinessMessagesMessage(
        messageId=str(uuid.uuid4().int),
        representative=BOT_REPRESENTATIVE,
        text='Let us know how else we can help you:',
        fallback='Please let us know how else we can help you.',
        suggestions=[
            BusinessMessagesSuggestion(
                reply=BusinessMessagesSuggestedReply(
                text='Business hours',
                postbackData='business-hours-inquiry')
            ),
        ])

    send_message(message_obj, conversation_id)
...

# Let's do the same with the business hours
def send_message_with_business_hours(conversation_id):
...
    # at the end of the function, send a message with suggestions
    message_obj = BusinessMessagesMessage(
        messageId=str(uuid.uuid4().int),
        representative=BOT_REPRESENTATIVE,
        text='Let us know how else we can help you:',
        fallback='Please let us know how else we can help you.',
        suggestions=[
            BusinessMessagesSuggestion(
                reply=BusinessMessagesSuggestedReply(
                text='Can I purchase online?',
                postbackData='online-shopping-inquiry')
            ),
        ])

    send_message(message_obj, conversation_id)
...

请注意,BusinessMessagesSuggestion 中的文本字段不得超过 25 个字符,如文档中所述。

我们更新了对话开场白,并巧妙地使用了建议内容信息条,以下是关于预期用户体验的一些屏幕截图。

ef57695e2bacdd20.png

6. 恭喜

恭喜,您已成功构建您的第一个 Business Messages 数字客服!

您在 Business Messages 中部署了一个 Web 应用以支持您的数字代理,使用 Business Communications Console 修改了该代理,还通过更改源代码来塑造数字代理的用户体验。

现在,您已了解打造交互式 Business Messages 体验所需的关键步骤,从现在起,这种可能性令人振奋。可以扩展代理,以支持库存查询,或引入购物车来跟踪用户可能感兴趣的内容。您可以使用轮播界面展示菜单中的项目,并使用建议功能,让用户选择他们感兴趣的项目。

这里先简单说明一下之前的直播可能是什么样子。

57d2bb7b0ec38c81.png

如何打造出色的对话体验?

优秀的代理可为用户提供相关背景信息,同时通过对话为用户提供功能,使用户能够像平常通过电话甚至面对面一样的方式与商家互动和互动。如果您希望与所合作的商家进行对话,不妨思考以下主题如何应用。

提供背景信息并设定预期

提供背景信息可以是明确说明您可以如何帮助用户,也可以是以用户能够产生共鸣的角色来介绍数字代理。Business Messages 中成功的客服人员会使用有代表性的头像向用户显示他们正在与谁交流。

设定预期取决于您构建的用户体验。例如,如果您的代理支持商品目录查询,请先告知用户空闲情况可能较少,然后再提供答案。

向用户提供功能

消费者随时随地都在与商家联系。从查看订单状态等查询到商品是否有货,Business Messages 可支持复杂的用户互动。许多用户都会继续致电商家,寻求问题的答案,即使商家网站上提供了这些问题的答案。因此,企业必须投入更多资源来处理来电量,尤其是在节假日期间。

持续吸引用户

提供对话接触点,让用户持续参与对话。在消息之间,您可以调用输入状态指示器,让用户知道您正在处理用户的回答。

借助输入状态指示器、建议内容信息条、复合信息卡和轮播界面等丰富功能,您可以引导用户完成满意的路径用户体验,以帮助他们完成某些任务,例如从菜品菜单中下单。这样做的目标是减少商家电话获得的来电流量。

对话必须为用户提供功能。通过消息功能与商家联系的用户希望他们的问题能快速得到解答。在非理想情况下,数字代理无法促进对话,这可能会导致糟糕的用户体验。幸运的是,有一些方法可以解决这个问题,例如将对话转移到人工客服,我们将在未来的 Codelab 中介绍。

后续操作

准备就绪后,请查看以下一些主题,了解您可以在 Business Messages 中实现的更复杂的互动

参考文档