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

# 将 Amazon Connect 小部件添加到您的网站以接受聊天、任务、电子邮件和 Web 通话联系记录
<a name="connect-widget-on-website"></a>

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

**Topics**
+ [第 1 步：为小部件创建联系表单](#create-web-form)
+ [第 2 步：自定义您的通信插件](#customize-communications-widget)
+ [第 3 步：指定您希望在其中显示通讯控件的网站域名](#communications-widget-domains)
+ [第 4 步：确认并复制通信控件代码和安全密钥](#confirm-and-copy-communications-widget-script)

## 第 1 步：为小部件创建联系表单
<a name="create-web-form"></a>

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

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

1. 在左上角点击**视图**。

1. 选择**创建视图**。

1. 在这里，您可以使用[无代码生成器](no-code-ui-builder.md)为您的客户配置联系表单。一些重要提示：
   + 使用表单组件将允许您在创建表单时将表单输入链接到您的联系人。表单链接将允许您直接获取与您的小部件互动的任何人的输入，并在创建联系人时使用他们在表单中填写的信息。
   + 连接操作组件是用于创建联系人的表单中最重要的元素。此组件应在表单中单独使用，不可与其他按钮类型组件混用。
   + 必须恰好存在一个连接操作组件，才能将视图与联系表单小部件一起使用。
   + Connect 操作组件 ConnectActionType 支持三个选项：
     + StartEmailContact
     + StartTaskContact
     + StartChatContact

     电子邮件和任务均可以在联系表单中使用。要为聊天联系创建聊天前表单，请参阅[在 Amazon Connect 托管的网站上添加聊天用户界面](add-chat-to-website.md)。
   + 视图组件有许多样式选项，使您能够自定义表单以适应您的环境。

1. 在表单中添加了**连接操作按钮**后，您就可以通过将由表单创建的联系人链接到连接操作按钮中的选项，来为这些联系人设置值。您希望链接的组件必须与**连接操作按钮**位于视图中的同一表单中。  
![\[激活新通信小部件请求的安全性。\]](http://docs.aws.amazon.com/zh_cn/connect/latest/adminguide/images/create-web-form-components-1.png)

   表单链接支持以下组件：
   + 表单输入
   + 下拉菜单（关闭多选）
   + 日期选取器
   + 文本区域
   + 时间选取器

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

## 第 2 步：自定义您的通信插件
<a name="customize-communications-widget"></a>

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

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

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

1. 输入通信小部件的**名称**和**描述**。
**注意**  
在 Amazon Connect 实例中创建的每个通信小部件的名称都必须是唯一的。

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

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

1. 单击 **Save and Continue**。

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

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

### 显示类型
<a name="display-types"></a>

您可以在联系表单小部件的两种显示类型之间进行选择：
+ *浮动操作按钮*允许您将小部件固定为网页右下角的可交互按钮
+ *嵌入式内联*允许您直接将小部件嵌入到网页中，无需按下按钮即可将其加载

### 按钮样式
<a name="button-styles"></a>

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

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

### 小部件标题
<a name="widget-header"></a>

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

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

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

横幅的格式必须为 .svg、.jpg 或 .png。图像可以是 280 px（宽）x 60 px（高）。任何大于这些尺寸的图像都将被缩放，以适应 280x60 徽标组件空间。
+ 有关如何将文件（如徽标横幅等）上传到 S3 的说明，请参阅《Amazon Simple Storage Service 用户指南》**中的[上传对象](#)。
+ 确保正确设置了图像权限，以便通信小部件访问图像。有关如何公开访问 S3 对象的信息，请参阅“设置网站访问权限”主题中的[第 2 步：添加存储桶策略](#)。

## 第 3 步：指定您希望在其中显示通讯控件的网站域名
<a name="communications-widget-domains"></a>

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

   选择**添加域**，添加最多 50 个域。  
![\[“添加域”选项。\]](http://docs.aws.amazon.com/zh_cn/connect/latest/adminguide/images/chatwidget-add-domain.png)

   域允许列表行为：
   + 自动包括子域。例如，如果您允许 example.com，则其所有子域（例如 sub.example.com）也被允许。
   + 协议 http:// 或 https:// 必须与您的配置完全匹配。设置允许域时指定确切的协议。
   + 自动允许所有 URL 路径。例如，如果允许使用 example.com，则允许其下的所有页面（例如示例。 com/cart or example.com/checkout) 可以访问。不能允许或阻止特定的子目录。
**重要**  
仔细检查您的网站 URLs 是否有效且不包含错误。请添加以 https:// 为开头的完整 URL。
建议您在生产网站和应用程序中使用 https://。

1. 在 “**为您的通信小组件添加安全性**” 下，我们建议您选择 “**是**”，然后与您的网站管理员合作设置您的 Web 服务器，以便为新的联系人请求发放 JSON Web Token (JWTs)。这使您在发起新联系人时拥有了更多控制权，包括验证发送到 Amazon Connect 的请求是否来自经过身份验证的用户的功能。  
![\[激活新通信小部件请求的安全性。\]](http://docs.aws.amazon.com/zh_cn/connect/latest/adminguide/images/chatwidget-choose-security.png)

   选择**是**，会产生以下结果：
   + Amazon Connect 在下一页提供了 44 个字符的安全密钥，你可以用它来创建 JSON 网络令牌 () JWTs。
   + Amazon Connect 在通信小部件嵌入脚本中添加了一个回调函数，用于在联系启动时检查 JSON Web 令牌（JWT）。

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

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

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

1. 选择**保存**。

## 第 4 步：确认并复制通信控件代码和安全密钥
<a name="confirm-and-copy-communications-widget-script"></a>

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

### 安全密钥
<a name="communications-widget-security-key"></a>

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

![\[Amazon Connect 提供的安全密钥。\]](http://docs.aws.amazon.com/zh_cn/connect/latest/adminguide/images/chatwidget-security-key.png)


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

#### JSON Web 令牌的详细信息
<a name="jwt"></a>
+ 算法：**HS256**
+ 声明：
  + **订阅**:*widgetId*

    将 `widgetId` 替换为您自己的 widgetId。要查找您的 widgetId，请参阅[通信小部件脚本](#communications-widget-script)中的示例。
  + **iat**：\$1按时发放。
  + **exp**：\$1有效期（最长 10 分钟）。
  + **segmentAttributes（可选）**：一组系统定义的键值对，使用属性映射存储在各个联系分段上。如需了解更多信息 SegmentAttributes ，请查看 [StartChatContact](https://docs.aws.amazon.com/connect/latest/APIReference/API_StartChatContact.html#connect-StartChatContact-request-SegmentAttributes)API。
  + **属性（可选）**：带有 string-to-string键值对的对象。联系人属性必须遵守 [StartChatContact](https://docs.aws.amazon.com/connect/latest/APIReference/API_StartChatContact.html#connect-StartChatContact-request-Attributes)API 设置的限制。
  + **relatedContactId （可选）**：带有有效联系人 ID 的字符串。 relatedContactId 必须遵守 [StartChatContact](https://docs.aws.amazon.com/connect/latest/APIReference/API_StartChatContact.html)API 设定的限制。
  + **customerId（可选）**：这可以是 Amazon Connect Customer Profiles ID，也可以是来自外部系统（例如 CRM）的自定义标识符。

  \$1有关日期格式的信息，请参阅以下互联网工程任务组 (IETF) 文档：[JSON Web 令牌 (JWT)](https://tools.ietf.org/html/rfc7519)，第 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
```

### 通信小部件脚本
<a name="communications-widget-script"></a>

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

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

![\[通信小部件脚本。\]](http://docs.aws.amazon.com/zh_cn/connect/latest/adminguide/images/chatwidget-code.png)


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

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

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

![\[小部件预览上的编辑链接。\]](http://docs.aws.amazon.com/zh_cn/connect/latest/adminguide/images/chatwidget-edit.png)


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