如何在 Amazon Connect 屏幕弹窗中显示呼叫方联系人属性？

3 分钟阅读

我希望 Amazon Connect 联络中心的座席能够看到入站客户呼叫的联系人属性。我该如何设置？

简短描述

要在 Amazon Connect 联系人控制面板 (CCP) 中向您的座席显示呼叫方联系人属性，请使用屏幕弹窗。

要在 Amazon Connect 中使用屏幕弹窗，您必须使用 Amazon Connect Streams API 将 CCP 集成到自定义应用程序中。屏幕弹窗不能直接在 CCP 中使用。

本文中的示例过程展示了如何通过执行以下操作在 CCP 中显示呼叫方联系人属性：

创建或更新联系流，在呼叫路由期间设置联系人属性。
在自定义 Web 应用程序中设置 Amazon Connect 实例的 CCP。

有关更多信息，请参阅在 CCP 中使用联系人属性。

解决方法

**注意：**在此示例设置中，您可以将联系人属性值硬编码作为测试。要进行更高级的设置，您可以使用 AWS Lambda 从 Amazon DynamoDB 数据库中检索客户信息来获取联系人属性值。有关类似示例，请参阅如何在 Amazon Connect 联络中心为座席间呼叫创建分机号？

创建或更新联系流以在呼叫路由期间设置联系人属性

在联系流设计器中新建联系流或打开现有联系流

1. 打开 Amazon Connect 控制台。

2. 在 Access URL（访问 URL）下，选择您的 Amazon Connect 实例的访问 URL。

3. 使用管理员账户登录您的实例。

4. 在左侧导航窗格中，将鼠标悬停在 **Routing（路由）上。**然后，选择 Contact flows（联系流）。

5. 在 Contact flows（联系流）下，选择要更新的模板或现有联系流。
注意：您可以使用屏幕弹窗备注示例模板，但并非必须要在 Amazon Connect 中设置屏幕弹窗。

-or-

要设计自定义联系流，请选择 Create contact flow（创建联系流）。

6. 在联系流设计器中，对于 Enter a name（输入名称），输入联系流的名称。例如： 适用于屏幕弹窗的联系人属性。

7. 选择 Save（保存）。

有关更多信息，请参阅创建新的联系流。

添加“设置联系人属性”块

**重要事项：**您在此块中定义的联系人属性，必须在您用于自定义 Web 应用程序的 HTML 文件中引用。

要将键值对存储为联系人属性，请使用设置联系人属性块。

1. 在联系流设计器中，选择 Set（设置）。然后，将 Set contact attributes（设置联系人属性）块拖放到画布上。

2. 选择块标题（设置联系人属性）。系统会打开块的设置菜单。

3. 在 Attribute to save（要保存的属性）下，选择 Use text（使用文本）。然后，执行以下操作：
对于 Destination key（目标键），输入名字属性的名称，例如 firstName。
对于 Value（值），输入用于测试的名字示例。例如，Alexa。

4. 选择 Add another attribute（添加其他属性）。

5. 在新属性中，选择 Use text（使用文本）。然后，执行以下操作：
对于 Destination key（目标键），输入电话号码属性的名称。例如：phoneNumber。
对于 Value（值），输入用于测试的电话号码示例。例如： 123-456-7890。

6. 选择 Add another attribute（添加其他属性）。

7. 在新属性中，选择 Use text（使用文本）。然后，执行以下操作：
对于 Destination key（目标键），输入账号属性的名称。例如：accountNumber。
对于 Value（值），输入用于测试的账号示例。例如： 9876543210。

8. 选择 Save（保存）。

添加“转接到队列”块

要结束当前联系流并将客户置于队列中，请添加 Transfer to queue（转接到队列）块。

有关更多信息，请参阅设置联系人转接。

添加“设置工作队列”块

要指定在调用“转接到队列”块时使用的队列，请添加 Set working queue（设置工作队列）块。

有关更多信息，请参阅设置联系人转接。

连接块

**重要事项：**在发布联系流之前，所有连接器都必须连接到一个块。

在联系流设计器中，通过执行以下操作，将每个块中的箭头拖到要执行下一个操作的块中：

1. 对于每个块，按以下顺序将 Start 或 Success 连接到下一个块：
入口点 > 设置联系人属性 > 设置工作队列 > 转接到队列

2. 对于每个块，将 Error 和 At capacity 连接到 Disconnect / hang up（断开连接/挂断）块。

保存并发布联系流

1. 选择 Save（保存）。

2. 在 Save flow（保存流）对话框中，选择 Save（保存）。

3. 选择 Publish（发布）。

4. 在 Publish（发布）对话框中，选择 Publish（发布）。

在自定义 Web 应用程序中设置 Amazon Connect 实例的 CCP

要将实例的 CCP 集成到自定义 Web 应用程序中，请按照 GitHub 上 Amazon Connect Streams documentation（Amazon Connect Streams 文档）中的说明进行操作。

座席接听呼叫方来电时触发屏幕弹窗显示的 Amazon Connect Streams API 代码示例

以下示例代码将 CCP 集成到一个基础 HTML 文件中，该文件作为静态网站托管在 Amazon Simple Storage Service (Amazon S3) 上。

重要事项：请根据需要修改示例代码，以引用您在联系流的设置联系人属性块中定义的所需联系人属性。同时确保将 bucketName 替换为您的 S3 存储桶名称，并将 connectInstanceName 替换为您的 Amazon Connect 实例名称。有关更多信息，请参阅访问存储桶和启动 CCP。

<!--Copyright 2019 Amazon.com, Inc. or its affiliates. All Rights Reserved.-->
<!--SPDX-License-Identifier: MIT-0-->

<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="http://bucketName.s3-website-us-east-1.amazonaws.com/connect-streams-min.js"></script>
</head>
<body>
<h1> Amazon Connect </h1>
<h2> Screenpop Example </h1>
<div id="containerDiv" ></div>
<script>
connect.core.initCCP(containerDiv, {
   ccpUrl:        'https://my-instance-domain.awsapps.com/connect/ccp-v2/',        /*REQUIRED (*** has been replaced) */
   loginPopup:    true,          /*optional, default TRUE*/
   softphone:     {              /*optional*/
      allowFramedSoftphone: true
   }
});
connect.contact(function(contact) {

        contact.onIncoming(function(contact) {
        });

        contact.onRefresh(function(contact) {
        });

        contact.onAccepted(function(contact) {
        });

        contact.onEnded(function() {
        });

        contact.onConnected(function() {
                console.log(`onConnected(${contact.getContactId()})`);
                var attributeMap = contact.getAttributes();
                var name = JSON.stringify(attributeMap["firstName"]["value"]);
                var phone = JSON.stringify(attributeMap["phoneNumber"]["value"]);
                var account = JSON.stringify(attributeMap["accountNumber"]["value"]);
                console.log(name);
                console.log(phone);
                console.log(account);
                window.alert("Customer's name: " + name + "\nCustomer's phone #: " + phone + "\nCustomer's account #: " + account);

        });
});
</script>
</body>
</html>

**注意：**您还可以将屏幕弹窗配置为在接听呼叫或呼叫路由到座席时显示。

对 Amazon Connect Streams API 的问题进行故障排除

在脚本中使用 console.log() 语句。在网页上操作时，您可在 Web 浏览器的开发者工具的控制台中查看日志记录输出。

有关更多信息，请参阅 MDN Web Docs 页面上的 console.log()。