如何在 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 浏览器的开发人员工具控制台中查看日志记录输出。