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

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

将 Amazon Connect 小部件添加到您的网站以接受聊天、任务、电子邮件和 Web 通话联系记录

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

第 1 步：为小部件创建联系表单

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

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

  2. 在左上角点击视图。

  3. 选择创建视图。

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

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

    • 连接操作组件是用于创建联系人的表单中最重要的元素。此组件应在表单中单独使用，不可与其他按钮类型组件混用。

    • 必须恰好存在一个连接操作组件，才能将视图与联系表单小部件一起使用。

    • 连接操作组件的 ConnectActionType 支持三种选项：

      • StartEmailContact

      • StartTaskContact

      • StartChatContact

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

    • 视图组件有许多样式选项，使您能够自定义表单以适应您的环境。

  5. 在表单中添加了连接操作按钮后，您就可以通过将由表单创建的联系人链接到连接操作按钮中的选项，来为这些联系人设置值。您希望链接的组件必须与连接操作按钮位于视图中的同一表单中。

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

    表单链接支持以下组件：

    • 表单输入

    • 下拉菜单（关闭多选）

    • 日期选取器

    • 文本区域

    • 时间选取器

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

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

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

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

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

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

    注意

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

  4. 在通信选项部分，选择添加联系表单。

  5. 选择您在上一步中配置的视图。如果视图中的连接操作组件没有设置联系流，您需要在此处设置一个。

  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 个域。

    “添加域”选项。

    域允许列表行为：

    • 自动包括子域。例如，如果您允许 example.com，则其所有子域（例如 sub.example.com）也被允许。

    • 协议 http:// 或 https:// 必须与您的配置完全匹配。设置允许域时指定确切的协议。

    • 自动允许所有 URL 路径。例如，如果允许 example.com，则其下的所有页面（例如 example.com/cart 或 example.com/checkout）均可访问。不能允许或阻止特定的子目录。

    重要

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

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

  2. 在为通信小部件添加安全保护下，建议您选择是，并与您的网站管理员一起设置 Web 服务器，以便为新的联系人请求发放 JSON Web 令牌（JWT）。这使您在发起新联系人时拥有了更多控制权，包括验证发送到 Amazon Connect 的请求是否来自经过身份验证的用户的功能。

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

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

    • Amazon Connect 在下一页提供了一个 44 个字符的安全密钥，您可以用它来创建 JSON Web 令牌（JWT）。

    • Amazon Connect 在通信小部件嵌入脚本中添加了一个回调函数，用于在联系启动时检查 JSON Web 令牌（JWT）。

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

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

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

  3. 选择保存。

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

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

安全密钥

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

Amazon Connect 提供的安全密钥。

当您的客户与您网站上的通信小部件互动时，通信小部件会向 Web 服务器请求 JWT。提供此 JWT 后，小部件会将其包含在最终客户向 Amazon Connect 发出的联系人请求中。然后，Amazon Connect 会使用密钥解密令牌。如果成功，则确认了 JWT 是由您的 Web 服务器发出的，Amazon Connect 会将联系人请求路由到您的联络中心座席。

JSON Web 令牌的详细信息

  • 算法：HS256

  • 声明：

    • sub：widgetId

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

    • iat：*按时发放。

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

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

    • 属性（可选）：包含字符串到字符串键值对的对象。联系属性必须遵循 StartChatContact API 设置的限制。

    • relatedContactId（可选）：带有效联系 ID 的字符串。relatedContactId 必须遵循 StartChatContact API 设置的限制。

    • customerId（可选）：这可以是 Amazon Connect Customer Profiles ID，也可以是来自外部系统（例如 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 示例，您可以将其嵌入到希望客户与联络中心互动的网站中。该脚本会在网站右下角显示小部件。

注意

在使用嵌入式内联样式时，将小部件脚本包含在需要渲染小部件的 HTML 元素中。

通信小部件脚本。

网站加载时，客户会首先看到小部件图标。他们选择此图标后，通信小部件将打开，客户就可以与您的座席发起联系了。

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

注意

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

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

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