向由 Amazon Connect 托管的网站添加聊天用户界面

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

   

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

   

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

   注意

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

4. 在通信选项部分，选择客户如何与您的小部件互动，然后选择保存并继续。下图显示了允许客户聊天和留言回执的选项。

   

5. 在创建通信小部件页面上，选择小部件按钮样式以及显示名称和样式。

   当您选择这些选项时，小部件预览会自动更新，以便您看到客户的体验效果。

   

按钮样式

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

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

小部件标题

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

2. 徽标 URL：在 A URL mazon S3 存储桶或其他在线来源的徽标横幅中插入。

   注意

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

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

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

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

聊天视图

1. 字体：使用下拉菜单为通信小部件中的文本选择字体。

2. • 系统消息显示名称：键入新的显示名称以覆盖默认名称。默认为 SYSTEM_ MESSAGE。

   • 自动程序消息显示名称：键入新的显示名称以覆盖默认名称。默认值为BOT。

   • 文本输入占位符：键入新的占位符文本以覆盖默认值。默认为键入一条消息。

   • 结束聊天按钮文本：键入新文本以替换默认文本。默认为结束聊天。

3. 代理聊天气泡颜色：通过输入十六进制值（颜色代码）来选择代理消息气泡的HTML颜色。

4. 客户聊天气泡颜色：输入十六进制值（颜色代码），为客户的消息气泡选择HTML颜色。

5. 选择保存并继续。

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. 选择保存。