将 Connect 控件添加到您的网站以接受聊天、任务、电子邮件和网络通话联系人 - Amazon Connect
第 1 步：为你的插件创建联系表第 2 步：自定义您的通信插件第 3 步：指定您希望在其中显示通讯控件的网站域名第 4 步：确认并复制通信控件代码和安全密钥

本文属于机器翻译版本。若本译文内容与英语原文存在差异，则一律以英文原文为准。

将 Connect 控件添加到您的网站以接受聊天、任务、电子邮件和网络通话联系人

本节中的主题说明了如何为您的网站创建和自定义通信小部件。您将创建一个联系表单，用于确定通过小组件创建的联系人的行为，然后自定义该小组件的外观和功能。

第 1 步：为你的插件创建联系表

在此步骤中，您将创建和自定义一个视图，该视图将确定通过您的小部件创建的联系人的行为。

  1. 登录 Amazon Connect 管理网站，网址为https://instance name.my.connect.aws/。在 “路由” 选项卡下，选择 “流程”。

  2. 点击左上角的 “视图”。

  3. 选择 “创建视图”。

  4. 在这里，您可以使用无代码生成器为客户配置联系表。一些重要提示：

    • 使用表单组件将允许您在创建表单时将表单输入链接到您的联系人。表单链接将允许您直接从与您的小部件互动的任何人那里获取输入，并在创建联系人时使用他们在表单中包含的信息。

    • Connect Action 组件是表单中用于创建联系人的最重要元素。此组件应在表单中不包含任何其他按钮类型组件的情况下使用。

    • 只有一个 Connect Action 组件才能使用 “带联系表单查看” 构件。

    • Connect 操作组件 ConnectActionType 支持三个选项：

      • StartEmailContact

      • StartTaskContact

      • StartChatContact

      电子邮件和任务都可以在联系表中使用。要为聊天联系人创建聊天前表单，请参阅在 Amazon Connect 托管的网站上添加聊天用户界面。

    • View 组件有许多样式选项，允许您自定义表单以适应您的环境。

  5. 将 Connect Action 按钮添加到表单后，您可以通过将表单创建的联系人链接到 “连接操作” 按钮中的选项来为他们设置值。您要链接的组件在视图中必须与 C onnect Action 按钮处于相同的表单中。

    激活新通信小部件请求的安全性。

    表单链接支持以下组件：

    • 表单输入

    • 下拉列表（关闭多选）

    • 日期选取器

    • 文字区域

    • Time Picker

  6. 视图准备就绪后，选择 “发布”。

第 2 步：自定义您的通信插件

在此步骤中，您将为客户自定义通信小部件的体验。

  1. 登录 Amazon Connect 管理网站，网址为https://instance name.my.connect.aws/。选择自定义通信小部件。

  2. 在 “通信” 微件页面上，选择 “添加通信” 小组件，开始自定义新的通信控件体验。要编辑、删除或复制现有的通信小部件，请从 “操作” 列下的选项中进行选择。

  3. 输入通信小部件的名称和描述。

    注意

    在 Amazon Connect 实例中创建的每个通信小部件的名称都必须是唯一的。

  4. 在 “通讯选项” 部分，选择 “添加联系表”。

  5. 选择您在上一步中配置的视图。如果视图中的 Connect Action 组件没有设置联系流，则需要在此处进行设置。

  6. 单击 Save and Continue。

在创建通信小部件页面上，选择小部件按钮样式以及显示名称和样式。当您选择这些选项时，小部件预览会自动更新，以便您看到客户的体验效果。

注意

预览不会显示您创建的 “查看联系人表单”。将仅显示标题样式。

显示器类型

您可以在 “联系表单” 构件的两种显示类型之间进行选择：

  • 浮动操作按钮允许您将控件作为可交互的按钮固定在网页的右下角

  • 嵌入式内联允许您直接将控件嵌入到网页中，无需按下按钮即可加载

按钮样式

  1. 通过输入十六进制值（HTML 颜色代码）来选择按钮背景的颜色。

  2. 选择白色或黑色作为图标颜色。无法自定义图标颜色。

小部件标题

  1. 提供标题消息和颜色以及小部件背景颜色的值。

  2. 徽标 URL：从 Amazon S3 存储桶或其他在线来源向徽标横幅插入一个 URL。

重要

如果该徽标来自 Amazon S3 存储桶以外的在线来源，则自定义页面中的通信小部件预览将不会显示徽标。只有当您的页面上安装了自定义通信小部件后，徽标才会显示。

横幅的格式必须为 .svg、.jpg 或 .png。图像可以是 280 px（宽）x 60 px（高）。任何大于这些尺寸的图像都将被缩放，以适应 280x60 徽标组件空间。

  • 有关如何将文件（如徽标横幅等）上传到 S3 的说明，请参阅《Amazon Simple Storage Service 用户指南》中的上传对象。

  • 确保正确设置了图像权限，以便通信小部件访问图像。有关如何使 S3 对象可公开访问的信息，请参阅设置网站访问权限主题中的步骤 2：添加存储桶策略。

