View a markdown version of this page

将 “连接客户” 插件添加到您的网站以接受聊天、任务、电子邮件和网络通话联系人 - Amazon Connect Customer
第 1 步：为小部件创建联系表单第 2 步：自定义您的通信小工具第 3 步：指定您希望显示通信插件的网站域第 4 步：确认并复制通信插件代码和安全密钥

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

将 “连接客户” 插件添加到您的网站以接受聊天、任务、电子邮件和网络通话联系人

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

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

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

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

  2. 在左上角，选择视图。

  3. 选择创建视图。

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

    • 通过使用表单组件，您可以在创建时将表单输入链接到您的联系人。通过表单链接，您可以直接从与您的插件进行交互的任何人那里获取输入，并在创建联系人时使用他们在表单中包含的信息。

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

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

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

      • StartEmailContact

      • StartTaskContact

      • StartChatContact

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

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

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

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

    表单链接支持以下组件：

    • 表单输入

    • 下拉菜单（关闭多选）

    • 日期选取器

    • 文本区域

    • 时间选取器

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

第 2 步：自定义您的通信小工具

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

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

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

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

    注意

    在 Connect Customer 实例中创建的每个通信小工具的名称必须是唯一的。

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

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

  6. 选择 “保存并继续” 。

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

注意

该预览不会显示您创建的视图联系表单。仅显示标头样式。

显示类型

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

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

  • 使用 Emb edded inline，您可以将控件直接嵌入到网页中，无需按下按钮即可加载它

按钮样式

  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）。com/cart 或者举个例子。com/checkout）是可访问的。不能允许或阻止特定的子目录。

    重要

    • Double-check 您的网站 URL 有效且不包含错误。包括以以下开头的完整网址 https://.

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

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

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

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

    • Connect Customer 在下一页提供了 44 个字符的安全密钥，您可以使用该密钥创建 JSON 网络代币 (JWT)。

    • Connect 客户在通信插件嵌入脚本中添加了回调函数，该回调函数可在发起联系时检查 JSON 网络令牌 (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 网络令牌。如果需要更改，您也可以更新或轮换密钥。当你这样做时，Connect Customer 会为你提供一个新密钥并保留之前的密钥，直到你有机会更换它为止。部署新密钥后，您可以返回 Connect Customer 并删除之前的密钥。

连接客户提供的安全密钥。

当您的客户与您网站上的通信小部件互动时，通信小部件会向 Web 服务器请求 JWT。提供此 JWT 后，该小工具将把它作为最终客户联系客户请求的一部分。然后，连接客户使用密钥解密令牌。如果成功，这将确认 JWT 是由您的 Web 服务器发出的，Connect Customer 会将联系请求转发给您的联络中心客服。

JSON Web 令牌的详细信息

  • 算法：HS256

  • 声明：

    • sub: widgetId

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

    • iat：*按时发放。

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

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

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

    • 相关ContactId （可选）：包含有效联系人 ID 的字符串。相关人员ContactId 必须遵守 StartChatContact API 设定的限制。

    • CustomerID（可选）：这可以是 Connect 客户配置文件 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 元素中。

通信小部件脚本。

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

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

注意

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

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

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