如何在 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 执行外部屏幕弹出

解决方法

创建或更新联系流

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

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

添加“设置联系属性”块

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

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

设置联系转接

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

连接块

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

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

保存并发布联系流

  1. 选择保存
  2. 保存流对话框中,选择保存
  3. 选择发布
  4. 发布对话框中,选择发布

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