第 3 步：指定您希望在其中显示通讯控件的网站域名

  1. 输入您要放置通信小部件的网站域。该小工具仅在您在此步骤中选择的网站上加载。

    选择添加域，添加最多 50 个域。

    “添加域”选项。
    重要

    • 仔细检查您的网站 URLs 是否有效且不包含错误。请添加以 https:// 为开头的完整 URL。

    • 建议您在生产网站和应用程序中使用 https://。

  2. 在 “为您的通信小组件添加安全性” 下，我们建议您选择 “是”，然后与您的网站管理员合作设置您的 Web 服务器，以便为新的联系人请求发放 JSON Web Token (JWTs)。这为您在发起新联系时提供了更多控制权，包括能够验证发送到 Amazon Connect 的请求是否来自经过身份验证的用户。

    激活新通信小部件请求的安全性。

    选择是，会产生以下结果：

    • Amazon Connect 在下一页提供了 44 个字符的安全密钥，你可以用它来创建 JSON 网络令牌 () JWTs。

    • Amazon Connect 在通信小部件嵌入脚本中添加了一个回调函数，用于在发起联系时检查 JSON 网络令牌 (JWT)。

      您必须在嵌入式代码段中设置回调函数，如以下示例所示。

      amazon_connect('authenticate', function(callback) {
  window.fetch('/token').then(res => {
    res.json().then(data => {
      callback(data.data);
    });
  });
});

    如果您选择此选项，则在下一步中，您将获得在您的网站上发起的所有联系请求的安全密钥。请您的网站管理员将您的 Web 服务器设置为 JWTs 使用此安全密钥发布。

  3. 选择保存。

第 4 步：确认并复制通信控件代码和安全密钥

在此步骤中，您要确认选择并复制通信小部件的代码，并将其嵌入到您的网站中。如果您选择在步骤 3 JWTs 中使用，也可以复制用于创建密钥的密钥。

安全密钥

使用此 44 个字符的安全密钥从您的 Web 服务器生成 JSON 网络令牌。如果需要更改，您也可以更新或轮换密钥。当您执行此操作时，Amazon Connect 会为您提供一个新密钥，同时保留以前的密钥，直到您替换它。部署新密钥后，您可以返回 Amazon Connect 并删除之前的密钥。

Amazon Connect 提供的安全密钥。

当您的客户与您网站上的通信控件互动时，该小组件会请求您的网络服务器提供 JWT。提供此 JWT 后，该小工具会将其包含在最终客户向 Amazon Connect 提出的联系请求中。然后，Amazon Connect 会使用密钥解密令牌。如果成功，这将确认 JWT 是由您的 Web 服务器签发的，并且 Amazon Connect 会将联系请求转发给您的联络中心客服。

JSON Web 令牌的详细信息

  • 算法：HS256

  • 声明：

    • 订阅:widgetId

      将 widgetId 替换为您自己的 widgetId。要查找您的 widgetId，请参阅通信小部件脚本中的示例。

    • iat：*按时发放。

    • exp：*有效期（最长 10 分钟）。

    • segmentAttributes（可选）：一组系统定义的键值对，使用属性映射存储在各个联系分段上。如需了解更多信息 SegmentAttributes ，请查看 StartChatContactAPI。

    • 属性（可选）：带有 string-to-string键值对的对象。联系人属性必须遵守 StartChatContactAPI 设置的限制。

    • relatedContactId （可选）：带有有效联系人 ID 的字符串。 relatedContactId 必须遵守 StartChatContactAPI 设定的限制。

    • CustomerID（可选）：这可以是 Amazon Connect 客户档案编号，也可以是来自外部系统（例如 CRM）的自定义标识符。

    *有关日期格式的信息，请参阅以下互联网工程任务组 (IETF) 文档：JSON Web 令牌 (JWT)，第 5 页。

下面的代码片段举例说明了如何使用 Python 生成 JWT：

import jwt 
import datetime 
CONNECT_SECRET = "your-securely-stored-jwt-secret" 
WIDGET_ID = "widget-id" 
JWT_EXP_DELTA_SECONDS = 500

payload = { 
'sub': WIDGET_ID, 
'iat': datetime.datetime.utcnow(), 
'exp': datetime.datetime.utcnow() + datetime.timedelta(seconds=JWT_EXP_DELTA_SECONDS), 
'customerId': "your-customer-id",
'relatedContactId':'your-relatedContactId',                    
'segmentAttributes': {"connect:Subtype": {"ValueString" : "connect:Guide"}}, 'attributes': {"name": "Jane", "memberID": "123456789", "email": "Jane@example.com", "isPremiumUser": "true", "age": "45"} } 
header = { 'typ': "JWT", 'alg': 'HS256' } 
encoded_token = jwt.encode((payload), CONNECT_SECRET, algorithm="HS256", headers=header) // CONNECT_SECRET is the security key provided by Amazon Connect

通信小部件脚本

下图显示了您在网站上嵌入的内容示例 JavaScript ，您希望客户在这些网站上与您的联络中心进行互动。该脚本会在网站右下角显示小部件。

注意

<body>使用嵌入式内联样式时，请将控件脚本包含在网页的标签中。

通信小部件脚本。

当您的网站加载时，客户首先会看到小部件图标。当他们选择此图标时，通信小部件将打开，客户可以开始与您的代理联系。

要随时更改通信小部件，请选择编辑。

注意

保存的更改将在几分钟内更新客户体验。保存之前，请确认您的小部件配置。

小部件预览上的编辑链接。

要更改网站上的小部件图标，您将收到一个新的代码片段，用于直接更新您的网站。