如何在 Amazon Connect 屏幕弹出窗口中显示来电人联系属性？
上次更新日期：2021 年 8 月 17 日
我希望我的 Amazon Connect 联系中心的座席能够看到客户来电的联系属性。该如何设置？
简短描述
要在 Amazon Connect 联系控制面板（CCP）中向您的座席显示来电人联系属性，请使用屏幕弹出窗口。
要在 Amazon Connect 中使用屏幕弹出窗口，您必须使用 Amazon Connect Streams API 将 CCP 集成到自定义应用程序中。您不能直接在 CCP 中使用屏幕弹出窗口。
本文中的示例过程展示了如何通过以下操作在 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 中设置屏幕弹出窗口时不需要使用此模板。
-或者-
要设计自定义接洽流程，请选择 Create contact flow（创建接洽流程）。
6. 在接洽流程设计器的 Enter a name（输入名称）部分，为接洽流程输入名称。例如：屏幕弹出窗口的联系属性。
7. 选择 Save（保存）。
有关更多信息，请参阅 创建新的接洽流程。
添加“设置联系属性”块
重要提示：在您用于自定义 Web 应用程序的 HTML 文件中，必须引用您在此块中定义的联系属性。
要将键值对存储为联系属性，请使用设置联系属性块。
1. 在接洽流程设计器中，选择 Set（设置）。然后，将设置联系属性块拖放到画布上。
2. 选择块标题（设置联系属性）。这时将打开该数据块的设置菜单。
3. 在 Attribute to save（要保存的属性）下，选择 Use text（使用文本）。然后，进行以下操作：
对于 Destination key（目标键），请为名字属性输入名称，例如 firstName。
对于值，输入示例名字进行测试。例如 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（保存）。
添加“转接至队列”块
要结束当前接洽流程并将客户置于队列中，请添加转移至队列块。
有关更多信息，请参阅设置联系转接。
添加“设置工作队列”块
要指定在调用“转接至队列”块时要使用的队列，请添加设置工作队列块。
有关更多信息，请参阅设置联系转接。
连接块
重要提示：所有连接器都必须连接到一个块，然后才能发布接洽流程。
在接洽流程设计器中进行以下操作，将箭头从每个块拖动到您要执行下一项操作的块：
1. 对于每个块，按照以下顺序将开始或成功连接到下一个块：
入口点 > 设置联系属性 > 设置工作队列 > 转接至队列
2. 对于每个块，将错误和达到容量连接到断开连接/挂断块。
保存并发布接洽流程
1. 选择 Save（保存）。
2. 在 Save flow（保存流程）对话框中，选择 Save（保存）。
3. 选择 Publish（发布）。
4. 在 Publish（发布）对话框中，选择 Publish（发布）。
在自定义 Web 应用程序中设置您的 Amazon Connect 实例的 CCP
要将您的实例的 CCP 集成到自定义 Web 应用程序中，请按照 GitHub 上的 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()。