如何在 Amazon Connect 屏幕弹出窗口中显示发起人联系属性？

上次更新时间：2020 年 1 月 17 日

当我的客户调用呼叫我的 Amazon Connect 联络中心时，我希望显示他们的联系属性，以便我的代理可以看到。该如何进行设置？

简短描述

使用屏幕弹出窗口，以在 Amazon Connect 联络控制面板 (CCP) 中向您的代理显示发起人联系属性。屏幕弹出窗口不直接在 Amazon Connect 实例 CCP 中提供。相反，您可以使用 Amazon Connect Streams API 将 CCP 集成到自定义 Web 应用程序中。有关更多信息，请参阅 GitHub 上的 Amazon Connect Streams 存储库。

按照以下说明设计一个联系流，以在呼叫路由期间设置联系属性。然后，使用提供的示例代码创建示例 Web 应用程序。在本示例设置中，您可以将联系属性值硬编码为测试。对于更高级的设置，您可以通过使用 AWS Lambda 对 Amazon DynamoDB 客户信息数据库执行数据查寻，以检索联系属性值。

有关更多信息，请参阅使用 CCP 中的联系数据和联系属性概念。关于另一个示例设置，请参阅 AWS 联系中心博客中的使用 Amazon Connect 执行外部屏幕弹出。

解决方法

创建或更新联系流

在 Amazon Connect 控制台中的访问 URL下，为您的实例选择访问 URL。
使用管理员账户登录您的实例。
在左侧的导航栏中，暂停路由，然后选择联系流。
在联系流中，选择一个模板或者您希望更新的现有联系流，或者选择创建联系流以从头开始设计联系流。如需更多信息，见创建新的联系流。
注意：您可以使用屏幕弹出窗口的示例注释模板，但设置屏幕弹出窗口时此模板不是必需的。
在联系流设计器的输入名称中，为联系流输入一个名称。（例如屏幕弹出窗口的联系属性。）
选择保存。

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

添加“设置联系属性”块

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

在联系流设计器中，选择设置，然后将设置联系属性块拖放到画布上。
选择块标题（设置联系属性）。这时将打开该块的设置菜单。
在待保存属性下，选择使用文本，然后执行以下操作：
对于目标密钥，为第一个名称属性输入名称，如 firstName。
对于值，输入示例名字进行测试。例如 Alexa。
选择添加另一个属性。
在新属性中，选择使用文本，然后执行以下操作：
对于目标密钥，为电话号码属性输入名称，如 phoneNumber。
对于值，请输入示例电话号码进行测试。例如 123-456-7890。
选择添加另一个属性。
在新属性中，选择使用文本，然后执行以下操作：
对于目标密钥，输入账号属性的名称，如 accountNumber。
对于值，输入示例账号进行测试。例如 9876543210。
选择保存。

设置联系转接

添加一个设置工作队列 块和一个转接到队列块。有关更多信息，请参阅设置联系转接。

连接块

在联系流设计器中，将各个块的箭头拖动到您要执行下一操作的块。所有连接器必须连接到一个块，然后才能发布联系流。

对于各个块，将按以下顺序将状态为开始或成功的块连接到下一个块：
入口点 > 设置联系属性 > 设置工作队列 > 转接到队列
对于各个块，将状态为错误和达到容量的块连接到断开/挂块。

保存并发布联系流

选择保存。
在保存流对话框中，选择保存。
选择发布。
在发布对话框中，选择发布。

在自定义 Web 应用程序中设置 CCP

使用 Streams API 将 Amazon Connect CCP 集成到自定义 Web 应用程序中。有关使用网页设置 Streams API 的详细信息，请参阅 GitHub 上的 Amazon Connect Streams 文档。

示例代码将 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>
 <script src="http://bucketName.s3-website-us-east-1.amazonaws.com/amazon-connect-v1.1.1-2-g0b8509c.js"></script>
</head>
<body>
<h1> Amazon Connect </h1>
<h2> Screenpop Example </h1>
<div id="containerDiv" ></div>
<script>
connect.core.initCCP(containerDiv, {
   ccpUrl:        'https://connectInstanceName.awsapps.com/connect/ccp#/',        /*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["name"]["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>

故障排除

要排查 Streams API 的问题，请使用脚本中的 console.log() 语句。当您处于网页中时，请在您的 Web 浏览器的开发人员工具控制台中查看日志记录输出。

如何在 Amazon Connect 屏幕弹出窗口中显示发起人联系属性？

简短描述

解决方法

相关信息