本文属于机器翻译版本。若本译文内容与英语原文存在差异，则一律以英文原文为准。 # 自定义 Amazon Connect 代理工作区 Agent Workspace 本节介绍如何自定义 Agent Workspace 和启用引导式体验 代理工作区开箱即用地集成了所有面向代理的功能。当客服人员接听电话、聊天、电子邮件或任务时，他们可以看到有关案例和客户的相关信息，以及 step-by-step指导和实时建议。 您可以通过集成第三方应用程序和创建带有 step-by-step指南的自定义工作流程来自定义代理工作区。 下图显示了 Agent Workspace 的部分内容。 ![\[Agent Workspace，包含指向每个部分的标注。\]](http://docs.aws.amazon.com/zh_cn/connect/latest/adminguide/images/agent-workspace-intro-sq.png) 1. **联系人控制面板**，代理使用它来处理电话、聊天、电子邮件和任务。 1. **第三方应用程序**，可减少座席与之互动的窗口数量。 1. 由 **Connect 人工智能代理**提供支持的实时推荐。 1. 分配工作或后续活动的**任务**。 1. 案例 ID 和**案例**选项卡上的其他信息，由 Amazon Connect Cases 提供支持。 1. **Step-by-step 指南**，提供一致的工作流程以减轻认知负担。 1. 由 **Voice ID** 支持的机器学习语音身份验证。 1. **客户资料**选项卡上的客户信息，由 Amazon Connect Customer Profiles 提供支持。 您还可以将供应商或自己开发的[第三方应用程序](3p-apps.md)集成到座席工作区。下图显示了代理工作区**SchedulerApp**中名为的第三方应用程序示例。座席可以使用位于座席工作区右上角的**应用程序启动器启动应用程序**。 ![\[座席工作区的应用程序启动器。\]](http://docs.aws.amazon.com/zh_cn/connect/latest/adminguide/images/agent-workspace-intro-3P-apps.png) **Topics** + [S tep-by-step 指南](step-by-step-guided-experiences.md) + [启用 step-by-step指南](enable-guided-experiences-sg.md) + [视图资源](view-resources-sg.md) + [用户界面生成器](no-code-ui-builder.md) + [在联系开始时调用指南](how-to-invoke-a-flow-sg.md) + [在聊天中部署 step-by-step指南](step-by-step-guides-chat.md) + [在 Agent Workspace 中显示联系人属性](display-contact-attributes-sg.md) + [使座席能够输入处置代码](disposition-codes-sg.md) + [PII 编辑](step-by-step-guides-pii-redaction.md) + [查看集成](integrate-views-with-connect-resources.md) + [经理在工作区中使用指南](use-guides-in-manager-workspace.md) + [创建基于角色的工作区页面](use-views-to-create-persona-based-workspace-pages.md) + [自定义代理工作区的主题](customize-theme-agent-workspace.md) + [集成第三方应用程序（3p 应用程序）](3p-apps.md) # Step-by-step 设置 Amazon Connect 代理工作空间的指南 S tep-by-step 指南 在 Amazon Connect Agent Workspace 中，您可以创建工作流，引导座席浏览自定义用户界面页面，这些页面能够提供在客户互动期间的给定时刻要做什么的相关建议。您可以创建为代理提供屏幕弹出窗口和单页表单的工作流程，也可以创建详细的 step-by-step指南，为代理提供有关如何处理特定用例的明确说明。您还可以自定义用户界面和座席看到的数据。 要详细了解可能的用户界面配置，请参阅我们的交互式[文档](https://d3irlmavjxd3d8.cloudfront.net/?path=/story/overview--page)。 要了解有关 step-by-step指南定价的更多信息，请在 Amazon Connect [定价页面](https://aws.amazon.com/connect/pricing/)上，滚动至**代理工作效率**部分，然后选择**指南**选项卡。 ## 概述 您可以通过创建使用[显示视图](show-view-block.md)的流为座席创建工作流程。**显示视图**数据块确定要在座席的用户界面中呈现什么视图。所有预先存在的流数据块都可用于创建分支决策树以及从外部系统发送和接收数据。 使用带有 “**显示视图**” 区块的流程来运行 step-by-step指南时，会在您的 Amazon Connect 实例中创建单独的聊天联系人。此联系人会创建独特的 CTR。如果您还使用[设置事件流](set-event-flow.md)数据块，则该联系人与入站联系人关联。在与座席工作区或 Amazon Connect 小组件交互时，无论是座席还是客户都不知道这个基础联系人。 将视图映射到**显示视图**数据块时，您可以从预先构建的视图列表中进行选择。有关创建指南的详细信息和最佳实践，请参阅[显示视图](show-view-block.md)。 ## 复杂的 JSON 对象支持 使用该[显示视图](show-view-block.md)块在 Amazon Connect 代理工作空间和流程之间传递复杂的 JSON 对象。使用 [AWS Lambda 函数](invoke-lambda-function-block.md)数据块可指定 JSON 对象作为输入和输出参数。这些数据块让您可以使用更少的映射步骤来传递更多的数据量。 # 在 Amazon Connect 中启用 step-by-step指南 启用 step-by-step指南 通过执行以下步骤，您可以为用户提供创建引导式体验的功能，并允许座席与体验进行交互。 1. **让管理员能够创建视觉流** 为经理和业务分析师分配**通道和流：视图**安全配置文件权限，如下图所示。此权限使他们能够在流程中配置 step-by-step指南。 由于指南是使用流创建的，因此还要分配**流 - 编辑、创建**权限，以便他们可以创建任何类型的流。 ![\[安全配置文件权限页面，显示流和视图权限。\]](http://docs.aws.amazon.com/zh_cn/connect/latest/adminguide/images/sec-perms-admin-create-sq.png) 1. **允许座席查看指南** 向座席分配**座席应用程序 - 自定义视图**权限。这使他们能够在代理工作区中查看 step-by-step指南。 ![\[安全配置文件权限页面、座席应用程序部分、自定义视图权限\]](http://docs.aws.amazon.com/zh_cn/connect/latest/adminguide/images/sec-perms-agent-view-sq.png) 1. **增加每个实例的并发活跃聊天的服务限额** 座席与之交互的工作流在 Amazon Connect 中以聊天联系人的身份运行。建议您按预计启用此功能的并发联系人数来增加**每个实例的并发活跃聊天**限额。 有关限额的更多信息，请参阅[Amazon Connect 配额](amazon-connect-service-limits.md#connect-quotas)。 **注意** 断开连接流工作流计为他们自己的联系人，因此，如果您同时设置了 `DefaultFlowID` 和 `DisconnectFlowID`，则他们将被视为两个活跃联系人。 # 视图：在 Amazon Connect 中自定义座席的工作区的用户界面模板 视图资源 *视图*是可用于自定义 Agent Workspace 的用户界面模板。例如，您可以使用视图向座席显示联系人属性，提供用于输入处置代码的表单，提供呼叫记录，以及为代理人展示用户界面页面，供代理人浏览 step-by-step指南。 Amazon Connect 包含一组视图，您可以添加代理的工作空间，也可以使用我们的公共视图创建自己的视图 APIs。 使用[显示视图](show-view-block.md)数据块在流中配置视图时，您可以为每个视图定义静态和动态内容。特定视图的内容由三个关键元素组成：模板、输入架构和操作。 **提示** 为了获得最佳的数据映射体验，建议在[显示视图](show-view-block.md)数据块中使用**设置 JSON** 选项。流中的所有命名空间都可以在**显示视图**数据块中引用，包括 `$.External`，这使您可以在所创建的任何视图中将来自外部系统的数据共享给座席。您可以混合和匹配来自 Amazon Connect 和其他来源的数据，以便为您的座席创建整合的用户界面。 # Amazon Connect 座席工作区中的自定义视图 自定义视图 使用 APIs 您可以创建自己的视图资源。View 资源包括 CloudFormation CloudTrail、和标记支持。 ## 查看 API 示例 查看 API 示例 **视图描述** 此视图将两张卡片嵌套在一个容器中，并在其右侧放置了一个跳过按钮。 **CLI 命令** ``` aws connect create-view --name CustomerManagedCardsNoContainer \ --status PUBLISHED --content file://view-content.json \ --instance-id $INSTANCE_ID --region $REGION ``` **view-content.json** ``` { "Template": "Actions": ["CardSelected", "Skip"] } ``` **模板 JSON（未进行字符串化）** ``` { "Head": { "Title": "CustomerManagedFormView", "Configuration": { "Layout": { "Columns": ["10", "2"] // Default column width for each component is 12, which is also the width of the entire view. } } }, "Body": [ { "_id": "card-container", "Type": "Container", "Props": {}, "Content": [ { "_id": "cafe_card", "Type": "Card", "Props": { "Id": "cafe-card", "Heading": "Cafe Card", "Icon": "Cafe", "Status": "Status Field", "Description": "This is the cafe card.", "Action": "CardSelected" // Note that these actions also appear in the view-content.json file. }, "Content": [] }, { "_id": "no_icon_card", "Type": "Card", "Props": { "Id": "NoIconCard", "Heading": "$.NoIconCardHeading", "Status": "Status Field", "Description": "This is the icon card.", "Action": "CardSelected" // Note that these actions also appear in the view-content.json file. }, "Content": [] } ] }, { "_id": "button", "Type": "Button", "Props": { "Action": "Skip" }, // Note that these actions also appear in the view-content.json file. "Content": ["Skip"] } ] } ``` ## 视图 视图 **输入** `$.NoIconCardHeading` 指示字段 `NoIconCardHeading` 的输入是呈现视图所必需的。 假设 `NoIconCardHeading` 设置为 `No Icon Card`。 **外观** ![\[Agent Workspace 视图卡片的图像。\]](http://docs.aws.amazon.com/zh_cn/connect/latest/adminguide/images/view-resources-custom-the-view.png) ## 视图输出示例 视图输出两条主要数据：`Action` 获取的数据和 `Output` 数据。 将视图与[“显示视图”数据块](https://docs.aws.amazon.com/connect/latest/adminguide/show-view-block.html)一起使用时，`Action` 表示一个分支，并且 `Output` 数据设置为 `$.Views.ViewResultData` 流属性，如“显示视图”数据块文档中所述。 **场景 1：选择 **Cafe Card** 卡** ``` "Action": "CardSelected" "Output": { "Heading": "CafeCard", "Id": "CafeCard" } ``` **场景 2：选择 **Skip** 按钮** ``` "Action": "Skip" "Output": { "action": "Button" } ``` ## 表单视图输出示例 使用 **AWS 管理的视图（表单视图）**时，表单数据的结果将位于下方。*FormData* ``` { FormData: { email: "a@amazon.com" } } ``` 您可以访问显示视图数据块中的数据，例如 `$.Views.ViewResultData.FormData.email`。 使用**自定义视图（带有表单组件）**时，表单数据的结果将直接显示在输出下方。 ``` { email: "a@amazon.com" } ``` 您可以访问显示视图数据块中的数据，例如 `$.Views.ViewResultData.email`。 # 在 Amazon Connect 中为代理的工作空间设置 AWS 托管视图 AWS 托管视图 Amazon Connect 包括一组视图，您可以添加代理的工作区。有关如何配置不同 AWS 托管视图的详细信息，请参阅以下内容。 ------ #### [ Detail view ] **详细信息视图**用于向座席显示信息，并为其提供他们可以采取的操作的列表。**详细信息视图**的一个常见用例是在呼叫开始时向座席显示屏幕弹出窗口。 + 此视图中的操作可用于让代理继续执行 step-by-step指南中的下一步，也可以使用这些操作来调用全新的工作流程。 + **Sections** 是唯一必需的组件。在这里，您可以配置要向座席显示的页面正文。 + 此视图支持诸如之**AttributeBar**类的可选组件。 **详细信息视图**的交互式[文档](https://d3irlmavjxd3d8.cloudfront.net/?path=/docs/aws-managed-views-detail--with-all) 下图显示了一个**详细信息视图**示例。它包含页面标题、描述和四个示例。 ![\[详细信息视图，包括页面标题、描述和四个带属性的示例。\]](http://docs.aws.amazon.com/zh_cn/connect/latest/adminguide/images/details-view-page-heading-sq.png) **Sections** + 内容可以是静态字符串、 TemplateString 或键值对。它可以是单个数据点或列表。有关更多信息，请参阅 [TemplateString](https://d3irlmavjxd3d8.cloudfront.net/?path=/docs/aws-managed-views-common-configuration--page#templatestring)或 [AtrributeSection](https://d3irlmavjxd3d8.cloudfront.net/?path=/docs/aws-managed-views-common-configuration--page#attribute-section)。 **AttributeBar （可选）** + 可选，如果提供，将在视图的顶部显示属性栏。 + 是具有必需属性、**标签**、**值**和可选属性**LinkType**ResourceId****、**可复制**和 Ur **l** 的对象列表。有关更多信息，请参阅[属性](https://d3irlmavjxd3d8.cloudfront.net/?path=/docs/aws-managed-views-common-configuration--page#attribute)。 + **LinkType**可以是外部的，也可以连接诸如案例之类的应用程序。 + 当它位于*外部* 时，用户可以导航到配置有 **Url** 的新浏览器页面。 + *在这种情况下*，用户可以在座席工作区中导航到新的案例详细信息，该工作区配置为 ResourceId。 + **Copyable** 允许用户 ResourceId 通过在输入设备上进行选择来复制。 **Back（可选）** + 可选，但如果不包括任何操作，则为必填项。如果提供，将显示返回导航链接。 + 是一个带有*标签*的对象，它将控制链接文本中显示的内容。 **Heading（可选）** + 可选，如果提供，将显示文本作为标题。 **Description（可选）** + 可选，如果提供，将在标题下显示描述文本。 **Actions（可选）** + 可选。如果提供，将在页面下显示操作列表。 **输入示例** ``` { "AttributeBar": [ {"Label": "Example", "Value": "Attribute"}, { "Label": "Example 2", "Value": "Attribute 3", "LinkType": "case", "ResourceId": "123456", "Copyable": true } ], "Back": { "Label": "Back" }, "Heading": "Hello world", "Description": "This view is showing off the wonders of a detail page", "Sections": [{ "TemplateString": "This is an intro paragraph" }, "abc"], "Actions": ["Do thing!", "Update thing 2!"], } ``` **输出示例** ``` { Action: "ActionSelected", ViewResultData: { actionName: "Action 2" } } ``` ------ #### [ List view ] **列表视图**用于将信息显示为带有标题和描述的项目列表。项目也可以充当附有操作的链接。它还可以选择支持标准返回导航和持久上下文标题。 **列表视图**的交互式[文档](https://d3irlmavjxd3d8.cloudfront.net/?path=/docs/aws-managed-views-list--with-all) 下图显示了一个列表视图的示例。它有一列，里面包含三个项目。 ![\[列表视图，一个带链接的列表项和两个不带链接的项目。\]](http://docs.aws.amazon.com/zh_cn/connect/latest/adminguide/images/list-view-column-sq.png) **Items** + 必填项，会将这些项目显示为列表。 + 每个项目可能有标题、描述、图标和 ID。 + 所有其他属性均为可选。 + 定义 ID 后，输出将包括该值作为输出的一部分。 **AttributeBar （可选）** + 可选，如果提供，将在视图的顶部显示属性栏。 + 是具有必需属性、**标签**、**值**和可选属性**LinkType**ResourceId****、**可复制**和 Ur **l** 的对象列表。有关更多信息，请参阅[属性](https://d3irlmavjxd3d8.cloudfront.net/?path=/docs/aws-managed-views-common-configuration--page#attribute)。 + **LinkType**可以是外部的，也可以连接诸如案例之类的应用程序。 + 当它位于*外部* 时，用户可以导航到配置有 **Url** 的新浏览器页面。 + *在这种情况下*，用户可以在座席工作区中导航到新的案例详细信息，该工作区配置为 ResourceId。 + **Copyable** 允许用户 ResourceId 通过在输入设备上进行选择来复制。 **Back（可选）** + 可选，但如果不包括任何操作，则为必填项。如果提供，将显示返回导航链接。 + 是一个带有*标签*的对象，它将控制链接文本中显示的内容。 **Heading（可选）** + 可选，如果提供，将显示文本作为标题。 **SubHeading （可选）** + 可选，如果提供，将显示文本作为列表标题。 **输入数据示例** ``` { "AttributeBar": [ { "Label": "Example", "Value": "Attribute" }, { "Label": "Example 2", "Value": "Attribute 2" }, { "Label": "Example 2", "Value": "Attribute 3", "LinkType": "external", "Url": "https://www.amzon.com" } ], "Back": { "Label": "Back" }, "Heading": "José may be contacting about...", "SubHeading": "Optional List Title", "Items": [ { "Heading": "List item with link", "Description": "Optional description here with no characters limit. We can just wrap the text.", "Icon": "School", "Id": "Select_Car" }, { "Heading": "List item not a link", "Icon": "School", "Description": "Optional description here with no characters limit." }, { "Heading": "List item not a link and no image", "Description": "Optional description here with no characters limit." }, { "Heading": "List item no image and with link", "Description": "Optional description here with no characters limit." } ] } ``` **输出数据示例** ``` { Action: "ActionSelected", ViewResultData: { actionName: "Select_Car" } } ``` ------ #### [ Form view ] **表单视图**允许您为座席提供输入字段，以收集所需的数据并将数据提交到后端系统。此视图由多个 *Sections* 组成，包含预定义 *Section* 样式，并带有标题。正文由按列或网格布局格式排列的各种输入字段组成。 **表单视图**的交互式[文档](https://d3irlmavjxd3d8.cloudfront.net/?path=/docs/aws-managed-views-form--with-all) 下图显示了有关汽车租赁预订的表单视图示例。其中包含位置和日期字段。 ![\[以位置和日期字段为例的表单视图。\]](http://docs.aws.amazon.com/zh_cn/connect/latest/adminguide/images/form-view-sq.png) **Sections** + **表单视图**中输入字段和显示字段所在的位置。 + **SectionProps** + **Heading** + 节的标题 + **Type** + 节的类型 + FormSection （处理用户输入的表单）或 DataSection （显示标签和值的列表） + **Items** + 基于类型的数据列表。如果 `Type` 为 `DataSection`，则数据应该是属性。如果 `Type` 为 `FormSection`，则数据应该是表单组件。 + **isEditable** + 当节类型为 `DataSection` 时，在标题处显示编辑按钮。 + 布尔值 **Wizard（可选）** + 显示**ProgressTracker**在视图的左侧。 + 每个项目可能都包含标题、描述和可选。 + 标题为必填项 **Back（可选）** + 是一个带有标签的对象或字符串，它将控制链接文本中显示的内容。 **Next（可选）** + 当步骤不是最后一步时，将使用此操作。 + 是对象 (FormActionProps) 或字符串。有关更多信息，请参阅 [FormActionProps](https://d3irlmavjxd3d8.cloudfront.net/?path=/docs/aws-managed-views-common-configuration--page#actionProps)。 **Cancel（可选）** + 当步骤不是第一步时，将使用此操作。 + 是对象 (FormActionProps) 或字符串。有关更多信息，请参阅 [FormActionProps](https://d3irlmavjxd3d8.cloudfront.net/?path=/docs/aws-managed-views-common-configuration--page#actionProps)。 **Previous（可选）** + 当步骤不是第一步时，将使用此操作。 + 是对象 (FormActionProps) 或字符串。有关更多信息，请参阅 [FormActionProps](https://d3irlmavjxd3d8.cloudfront.net/?path=/docs/aws-managed-views-common-configuration--page#actionProps)。 **Edit（可选）** + 当节类型为 `DataSection` 时，会显示此操作。 + 是对象 (FormActionProps) 或字符串。有关更多信息，请参阅 [FormActionProps](https://d3irlmavjxd3d8.cloudfront.net/?path=/docs/aws-managed-views-common-configuration--page#actionProps)。 **AttributeBar （可选）** + 可选，如果提供，将在视图的顶部显示属性栏。 + 是具有必需属性、**标签**、**值**和可选属性**LinkType**ResourceId****、**可复制**和 Ur **l** 的对象列表。有关更多信息，请参阅[属性](https://d3irlmavjxd3d8.cloudfront.net/?path=/docs/aws-managed-views-common-configuration--page#attribute)。 + **LinkType**可以是外部的，也可以连接诸如案例之类的应用程序。 + 当它位于*外部* 时，用户可以导航到配置有 **Url** 的新浏览器页面。 + *在这种情况下*，用户可以在座席工作区中导航到新的案例详细信息，该工作区配置为 ResourceId。 + **Copyable** 允许用户 ResourceId 通过在输入设备上进行选择来复制。 **Heading（可选）** + 显示为页面标题的字符串。 **SubHeading （可选）** + 该页面的次要消息。 **ErrorText （可选）** + 可选，显示服务器端错误消息。 + ErrorProps; 字符串 **输入数据示例** ``` { "AttributeBar": [{ "Label": "Queue", "Value": "Sales" }, { "Label": "Case ID", "Value": "1234567" }, { "Label": "Case", "Value": "New reservation" }, { "Label": "Attribute 3", "Value": "Attribute" } ], "Back": { "Label": "Back Home" }, "Next": { "Label": "Confirm Reservation", "Details": { "endpoint": "awesomecustomer.com/submit", } }, "Cancel": { "Label": "Cancel" }, "Heading": "Modify Reservation", "SubHeading": "Cadillac XT5", "ErrorText": { "Header": "Modify reservation failed", "Content": "Internal Server Error, please try again" }, "Sections": [{ "_id": "pickup", "Type": "FormSection", "Heading": "Pickup Details", "Items": [{ "LayoutConfiguration": { "Grid": [{ "colspan": { "default": "12", "xs": "6" } }] }, "Items": [{ "Type": "FormInput", "Fluid": true, "InputType": "text", "Label": "Location", "Name": "pickup-location", "DefaultValue": "Seattle" }] }, { "LayoutConfiguration": { "Grid": [{ "colspan": { "default": "6", "xs": "4" } }, { "colspan": { "default": "6", "xs": "4" } }] }, "Items": [{ "Label": "Day", "Type": "DatePicker", "Fluid": true, "DefaultValue": "2022-10-10", "Name": "pickup-day" }, { "Label": "Time", "Type": "TimeInput", "Fluid": true, "DefaultValue": "13:00", "Name": "pickup-time" }] }] }, { "_id": "dropoff", "Heading": "Drop off details", "Type": "FormSection", "Items": [{ "LayoutConfiguration": { "Grid": [{ "colspan": { "default": "12", "xs": "6" } }] }, "Items": [{ "Label": "Location", "Type": "FormInput", "Fluid": true, "DefaultValue": "Lynnwood", "Name": "dropoff-location" }] }, { "LayoutConfiguration": { "Grid": [{ "colspan": { "default": "6", "xs": "4" } }, { "colspan": { "default": "6", "xs": "4" } }] }, "Items": [{ "Label": "Day", "Type": "DatePicker", "Fluid": true, "DefaultValue": "2022-10-15", "Name": "dropoff-day" }, { "Label": "Time", "Type": "TimeInput", "Fluid": true, "DefaultValue": "01:00", "Name": "dropoff-time" }] }] }] } ``` **输出数据示例** ``` { Action: "Submit", ViewResultData: { FormData: { "dropoff-day": "2022-10-15", "dropoff-location": "Lynnwood", "dropoff-time": "01:00", "pickup-day": "2022-10-10", "pickup-location": "Seattle", "pickup-time": "13:00" }, StepName:"Pickup and drop off" } } ``` ------ #### [ Confirmation view ] **确认视图**是一个在提交表单或操作完成后向用户显示的页面。在此预先构建的模板中，您可以提供所发生事件的摘要、任何后续步骤和提示。**确认视图**支持永久属性栏、图标/图像、标题和副标题以及返回主页导航按钮。 **确认视图**的交互式[文档](https://d3irlmavjxd3d8.cloudfront.net/?path=/docs/aws-managed-views-confirmation--with-all) 下图显示了确认视图的示例。 ![\[确认视图、复选标记和用于确认租车的文本。\]](http://docs.aws.amazon.com/zh_cn/connect/latest/adminguide/images/confirmation-view-check-sq.png) **Next** + 必需。 + 下一步的操作按钮 + Label - 导航按钮的字符串标签。 **AttributeBar （可选）** + 可选，如果提供，将在视图的顶部显示属性栏。 + 是具有必需属性、**标签**、**值**和可选属性**LinkType**ResourceId****、**可复制**和 Ur **l** 的对象列表。有关更多信息，请参阅[属性](https://d3irlmavjxd3d8.cloudfront.net/?path=/docs/aws-managed-views-common-configuration--page#attribute)。 + **LinkType**可以是外部的，也可以连接诸如案例之类的应用程序。 + 当它位于*外部* 时，用户可以导航到配置有 **Url** 的新浏览器页面。 + *在这种情况下*，用户可以在座席工作区中导航到新的案例详细信息，该工作区配置为 ResourceId。 + **Copyable** 允许用户 ResourceId 通过在输入设备上进行选择来复制。 **Heading（可选）** + 显示为页面标题的字符串。 **SubHeading （可选）** + 该页面的次要消息。 **Graphic（可选）** + 显示图像 + 使用以下键的对象： + Include - 布尔值，如果为 true，则图形将包含在页面中。 **输入数据示例** ``` { "AttributeBar": [ { "Label": "Attribute1", "Value": "Value1" }, { "Label": "Attribute2", "Value": "Value2" }, { "Label": "Attribute3", "Value": "Amazon", "LinkType": "external", "Url": "https://www.amzon.com" } ], "Next": { "Label": "Go Home" }, "Graphic": { "Include": true }, "Heading": "I have updated your car rental reservation for pickup on July 22.", "SubHeading": "You will be receiving a confirmation shortly. Is there anything else I can help with today?", } ``` **输出数据示例** ``` { "Action": "Next", "ViewResultData": { "Label": "Go Home" } } ``` ------ #### [ Cards view ] **卡片视图**允许您在座席接受联系后立即向他们提供主题列表以供他们选择，从而为他们提供指导。 **卡片视图**的交互式[文档](https://d3irlmavjxd3d8.cloudfront.net/?path=/docs/aws-managed-views-cards--with-all) *向座席人显示卡片。*下图显示了向座席展示的六张卡片的示例：一张用于进行新的预订，另一张用于查看即将到来的旅行的预订情况。 ![\[一组六张卡片。\]](http://docs.aws.amazon.com/zh_cn/connect/latest/adminguide/images/solve-view-sq.png) *当座席选择卡片时，会显示更多信息。*下图显示了一张打开的卡片，其中显示预订的详细信息。 ![\[一张显示预订详情的打开的卡片。\]](http://docs.aws.amazon.com/zh_cn/connect/latest/adminguide/images/card-view-sq.png) **Sections** + 它是包含摘要和详细信息的对象列表。必须提供它才能创建卡片和详细信息。 + 由摘要和详细信息组成。有关更多信息，请参阅[和](https://d3irlmavjxd3d8.cloudfront.net/?path=/docs/aws-managed-views-cards--with-all)。 **AttributeBar （可选）** + 可选，如果提供，将在视图的顶部显示属性栏。 + 是具有必需属性、**标签**、**值**和可选属性**LinkType**ResourceId****、**可复制**和 Ur **l** 的对象列表。有关更多信息，请参阅 [ 属性](https://d3irlmavjxd3d8.cloudfront.net/?path=/docs/aws-managed-views-common-configuration--page#attribute)。 + **LinkType**可以是外部的，也可以连接诸如案例之类的应用程序。 + 当它位于*外部* 时，用户可以导航到配置有 **Url** 的新浏览器页面。 + *在这种情况下*，用户可以在座席工作区中导航到新的案例详细信息，该工作区配置为 ResourceId。 + **Copyable** 允许用户 ResourceId 通过在输入设备上进行选择来复制。 **Heading（可选）** + 显示为页面标题的字符串 **Back（可选）** + 它是一个带有标签的对象或字符串，将控制链接文本中显示的内容。有关更多信息，请参阅 [ActionProps](https://d3irlmavjxd3d8.cloudfront.net/?path=/docs/aws-managed-views-common-configuration--page#actionProps)。 **NoMatchFound （可选）** + 它是一个字符串，用于显示卡片下方的按钮。有关更多信息，请参阅 [ActionProps](https://d3irlmavjxd3d8.cloudfront.net/?path=/docs/aws-managed-views-common-configuration--page#actionProps)。 **输入数据示例** ``` { "AttributeBar": [{ "Label": "Queue", "Value": "Sales" }, { "Label": "Case ID", "Value": "1234567" }, { "Label": "Case", "Value": "New reservation" }, { "Label": "Attribute 3", "Value": "Attribute" } ], "Back": { "Label": "Back" }, "Heading": "Customer may be contacting about...", "Cards": [{ "Summary": { "Id": "lost_luggage", "Icon": "plus", "Heading": "Lost luggage claim" }, "Detail": { "Heading": "Lost luggage claim", "Description": "Use this flow for customers that have lost their luggage and need to fill a claim in order to get reimbursement. This workflow usually takes 5-8 minutes", "Sections": { "TemplateString": "Steps:
  1. Customer provides incident information
  2. Customer provides receipts and agrees with amount
  3. Customer receives reimbursement
" }, "Actions": [ "Start a new claim", "Something else" ] } }, { "Summary": { "Id": "car_rental", "Icon": "Car Side View", "Heading": "Car rental - New York", "Status": "Upcoming Sept 17, 2022" }, "Detail": { "Heading": "Car rental - New York", "Sections": { "TemplateString": "

There is no additional information

" } } }, { "Summary": { "Id": "trip_reservation", "Icon": "Suitcase", "Heading": "Trip to Mexico", "Status": "Upcoming Aug 15, 2022", "Description": "Flying from New York to Cancun, Mexico" }, "Detail": { "Heading": "Trip to Mexico", "Sections": { "TemplateString": "

There is no additional information

" } } }, { "Summary": { "Id": "fligh_reservation", "Icon": "Airplane", "Heading": "Flight to France", "Status": "Upcoming Dec 5, 2022", "Description": "Flying from Miami to Paris, France" }, "Detail": { "Heading": "Flight to France", "Sections": { "TemplateString": "

There is no additional information

" } } }, { "Summary": { "Id": "flight_refund", "Icon": "Wallet Closed", "Heading": "Refund flight to Atlanta", "Status": "Refunded July 10, 2022" }, "Detail": { "Heading": "Refund trip to Atlanta", "Sections": { "TemplateString": "

There is no additional information

" } } }, { "Summary": { "Id": "book_experience", "Icon": "Hot Air Balloon", "Heading": "Book an experience", "Description": "Top experience for european travellers" }, "Detail": { "Heading": "Book an experience", "Sections": { "TemplateString": "

There is no additional information

" } } }], "NoMatchFound": { "Label": "Can't find match?" } } ``` **输出数据示例** ``` { Action: "ActionSelected", ViewResultData: { actionName: "Update the trip" } } ``` ------ # 使用 HTML 和 JSX 自定义 Amazon Connect 座席工作区的视图 HTML 和 JSX 支持 您可以自定义视图资源布局的外观。当您将输入参数传递给[显示视图](show-view-block.md)数据块时，您可以利用 HTML 或 JSX 来实现此目的。 完成以下步骤，来了解一个如何通过[显示视图](show-view-block.md)数据块利用 HTML 或 JSX 的简单示例。 1. 使用[显示视图](show-view-block.md)数据块创建流。 1. 打开[显示视图](show-view-block.md)数据块的“属性”页面。 1. 在**视图**下，从下拉列表中选择**详细信息**。 1. 在**分区**部分中，选择**设置 JSON**。 1. 复制并粘贴以下 JSON 代码。此代码显示了如何处理 HTML 或 JSX 表达式。 **HTML 示例** ``` { "TemplateString": "Steps:
  1. Customer provides incident information
  2. Customer provides receipts and agrees with amount
  3. Customer receives reimbursement
" } ``` **JSX 示例** ``` { "TemplateString": "Please provide an introduction to the customers. Ask them how their day is going Things to say: Hello, how are you today? My name is Bob, who am I speaking to?" } ``` # 使用 Amazon Connect 中的用户界面生成器获取 step-by-step指南中的资源 用户界面生成器 您可以使用 Amazon Connect 中的用户界面生成器创建 step-by-step指南中使用的视图资源。使用用户界面生成器，您可以： + 将用户界面组件拖放到画布上。 + 安排布局。 + 编辑每个组件的属性和样式。 下图显示了 UI 生成器页面的示例。 ![\[UI 生成器用户界面。\]](http://docs.aws.amazon.com/zh_cn/connect/latest/adminguide/images/no-code-ui-builder-updates.png) 1. **创建**面板，在此面板中，您可以从用户界面组件库中进行选择，也可以使用其中一个可用模板。 1. 组件分组在可折叠的容器中。将这些组件拖放到视图资源的画布上。 1. 视图资源的画布。 1. **自定义**面板和全局设置图标。您可以在此处设置页面的全局属性，例如列、对齐方式和颜色。也可以在此处为画布上的各个组件设置属性。 下图显示了**地址**组件的**属性**选项卡的示例。当您选择动态图标（闪电）时，该字段将在运行时填充。 ![\[“自定义”面板、“属性”选项卡、动态图标。\]](http://docs.aws.amazon.com/zh_cn/connect/latest/adminguide/images/no-code-ui-builder-properties.png) ## 访问用户界面生成器 1. 登录 Amazon Connect 管理员网站 https://*instance name*.my.connect.aws/。使用管理员账户或在其安全配置文件中具有**渠道和流 - 视图**权限的账户。 1. 在 Amazon Connect 管理员网站中，选择**用户界面管理**。 1. 选择 “**创建视图”**。在 “**创建视图**” 对话框中，为视图指定名称并选择 “**用途” 类型**。视图有两个目的： + **指南视图**：用于构建单步或多步工作流程，这些工作流程可以显示给客服、最终客户或经理，以便在统一的界面中访问特定于联系人的数据或第三方数据。 + **工作区视图：这些视图**用于构建 Workspace 页面（例如主页），提供独立于联系人处理的通用界面组件和功能。 1. 界面生成器页面随即出现。快速开始使用模板或从头开始构建视图。 1. 选择 **新建**。将出现一个空的 UI 生成器页面，如下图所示。 ![\[一个空的 UI 生成器页面。\]](http://docs.aws.amazon.com/zh_cn/connect/latest/adminguide/images/no-code-ui-builder-blank-page.png) # Amazon Connect 中用户界面生成器的用户界面组件库 UI 组件库 [Amazon Connect 用户界面组件文档中描述了所有界面](https://d3irlmavjxd3d8.cloudfront.net/?path=/docs/overview--page)生成器组件。本文档向您展示了可以在界面生成器中使用的各个 UI 组件，以及如何配置它们。 您可以在 UI 生成器的 “**创建**” 面板的 “**库**” 选项卡中访问库组件。下图显示了**库**选项卡和**容器**组件的示例。 ![\[UI 生成器 “创建” 面板、“库” 选项卡、UI 组件。\]](http://docs.aws.amazon.com/zh_cn/connect/latest/adminguide/images/user-interface-component-library-example.png) ## 使用容器移动和整理组件 容器是生成视图的核心构建块。您可以将用户界面组件（包括其它容器）移动到一个容器中，以便在页面上以逻辑和直观的方式将它们分组在一起。 要在自定义顶层视图设置时保持页面内容相对一致，建议您在所有视图中使用容器。容器还带有列布局。列布局支持您整理容器内的内容。 ## 创建表单 创建表单 要创建表单供座席或客户填写和提交，您可以使用[表单](https://d3irlmavjxd3d8.cloudfront.net/?path=/story/aws-managed-views-form--with-all)组件。您可以： + 将**表单**组件从用户界面库拖放到画布上。 + 或者，从**模板**选项卡中，选择**表单示例**模板。它使用表单组件。 [表单](https://d3irlmavjxd3d8.cloudfront.net/?path=/story/aws-managed-views-form--with-all)组件是一种特殊类型的容器，您可以在其中插入输入字段并添加**提交**按钮。当与指南交互的用户按下**提交**按钮时，Amazon Connect 将输入到表单字段中的所有值传递给流。在流程中，您可以使用该[AWS Lambda 函数](invoke-lambda-function-block.md)模块将自己的业务逻辑和 send/retrieve 数据自定义到第三方系统。 下图显示了一个带有占位符标签和“提交”按钮的示例**表单**组件。 ![\[带有占位符标签和“提交”按钮的表单组件。\]](http://docs.aws.amazon.com/zh_cn/connect/latest/adminguide/images/user-interface-component-library-form-section-example.png) # 在视图中配置列布局、颜色和数据定义 配置列布局、颜色和数据定义 本主题介绍如何在 Amazon Connect UI 生成器中配置列布局、颜色和动态数据字段，以便为联络中心客服自定义视图。 在 UI 生成器中，“**自定义**” 面板位于右侧，如下图所示。 ![\[用户界面生成器中 “自定义” 面板的示例，即全局设置图标。\]](http://docs.aws.amazon.com/zh_cn/connect/latest/adminguide/images/no-code-ui-builder-customize-panel-example.png) 您可以使用**自定义**面板来配置： + 整个视图资源的全局设置。 + 组件级别的本地设置。每个组件具有自己的一组属性。 您可以使用**自定义**面板为视图设置一系列设置，包括： + 列布局 + 颜色 + 动态数据映射 + 示例数据 + 静态数据定义 ## 为视图配置全局布局和颜色 要配置全局设置，请导航到**自定义**面板，然后选择全局设置图标，如下图中所示。 ![\[“自定义”面板，全局设置图标。\]](http://docs.aws.amazon.com/zh_cn/connect/latest/adminguide/images/no-code-ui-builder-properties-global-settings-example.png) 您可以使用全局设置来设置视图的整体布局和颜色： + 使用**对齐**部分可指定各组件相对于视图左侧、中心或右侧的位置。 + 选择三个颜色字段： + 主要颜色 + 辅助颜色 + 中性色 默认情况下，视图中的每个组件都应用这些设置。但是，在自定义组件时，您可以覆盖这些全局颜色设置。 ## 列布局 视图资源使用包含 12 列的 flexbox 模式。组件彼此占据相对位置。它们并非以像素完美的方式放置在画布上。这使视图能够响应性地纵向扩展和缩减大小，而不会丢失视图的构成。 在全局设置中，您可以决定如何对列进行分组。例如，在**列**部分，您可以将视图分为两部分，每部分六列，如下图所示。 ![\[“列”部分，分为两个部分，每部分六列。\]](http://docs.aws.amazon.com/zh_cn/connect/latest/adminguide/images/no-code-ui-builder-properties-layout-columns-example-1.png) 下图显示了此布局对座席来说会是什么样子的示例。 ![\[一个视图，分为两个部分，每部分六列，就像向座席显示的那样。\]](http://docs.aws.amazon.com/zh_cn/connect/latest/adminguide/images/no-code-ui-builder-properties-layout-columns-details-example-1.png) 还可以使用**自定义**滑块来更改这些分组的比例。例如，您可以对它进行设置，使视图的左侧为四列，右侧为八列，如下图中所示： ![\[一种布局，一侧有四列，另一侧有八列。\]](http://docs.aws.amazon.com/zh_cn/connect/latest/adminguide/images/no-code-ui-builder-properties-layout-columns-example-2.png) 下图显示了此布局向用户显示的方式的示例。 ![\[一侧为四列，另一侧为四列，就像向座席显示的那样。\]](http://docs.aws.amazon.com/zh_cn/connect/latest/adminguide/images/no-code-ui-builder-properties-layout-columns-details-example-2.png) # 在 Amazon Connect 的无代码用户界面生成器中配置动态字段 配置动态字段 本主题介绍在使用 Amazon Connect 中的无代码生成器用户界面构建座席和客户界面时，如何配置组件中的动态字段以显示运行时数据而不是硬编码值。 在某些情况下，您可能希望向座席或客户显示的数据是动态填充的，而不是硬编码的。例如，如果要制作屏幕弹出窗口，您可能想要显示客户的姓名和配置文件 ID。您需要数据是动态的，因为这些字段的值会随着联系人的不同而变化。 要动态填充组件字段： 1. 打开该组件的属性选项卡。 1. 选择显示在您希望成为动态的字段旁边的动态图标（闪电图标）。 需要动态值的最常见字段有： + 显示字段的**值**字段。 + 表单输入中的**DefaultValue**字段。 从技术上讲，可以在运行时动态确定任何对座席可见和隐藏的字段。这就是为什么**属性**选项卡中的每个字段都可以设置为动态（闪电图标）的原因。 例如，查看下图中的**AttributesBar**组件。 ![\[“属性栏”组件，其“值”设置为动态的。\]](http://docs.aws.amazon.com/zh_cn/connect/latest/adminguide/images/no-code-ui-builder-attributebar-example.png) + 属性 1 的标签静态定义为**客户名称**。 + 该属性的**值**设置为动态的（选择了闪电图标）。 使用这些设置时，的值**AttributesBar**由运行时传入[显示视图](show-view-block.md)区块的数据决定。 当字段设置为动态时，其静态值将替换为动态引用。字段下方将显示**示例数据**部分。您可以使用此部分来定义[示例数据](no-code-ui-builder-sample-data.md)。 动态引用反映了在设置运行时数据时[显示视图](show-view-block.md)数据块所期望的数据结构。例如，考虑[AttributesBar](https://d3irlmavjxd3d8.cloudfront.net/?path=/docs/ui-component-attributebar--with-attributes)组件中属性 1 的**值**，如下图所示。 ![\[动态 AttributesBar 组件中属性 1 的值。\]](http://docs.aws.amazon.com/zh_cn/connect/latest/adminguide/images/no-code-ui-builder-dynamicicon.png) + 当设置为动态时，该字段变为 `$.AttributeBar_1.Attributes[0].Value`，其中 `AttributeBar_1` 是组件的 ID。 + 这表示在[显示视图](show-view-block.md)数据块中，`AttributeBar_1` 字段应该接收一个对象。 + 该对象包含一个 `Attributes` 数组，其中第一个项目 (`[0]`) 预期是带有 `Value` 字段的对象。 您可以编辑动态引用以获得清晰性或可重用性。动态引用可以在视图中的多个字段和组件之间共享。例如，在[AttributeBar](https://d3irlmavjxd3d8.cloudfront.net/?path=/docs/ui-component-attributebar--with-attributes)组件的下图中，我们将其动态引用更新为`$.myAttributeValue`。[显示视图](show-view-block.md)数据块现在有一个要求字符串输入的 `myAttributeValue` 字段。 ![\[AttributeBar 组件的属性，一个动态的值。\]](http://docs.aws.amazon.com/zh_cn/connect/latest/adminguide/images/no-code-ui-builder-dynamic-example2.png) **重要** 动态引用的类型必须与字段的预期类型相匹配。例如，您不能在布尔值字段中使用基于字符串的动态引用。下图显示了动态引用不匹配时的错误消息示例。 ![\[“自定义”面板，一则错误消息，原因是动态引用与字段中的预期类型不匹配。\]](http://docs.aws.amazon.com/zh_cn/connect/latest/adminguide/images/no-code-ui-builder-properties-dynamic-fields-example-4.png) 还可以选择将组件中某个特性的所有属性都设置为动态的。在下图中，有关此属性的所有内容（包括标签）都是在运行时根据传递到[显示视图](show-view-block.md)数据块的值来确定的。例如，**客户数据**现在是示例数据，您可以使用这些数据来了解座席在使用指南时将看到的内容。但是，座席无法查看此值。 ![\[“自定义”面板，“客户名称”作为示例数据。\]](http://docs.aws.amazon.com/zh_cn/connect/latest/adminguide/images/no-code-ui-builder-properties-dynamic-fields-example-5.png) 对于某些组件，例如 [AttributesBar](https://d3irlmavjxd3d8.cloudfront.net/?path=/docs/ui-component-attributebar--with-attributes)，您也可以将组件的所有属性设置为动态。例如，使用 AttributeBar，您可以设置选择动态图标（闪电）以使所有属性成为动态属性。这些属性由在运行时传递给[显示视图](show-view-block.md)数据块的内容决定。 ![\[的所有属性 AttributeBar 都设置为动态。\]](http://docs.aws.amazon.com/zh_cn/connect/latest/adminguide/images/no-code-ui-builder-properties-dynamic-6.png) # 设置在“显示视图”数据块中显示为流分支的操作 在 step-by-step指南中，用户必须选择一个按钮才能进入指南中的新页面。您可以通过为每个按钮设置操作来在界面生成器中配置这些按钮。例如，您可以配置一个按钮来提交表单。 当用户在运行时选择按钮时，指南会向流发送一条回复消息。**操作**值确定[显示视图](show-view-block.md)数据块的分支路径。 例如，一个视图可以有三个具有不同操作的按钮。这些操作在[显示视图](show-view-block.md)数据块上显示为不同的分支路径。这可让您在指南流中配置适当的分支逻辑。 下图显示了无代码生成器的**自定义**面板中**操作**部分的示例。 ![\[无代码用户界面生成器中“自定义”面板的“操作”部分。\]](http://docs.aws.amazon.com/zh_cn/connect/latest/adminguide/images/no-code-ui-builder-setting-actions-in-flows-example.png) # 保存并发布视图以在 Amazon Connect 的 step-by-step指南中使用 保存并发布要在 step-by-step指南中使用的视图 视图资源支持版本控制。版本控制使您能够审计，甚至重复使用您在指南中创建 and/or 的视图的先前迭代。 step-by-step 1. 为视图输入名称（如果尚未执行此操作）。在为视图分配名称之前，您无法保存该视图。 1. 更改视图后，选择**保存**以更新资源。 1. 当您准备好在 step-by-step指南流程中使用视图时，请选择 “**发布**”。视图现在将出现在[显示视图](show-view-block.md)数据块中，供您在流中使用 只有已发布的视图版本才会显示在[显示视图](show-view-block.md)数据块中，供在流中使用。 # 可快速入门的 UI 生成器模板 UI 生成器模板 界面生成器包含模板，您可以使用这些模板在画布中预先填充组件。要访问模板： 1. 在无代码生成器中，打开**创建**面板。 1. 选择 **Templates** 选项卡。 1. 选择要使用的模板，然后将其拖放到视图画布上。 在模板出现在画布上后，您可以： + 添加更多组件 + 删除组件 + 应用您可以使用从头开始构建的视图资源执行的任何其它类型的配置 如果您已经在画布上放置了用户界面组件，则这些组件会被覆盖，模板将取而代之。这些更改将在您**保存**视图资源后完成。如果您错误地使用了模板，则可以离开页面并返回到上次保存的视图资源版本。 下图显示了**创建**面板中提供的一些模板的示例：屏幕弹出窗口、处置、付款 ![\[“创建”面板中提供了一些模板：屏幕弹出窗口、处置、付款。\]](http://docs.aws.amazon.com/zh_cn/connect/latest/adminguide/images/no-code-ui-builder-templates-example.png) # 在 Amazon Connect 座席工作区使用第三方应用程序的屏幕弹出功能 使用第三方应用程序的屏幕弹出窗口功能 要获得第三方应用程序的屏幕弹出功能，您可以使用 step-by-step指南，也可以使用应用程序固定。有关更多信息，请参阅 [访问 Agent Workspace 中的第三方应用程序](3p-apps-agent-workspace.md)。当联系人进入时，**指南**选项卡会作为座席工作区中的第一个选项卡打开。您可以使用流程[配置 step-by-step指南](how-to-invoke-a-flow-sg.md)。 **注意** 配置视图时： 确保在中注册的应用程序名称与您提供给 Application App Launch 组件的[ and/or 应用程序](https://d3irlmavjxd3d8.cloudfront.net/?path=/story/ui-component-application--with-agent-workspace-example)名称 AWS 管理控制台 完全匹配。 如果遇到错误，但您认为名称匹配，请编辑 AWS 管理控制台 应用程序名称。确保没有前导或尾随空格。 + 使用[应用程序](https://d3irlmavjxd3d8.cloudfront.net/?path=/story/ui-component-application--with-agent-workspace-example)组件，您可以将第三方应用程序嵌入到指南中。联系人进入时，应用程序会显示在第一个选项卡中。 + 使用“应用程序启动”组件，您可以将应用程序配置为在座席工作区中打开一个选项卡。您可以打开自动打开功能，指南将把焦点放在第一个选项卡上，并将应用程序作为另一个选项卡打开。 + 您始终可以使用带有自动打开功能的[链接](https://d3irlmavjxd3d8.cloudfront.net/?path=/story/ui-component-link--default-case)组件，将任何浏览器链接配置为在新的浏览器窗口中打开。 您可以选择提供一个为联系人提供更具体的目的地或参数的路径。当您提供路径时，它将缩短为域。在应用程序域的末尾提供一个正斜杠。 **示例 1（推荐）**： ``` App Domain registered in AWS 管理控制台: https://example.com/ Path: cats/siamese Guides will attempt to render: Domain https://example.com/ + Path cats/siamese https://example.com/cats/siamese Success if website exists! ``` **示例 2：** ``` App Domain registered in AWS 管理控制台: https://example.com/dogs/ Path: cats/siamese Guides will attempt to render: Domain https://example.com/ + Path cats/siamese https://example.com/cats/siamese Fails because only subdomains of https://example.com/dogs/ are allowed ``` **示例 3：** ``` App Domain registered in AWS 管理控制台: https://example.com/cats Path: cats/siamese Guides will attempt to render: Domain https://example.com/ + Path cats/siamese https://example.com/cats/siamese Success if website exists! ``` 下图显示了已拖放到画布上的应用程序启动组件。**自定义**面板显示了用于指定应用程序名称和应用程序路径的示例。 ![\[“自定义”面板、示例应用程序名称和应用程序路径。\]](http://docs.aws.amazon.com/zh_cn/connect/latest/adminguide/images/no-code-ui-builder-app-integration-1.png) 下图显示了已添加到流程并配置到 **DefaultAgentUI** 事件挂钩的示例[Amazon Connect 流数据块：设置事件流](set-event-flow.md)块。 ![\[配置为 DefaultAgent UI 事件挂钩的 Set 事件流块。\]](http://docs.aws.amazon.com/zh_cn/connect/latest/adminguide/images/no-code-ui-builder-app-integration-2.png) # 在 Amazon Connect 中使用示例数据预览视图 使用示例数据预览视图 您可以使用示例数据来查看视图对用户显示的样子。您甚至可以查看在运行时动态确定的数据字段。当字段设置为动态（选择了闪电）时，可以在该属性的**示例数据**部分下的输入字段中输入示例数据。此示例数据仅供查看。它仅显示在 Amazon Connect 用户界面生成器中。 例如，下图显示了一个**邮寄地址表单**的示例。 ![\[“自定义” 面板的 “数据示例” DefaultValue 和 “样本数据” 部分。\]](http://docs.aws.amazon.com/zh_cn/connect/latest/adminguide/images/no-code-ui-builder-sample-data-example.png) + **街道地址**是一个动态默认值。它在运行时由在客户配置文件中找到的地址填充。 + 要查看最终用户界面对座席的显示方式，您可以输入文本默认值。 + 值 `7 W 34th St` 仅供在 Amazon Connect 管理员网站中显示。它不会向座席显示。 # 使用视图为工作区设置主题 主题化工作区 在工作区或代理工作区中使用带有自定义主题的视图时，用户界面组件可以继承工作区主题或使用自定义样式。请记住一些原则： + 设置工作区主题后，当用户不进行自定义编辑时，视图的全局主色、次要颜色、默认颜色和组件将默认继承工作空间级别的样式。 + 当视图具有用户界面生成器中定义的主要颜色、次要颜色和默认颜色等自定义全局样式时，自定义样式将优先于工作区主题。 + 当组件在 UI 生成器中定义了自定义样式时，组件样式将优先于工作区主题。 + 在不同的工作空间中保留自定义组件颜色。 # UIs 使用视图生成条件 视观看 UIs 次数而定 Views 的用户界面条件功能使客户能够根据用户与同一 View 中其他组件的交互来更改视图中组件的属性。例如，当用户更新组件 A 中的输入值（例如下拉列表）时，组件 B（例如容器）将隐藏在视图中。条件使您能够根据任务或互动的给定需求，为您的代理、最终客户或主管创建量身定制的体验。 要创建界面条件，请访问界面生成器并将支持的组件拖到画布上。访问屏幕右侧组件的设置面板，然后单击 “用户界面条件” 选项卡。“用户界面条件” 选项卡的组织旨在收集以下输入： 1. 更改类型：要根据条件更新的所选组件的属性 + 可见性：使组件可见或隐藏 + DefaultValue: 更新组件的默认值 + 必需：更新组件的必需属性 + 禁用：禁用或启用组件 + 选项：更新可供用户从组件中选择的选项 1. 选择触发组件：将触发应用条件的组件 1. 在以下情况下应用条件：根据触发器组件的值对操作进行评估 1. 当值匹配时应用：为触发条件而进行评估的触发器组件的值 1. 应用结果：满足触发器组件的评估后，对所选组件进行所需的更改 在组件上设置条件后，将在界面生成器中用虚线勾勒出该组件的轮廓。您可以通过单击组件设置面板中条件选项卡中的垃圾桶图标来删除条件。 # 在 Amazon Connect 的联系开始时调用指南 在联系开始时调用指南 创建流后，您可以动态确定要向用户显示哪些指南。要实现此目的，应按照以下步骤进行： 1. 将[Amazon Connect 流数据块：设置事件流](set-event-flow.md)数据块添加到流中。 1. 在**设置事件流**块中，配置**DefaultFlowForAgent用户界**面事件挂钩 向座席提供联系信息后，座席就会开始工作。他们不会等待联系被接受。 例如，通过检查 IVR 响应、队列名称和客户信息，您可以在流中创建分支逻辑，以确定要设置哪个流 ID。使用**检查属性**数据块设置条件逻辑，使用**设置事件流**数据块设置要发送给座席的流。 下图显示了**设置事件流**数据块的**属性**页面。事件钩子设置为**座席用户界面的默认流**。 ![\[“设置事件流”数据块，“座席用户界面的默认流”事件钩子。\]](http://docs.aws.amazon.com/zh_cn/connect/latest/adminguide/images/example-flow-id-sq.png) # 在 Amazon Connect 聊天中部署 step-by-step指南 在聊天中部署 step-by-step指南 您可以在 Amazon Connect 聊天中启用 “ step-by-step指南”，以创建交互式的自助服务体验。此功能通过收集背景信息并将其传输给座席，帮助您更快地解决客户问题。您可以向客户提供您与为座席编写的相同指南，以实现更好的配置管理。 ## 在 Amazon Connect 聊天中启用 step-by-step指南 1. 确保您已启用并配置代理[step-by-step 指南](step-by-step-guided-experiences.md)。配置完指南后，请确认当联系人留给座席接听时，指南是否会弹出。 1. 采用与为座席配置视图相同的方法，在聊天流中使用 Show View Block 设置流以调用视图。以下示例将在客户选择聊天气泡时触发指南。在将聊天转移给座席之前，流会经过两个视图。 ![\[使用 Show View Block 将您的流设置为在聊天流中调用视图。\]](http://docs.aws.amazon.com/zh_cn/connect/latest/adminguide/images/step-by-step-guides-chat-enable-1.png) 1. 从管理员页面创建托管聊天小部件。将聊天流设置为您创建的流。 ![\[从管理员页面创建托管聊天小部件。将聊天流设置为您创建的流。\]](http://docs.aws.amazon.com/zh_cn/connect/latest/adminguide/images/step-by-step-guides-chat-enable-2.png) 此托管聊天会生成类似下面的脚本： ``` ``` 最后一行包含一个允许的信息数组。您可以在其中添加互动消息，以便在聊天中使用指南。例如： ``` amazon_connect('supportedMessagingContentTypes', ['text/plain', 'application/vnd.amazonaws.connect.message.interactive', 'application/vnd.amazonaws.connect.message.interactive.response']); ``` 1. 将以下内容添加到您的允许列表中 URLs ，以允许向 step-by-step导在聊天中工作： + `your-website-url/views/renderer/` 如果您在网站上使用 CSP 聊天窗口小部件，您应该已经有了 cloudfront 网址。例如： + `https://unique-id.cloudfront.net/amazon-connect-chat-interface.js` **注意** 您还可以在聊天中使用“指南”和自定义的通信小部件。有关向自定义通信小部件添加 step-by-step指南的更多信息，请参阅 Github 上的 [Amazon Connect 聊天界面](https://github.com/amazon-connect/amazon-connect-chat-interface)。 # 在 Amazon Connect 中开始联系时在座席工作区中显示联系上下文 在 Agent Workspace 中显示联系人属性 在为座席工作区设计 step-by-step指南时，可以将其设置为在联系人开始时显示联系人属性。这为座席提供了在联系开始时所需的上下文，这样座席就可以直接着手解决问题。该功能有时也称为屏幕弹出窗口。 要在联系开始时显示联系人属性，请配置**详细信息视图**，这是一个 [AWS 托管式视图](view-resources-managed-view.md)。 **详细信息视图**用于向座席显示信息，并为其提供他们可以采取的操作的列表。**详细信息视图**的一个常见使用案例是在开始通话时向座席显示屏幕弹出窗口。 + 此视图中的操作可用于让代理继续执行 step-by-step指南中的下一步。这些操作还可用于调用全新的工作流程。 + **Sections** 是唯一必需的组件。在这里，您可以配置要向座席显示的页面正文。 + 此视图支持诸如之**AttributeBar**类的可选组件。 **提示** 有关显示**详细信息视图**预览的交互式文档，请参阅[详细信息](https://d3irlmavjxd3d8.cloudfront.net/?path=/docs/aws-managed-views-detail--with-all)。 下图显示了一个**详细信息视图**示例。它包含页面标题、描述和四个示例。 ![\[详细信息视图，包括页面标题、描述和四个带属性的示例。\]](http://docs.aws.amazon.com/zh_cn/connect/latest/adminguide/images/details-view-page-heading-sq.png) **Sections** + 内容可以是静态字符串、 TemplateString 或键值对。它可以是单个数据点或列表。有关更多信息，请参阅 [TemplateString](https://d3irlmavjxd3d8.cloudfront.net/?path=/docs/aws-managed-views-common-configuration--page#templatestring)或 [AtrributeSection](https://d3irlmavjxd3d8.cloudfront.net/?path=/docs/aws-managed-views-common-configuration--page#attribute-section)。 **AttributeBar （可选）** + 可选，如果提供，它将在视图的顶部显示属性栏。 + 包含必需属性、**标签**、**值**和可选属性**LinkType**ResourceId****、**可复制**和 Ur **l** 的对象列表。有关更多信息，请参阅[属性](https://d3irlmavjxd3d8.cloudfront.net/?path=/docs/aws-managed-views-common-configuration--page#attribute)。 + **LinkType**可以是外部应用程序，也可以是 Amazon Connect 应用程序，例如 Amazon Connect 手机壳。 + 当它为*外部*时，座席可以导航到配置了 **Url** 的新浏览器页面。 + *在这种情况下*，代理可以在配置为的代理工作区上导航到新的案例详细信息 ResourceId。 + **Copyable** 允许代理 ResourceId 通过使用您的输入设备进行选择来复制。 **Back（可选）** + 可选，但如果不包括任何操作，则为必填项。如果提供，将显示返回导航链接。 + 是一个带有*标签*的对象，它将控制链接文本中显示的内容。 **Heading（可选）** + 可选，如果提供，将显示文本作为标题。 **Description（可选）** + 可选，如果提供，将在标题下显示描述文本。 **Actions（可选）** + 可选。如果提供，将在页面下显示操作列表。 **输入示例** ``` { "AttributeBar": [ {"Label": "Example", "Value": "Attribute"}, { "Label": "Example 2", "Value": "Attribute 3", "LinkType": "case", "ResourceId": "123456", "Copyable": true } ], "Back": { "Label": "Back" }, "Heading": "Hello world", "Description": "This view is showing off the wonders of a detail page", "Sections": [{ "TemplateString": "This is an intro paragraph" }, "abc"], "Actions": ["Do thing!", "Update thing 2!"], } ``` **输出示例** ``` { Action: "ActionSelected", ViewResultData: { actionName: "Action 2" } } ``` # 允许 Amazon Connect 联络中心座席在联系结束时输入处置代码 使座席能够输入处置代码 step-by-step指南的一个简单用例是让代理在联系结束时输入处置代码。为了让您的座席能够在联系结束时设置处置代码或完成其他通话后工作，请创建具有一个[显示视图](show-view-block.md)数据块和一个[设置联系属性](set-contact-attributes.md)数据块的流。 + 使用该[显示视图](show-view-block.md)数据块可创建**表单**视图，为座席提供所需的输入字段。 + 使用[设置联系属性](set-contact-attributes.md)数据块可将响应保存为联系人属性。 此外，还可以使用[AWS Lambda 函数](invoke-lambda-function-block.md)数据块将输入的数据发送到外部系统。 创建完流程后，您可以通过将**DisconnectFlowForAgent用户界**面设置为联系人流中的自定义属性，动态确定在联系结束时显示哪个流程。只要在联系结束之前设置了此属性，座席用户界面就会在联系结束后显示此表单。 下图显示了[设置联系属性](set-contact-attributes.md)的属性页面。它配置为将响应保存在用户定义的属性中。 ![\[“设置联系属性”数据块的属性页面。\]](http://docs.aws.amazon.com/zh_cn/connect/latest/adminguide/images/dispo-codes-sq.png) # 使用 Amazon Connect Contact Lens 防止 PII 出现在联系记录转录中 PII 编辑 默认情况下，通过指南传递的任何信息都包含在联系人记录转录中。为防止 PII 出现在您的联系人记录笔[录中，请使用 step-by-step指南流程中的 “设置记录和分析行为” 块](set-recording-behavior.md)Contact Lens，[启用](sensitive-data-redaction.md)和启用敏感日期的编辑。 有关如何启用 PII 编辑的完整详细信息，请参阅[启用对敏感数据的加密](enable-analytics.md#enable-redaction)。 # 将视图与 Connect 资源集成 查看集成 您可以创建在指南中使用的视图，这些视图通过视图集成在指定的时间间隔内轮询实时数据源。视图集成是 UI 生成器的全局设置面板中提供的视图级配置，如下所示。 视图集成面板允许您在视图上配置和引用数据。首先配置一个要与之集成的新工具。工具是视图和 Connect 资源之间的特定集成点。配置工具需要以下属性： 1. 集成名称：集成的自定义名称，稍后将用于引用视图本身的数据 1. 集成类型：视图和 Connect 资源之间集成的格式 1. 工具：View 将与之集成的集成源，例如 Flow 模块 1. 版本或别名：视图为获取新信息而调用的流程模块 version/alias 1. 启用刷新（秒）：一个布尔值，用于在指南中视图运行时调用集成 1. 刷新间隔：视图调用集成以获取信息的时间间隔 + 在单选项卡环境中对实时数据源进行轮询效果最好。如果使用 Guide 应用程序打开了多个选项卡，则每个视图都将轮询数据源，这可能会导致限制和某些视图过时 1. 工具输入对象：一个 JSON 对象，表示从视图发送到源（例如 Flow 模块）的数据，用于获取最新的相关信息以更新视图 配置集成后，您将能够使用该视图来引用集成的输出。界面生成器中显示的引用基于特定集成提供的输出数据。 要利用集成中的参考数据，您必须首先了解如何引用来自界面组件及其属性的数据。与在 Flows 和 Views 中引用联系人属性的方式类似`($.Attributes.MyCustomAttribute)`，您可以使用以下语法引用集成的输出数据：`$.#[IntegrationName].[ReferenceObject]`。请记住，您有责任确保所使用的参考对象以视图的组件属性所接受的正确格式返回。要了解集成输出参考，请访问模块配置页面。 在运行时，当加载具有集成的视图时，它将按照视图架构中的定义填充集成中的数据。此外，如果您设置刷新间隔，视图将在每个间隔调用集成；如果有新数据，视图将提示用户使用最新信息刷新视图。 # 在工作区中使用面向经理的分步指南 经理在工作区中使用指南 您可以在基于角色的工作区中使用指南来运行几乎任何 Connect 用户都可以遵循的结构化工作流程。在继续操作之前，请确保您已先创建基于角色的工作区。 进入界面生成器后，找到 “Connect 应用程序” 组件并将其拖到画布上。此组件允许您在视图中嵌入第一方 Connect 应用程序。您可以使用以下属性配置组件： 1. 应用程序命名空间：要嵌入到组件中的应用程序的类型 1. ContactFlowId：如果选择 “指南” 作为应用程序命名空间，请选择要在组件中运行的指南的联系流 ID。 使用 Connect 应用程序组件时，用户可以通过单击 “开始” 按钮来启动指南，这将创建后台聊天联系人来操作指南。指导式工作流程完成后，用户可以通过单击 “重新启动” 按钮从流程开始启动指南。请记住，不支持在指南中已使用的视图中嵌套指南应用程序组件。Connect 应用程序组件中的指南只能嵌入在静态视图中，该视图在基于角色的工作区中用作页面。 # 使用视图创建基于角色的 Workspace 页面 创建基于角色的工作区页面 视图允许您在基于角色的工作区中创建自定义页面，这些页面分配给不同的 Connect 用户。要创建新视图，请先选择相应的工作区用途。访问用户界面生成器后，您可以筛选并从工作区视图中随时可用的用户界面组件中进行选择。 专为 Workspace 页面设计的视图可作为针对特定用户组量身定制的单步界面。为确保最佳功能，请使用兼容的组件，例如警报、旋转木马和容器。工作区视图还可以包含数据表组件，该组件使业务用户能够实时管理联络中心运营。这包括关键用例，例如调整呼叫路由和实施紧急协议。 ## 将输入数据从工作区传递到视图 使用视图创建 Workspace 页面时，可以在运行时通过页面配置向导传递输入数据。这种动态方法使您能够创建可重复使用的视图，这些视图可以适应不同的上下文，而无需为每个用例单独实现。 例如，在为用户主页创建 View 时，您可能希望向不同的用户显示个性化的问候语。与其为每个工作区构建独一无二的视图，不如创建一个带有动态标题组件的视图，然后在多个工作区中重复使用该视图，每个工作区都有自己的自定义消息内容。 # 自定义代理工作区的主题 自定义代理工作区的主题 默认情况下，代理工作区使用 Amazon Connect 主题，其中包括徽标、网站图标、字体系列和调色板。您可以使用主题自定义代理工作区的视觉外观，使其与组织的品牌标识保持一致。要自定义代理工作区的视觉外观，[请创建工作区](amazon-connect-workspaces.md)，[自定义其主题](custom-theme.md)，然后将其分配给您的代理。 ![\[带有自定义主题的代理工作区。\]](http://docs.aws.amazon.com/zh_cn/connect/latest/adminguide/images/agent-workspace-custom-theme.png) 代理可以根据自己的喜好在浅色和深色模式之间进行选择。要更改模式，请转到代理工作区右上角的用户设置。 ![\[浅色模式下的代理工作区。\]](http://docs.aws.amazon.com/zh_cn/connect/latest/adminguide/images/agent-workspace-light-mode.png) ![\[暗模式下的代理工作区。\]](http://docs.aws.amazon.com/zh_cn/connect/latest/adminguide/images/agent-workspace-dark-mode.png) # 在 Amazon Connect 座席工作区中集成第三方应用程序（第三方应用程序） 集成第三方应用程序（3p 应用程序） Amazon Connect 座席工作区是一个单一、直观的应用程序，可为您的客服提供所需的工具和 step-by-step指导，帮助他们高效地解决问题、改善客户体验和加快入职速度。除了在客服工作区中使用第一方应用程序（例如客户档案、案例和 Connect AI 代理）外，您还可以集成第三方应用程序。 **注意** 此功能仅在默认座席工作区中受支持；使用自定义 CCP 时不支持此功能。 例如，您可以将专有的预订系统或供应商提供的指标控制面板集成到客服工作区中 Amazon Connect 。 如果您是有意构建第三方应用程序的开发人员，请参阅[《座席工作区开发人员指南》](https://docs.aws.amazon.com/agentworkspace/latest/devguide/getting-started.html)。 **Topics** + [要求](#onboard-3p-apps-requirements) + [如何添加集成](#onboard-3p-apps-how-to-integrate) + [删除集成](#delete-3p-apps) + [分配权限](assign-security-profile-3p-apps.md) + [向第三方应用程序授予访问权限时的 Iframe 权限](3p-apps-iframe-permissions.md) + [集成 MCP 服务器](3p-apps-mcp-server.md) + [事件和请求](3p-apps-events-requests.md) + [访问 Agent Workspace 中的第三方应用程序](3p-apps-agent-workspace.md) + [访问 Worklist 应用程序](worklist-app.md) + [第三方应用程序 SSO 联合身份验设置](3p-apps-sso.md) + [在 Amazon Connect 座席工作区使用第三方应用程序的屏幕弹出功能](no-code-ui-builder-app-integration.md) + [构建第三方应用程序的研讨会](https://catalog.workshops.aws/amazon-connect-agent-empowerment/en-US/third-party-applications/test) ## 要求 要求 如果您使用自定义 IAM 策略来管理对第三方应用程序的访问权限，则您的用户需要以下 IAM 权限，才能使用 AWS 管理控制台集成第三方应用程序。除了 `AmazonConnect_FullAccess` 之外，用户还需要： ------ #### [ JSON ] **** ``` { "Version":"2012-10-17", "Statement": [ { "Action": [ "app-integrations:CreateApplication", "app-integrations:GetApplication", "iam:GetRolePolicy", "iam:PutRolePolicy", "iam:DeleteRolePolicy" ], "Resource": "arn:aws:app-integrations:us-east-1:111122223333:application/*", "Effect": "Allow" } ] } ``` ------ ## 集成 如何添加集成 **注意** 要向您的实例添加集成，请确保您的实例使用服务相关角色 (SLR)。如果您的实例目前不使用 SLR，但您希望添加集成，则需要迁移到 SLR。只能将集成添加到使用 SLR 的实例。有关更多信息，请参阅 [适用于 2018 年 10 月之前创建的实例](connect-slr.md#migrate-slr)。 1. 打开 Amazon Connect [控制台](https://console.aws.amazon.com/connect/) (https://console.aws.amazon.com/connect/)。 1. 在左侧导航窗格中，选择**集成。**如果您没有看到此菜单，那是因为该菜单在您所在的区域中不可用。要查看此功能可用的地区，请参阅[按地区划分的 Amazon Connect 功能可用性](regions.md)。 1. 在**集成**页面上，选择**添加集成**。 ![\[“设置联系属性”数据块的属性页面。\]](http://docs.aws.amazon.com/zh_cn/connect/latest/adminguide/images/integrations-list.png) 1. 在**添加集成**页面上，输入： 1. **基本信息** 1. **显示名称**：集成的友好名称。此名称显示在安全配置文件上，并在座席工作区中的选项卡上向座席显示。您可以回来更改此名称。 1. **描述（可选）**：您可以选择为此集成提供任何描述。此描述不会向座席显示。 1. **集成类型**：表示集成是标准 Web 应用程序、服务还是 MCP 服务器。这决定了如何在系统内访问集成。 1. **集成标识符**：正式名称，对于标准应用程序或服务类型的集成来说是唯一的。如果每个访问 URL 只有一个应用程序，建议您使用该访问 URL 的来源。您无法更改此名称。 1. **初始化超时**：与工作区建立连接所支持的最长时间。支持的时间以毫秒为单位。此设置有助于管理连接问题并确保应用程序及时启动。 1. **应用程序详细信息** 1. **联系人范围**：指示 Web 应用程序是针对每位联系人刷新，还是仅在每次新的浏览器会话时刷新。此设置会影响应用程序更新其数据的频率。 1. **初始化超时**：与工作区建立连接所支持的最长时间。支持的时间以毫秒为单位。此设置有助于管理连接问题并确保应用程序及时启动。 1. **访问** 1. **访问 URL**：这是托管应用程序的 URL。除非是本地主机，否则 URL 必须是安全的，以 https 开头。 **注意** 并非所有人都 URLs 可使用内嵌框架。以下是两种检查 URL 是否可以使用内嵌框架的方法： 有一种名为 [Iframe Tester](http://iframetester.com/) 的第三方工具可以帮助检查 URL 是否可以使用内嵌框架。 如果 URL 可以使用内嵌框架，它将在此页面的预览中呈现。 如果 URL 不能使用内嵌框架，它将在此页面的预览中显示错误。 此网站可能显示错误，并且该应用程序仍可以在 Agent Workspace 中使用内嵌框架。这是因为应用程序开发者可以锁定他们的应用程序，使其只能嵌入到 Workspace 中，而不能嵌入到其他任何地方。如果您从应用程序开发者那里收到此应用程序，建议您仍然尝试将此应用程序集成到 Agent Workspace 中。 对于技术用户：请检查您正在尝试集成的应用程序的安全策略内容。 Firefox：汉堡菜单 > 更多工具 > Web 开发人员工具 > 网络 Chrome：3 点菜单 > 更多工具 > 开发人员工具 > 网络 其他浏览器：在开发人员工具中查找网络设置。 Content-Security-Policy帧祖先指令应该是。`https://your-instance.my.connect.aws` 如果指令为`same origin`或`deny`，则 Connect 无法对此 URL 进行内建框架 AWS/Amazon 如果无法为应用程序建立内嵌框架，您可以执行以下操作： + 如果您控制应用程序/URL，则可以更新应用程序的内容安全策略。遵循应用程序开发人员的最佳实践/确保应用程序只能嵌入[此处](https://docs.aws.amazon.com/agentworkspace/latest/devguide/recommendations-and-best-practices.html)的 Amazon Connect 座席工作区部分。 + 如果您无法控制应用程序/URL，可以尝试联系应用程序开发人员，要求他们更新应用程序的内容安全策略。 1. **已批准的来源（可选）**：如果与访问网址不同，则应允许的允许名单 URLs 。除非是本地主机，否则 URL 必须是安全的，以 https 开头。 1. 为[事件和请求](3p-apps-events-requests.md)添加权限。 以下示例演示了如何使用 AWS 管理控制台载入新应用程序并为其分配权限。在此示例中，系统为应用程序分配了六种不同的权限。 **提供基本信息和访问详细信息** 1. **实例关联** 1. 您可以授予该账户区域内的任何实例访问此应用程序的权限。 1. 虽然将集成与实例关联是可选的，但在将其与实例关联之前，您将无法使用该应用程序。 **注意** 对于 MCP 服务器，您只能选择使用所选网关的发现 URL 配置的实例。 ![\[提供基本信息和访问详细信息。\]](http://docs.aws.amazon.com/zh_cn/connect/latest/adminguide/images/integrations-add-basic-info.png) **向应用程序授予工作区数据集成权限** ![\[向应用程序授予工作区数据集成权限。\]](http://docs.aws.amazon.com/zh_cn/connect/latest/adminguide/images/integrations-add-permissions.png) **Iframe 配置** ![\[Iframe 配置。\]](http://docs.aws.amazon.com/zh_cn/connect/latest/adminguide/images/integrations-add-iframe-config.png) 1. 选择**添加集成**。 1. 如果集成已成功创建，您将被发送到**集成详细信息**页面，并会看到成功横幅。 ![\[向应用程序授予工作区数据集成权限。\]](http://docs.aws.amazon.com/zh_cn/connect/latest/adminguide/images/integrations-view.png) 您可以编辑现有应用程序的某些属性，例如其显示名称、访问网址和权限。 1. 如果在创建应用程序或将应用程序与实例关联时出错，则会看到一条错误消息，您可以采取相应的措施来纠正问题。 ## 删除集成 删除集成 如果您不想在可预见的将来再使用集成，则可以将其删除。如果您想暂时停止使用它，但在可预见的将来可能会再次使用它，建议您将其与实例解除关联，以避免再次添加它。要删除集成，请导航到 AWS 管理控制台，选择一个集成，然后选择**删除**。 **故障排查** + 如果集成与任何实例关联，则操作将失败。您首先必须取消集成与任何实例的关联。然后你可以回来删除它。 **提示** 如果您在 2023 年 12 月 15 日之前创建了集成，则在更新集成与实例的关联时可能会遇到问题。这是因为您需要更新您的 IAM 策略。 ![\[由于权限不足，尝试删除集成时出现 IAM 错误\]](http://docs.aws.amazon.com/zh_cn/connect/latest/adminguide/images/delete-3p-apps.png) 需要更新您的 IAM 策略，以包含以下权限： + `app-integrations:CreateApplicationAssociation` + `app-integrations:DeleteApplicationAssociation` ------ #### [ JSON ] **** ``` { "Version":"2012-10-17", "Statement": [ { "Action": [ "app-integrations:CreateApplication", "app-integrations:GetApplication" ], "Resource": "arn:aws:app-integrations:us-east-1:111122223333:application/*", "Effect": "Allow" }, { "Action": [ "app-integrations:CreateApplicationAssociation", "app-integrations:DeleteApplicationAssociation" ], "Resource": "arn:aws:app-integrations:us-east-1:111122223333:application-association/*", "Effect": "Allow" }, { "Action": [ "iam:GetRolePolicy", "iam:PutRolePolicy", "iam:DeleteRolePolicy" ], "Resource": "arn:aws:iam::111122223333:role/aws-service-role/connect.amazonaws.com/AWSServiceRoleForAmazonConnect_*", "Effect": "Allow" } ] } ``` ------ # 在 Amazon Connect 中使用第三方应用程序的安全配置文件权限 分配权限 本主题介绍访问您已加载并关联的第三方应用程序所需的安全配置文件权限。有关第三方应用程序权限及其 API 名称的列表，请参阅[Amazon Connect 中的安全配置文件权限列表](security-profile-list.md)。 ## 第三方应用程序权限 第三方应用程序权限 **注意** 将应用程序与实例关联后，您可能必须等待 10 分钟，才能看到该应用程序出现在**安全配置文件**页面的**座席应用程序**部分。 您已加载到 Amazon Connect 实例 AWS 并与其关联的所有应用程序都将显示在**安全配置文件**页面的**代理应用程序**部分，如下图所示。 ![\[“安全配置文件”页面的“座席应用程序”部分。\]](http://docs.aws.amazon.com/zh_cn/connect/latest/adminguide/images/assign-security-profile-3p-apps-displayed.png) 您还需要授予对 CCP 的访问权限，才能显示应用程序启动程序菜单。 ![\[应用了 CCP 访问联系人控制面板的访问权限。\]](http://docs.aws.amazon.com/zh_cn/connect/latest/adminguide/images/assign-security-profile-3p-apps-ccp-permissions.png) 分配权限后，请查看如何[访问 Amazon Connect 座席工作区中的第三方应用程序](3p-apps-agent-workspace.md)。 # 向第三方应用程序授予访问 Amazon Connect 的权限时的 Iframe 权限 向第三方应用程序授予访问权限时的 Iframe 权限 通过 AWS 管理控制台的 `onboarding` UI 或 API 配置第三方应用程序时，您可以指定 `iframe` 权限设置。即使在设置了应用程序之后，也可以修改这些权限。 默认情况下，向所有第三方应用程序授予四种基本 `iframe` 权限：`allow-forms`、`allow-popups`、`allow-same-origin` 和 `allow-scripts`。由于某些应用程序可能需要增强功能，因此可以在应用程序注册过程中请求其它 `iframe` 权限。 **注意** 以下权限的浏览器兼容性可能因不同的浏览器实现而异。 | 权限 | 说明 | | --- | --- | | 允许 | | | clipboard-read | 控制是否支持应用程序从剪贴板读取数据。Chrome 目前支持此权限，但 Firefox 和 Safari 不支持。 | | clipboard-write | 控制是否支持应用程序将数据写入剪贴板。Chrome 目前支持此权限，但 Firefox 和 Safari 不支持。 | | microphone | 控制是否支持应用程序使用音频输入设备。 | | camera | 控制是否支持应用程序使用视频输入设备。 | | 沙箱 | | | allow-forms | 支持页面提交表单。默认情况下支持此权限。 | | allow-popups | 支持应用程序打开弹出窗口。默认情况下支持此权限。 | | allow-same-origin | 如果不使用此令牌，则该资源将被视为来自特殊来源，该来源总是不符合同源策略（可能会阻止访问数据 storage/cookies 等 JavaScript APIs）。默认情况下支持此权限。 | | allow-scripts | 支持页面运行脚本。默认情况下支持此权限。 | | allow-downloads | 支持通过具有下载属性的 或 元素下载文件，以及通过导航引导至下载文件 | | allow-modal | 支持页面通过 Window.alert()、Window.confirm()、Window.print() 和 Window.prompt() 打开模态窗口，同时支持打开 ，而不管此关键字是什么 | | allow-storage-access-by-用户激活 | 支持使用存储访问权限 API 来请求对未分区 Cookie 的访问权限。 | | allow-popups-to-escape-沙箱 | 支持打开新的浏览上下文，而无需在其上强制使用沙盒标志 | ## 示例配置 示例配置 可以使用类似于以下内容的模板来配置 Iframe 权限。 例如，要授予剪贴板权限： ``` { "IframeConfig": { "Allow": [ "clipboard-read", "clipboard-write" ], "Sandbox": [ "allow-forms", "allow-popups", "allow-same-origin", "allow-scripts" ] } } ``` **重要提示** 1. 默认情况下，如果 iframe 配置字段留空或设置为空花括号 \$1\$1，则会自动授予以下沙盒权限： + allow-forms + allow-popups + allow-same-origin + allow-scripts ``` { "IframeConfig": { "Allow": [], "Sandbox": ["allow-forms", "allow-popups", "allow-same-origin", "allow-scripts"] } } ``` 1. 要显式配置无权限的应用程序，必须同时为 `Allow` 和 `Sandbox` 设置空数组： ``` { "IframeConfig": { "Allow": [], "Sandbox": [] } } ``` # 将 MCP 服务器与 Amazon Connect 集成 集成 MCP 服务器 要将 MCP 服务器与 Amazon Connect 集成，您必须配置 Bedrock 网关 AgentCore 。该网关将您的 APIs Lambda 函数和服务转换为适用于 AI 代理的 MCP 兼容工具。 **注意** 只有一个实例可以与网关关联，并且该实例必须在 Bedrock AgentCore 中使用网关的发现 URL 进行配置。每个网关只能与一个 MCP 服务器一起使用。 ## 如何集成 MCP 服务器 1. 在**添加集成**页面上，输入以下信息： 1. **基本信息** + **显示名称**-应用程序的友好名称。此名称显示在安全配置文件上，并在座席工作区中的选项卡上向座席显示。您以后可以更改此名称。 + **描述（可选）**-您可以选择为此应用程序提供描述。 + **集成类型**-选择 **MCP 服务器**。 ![\[“添加集成” 页面显示 MCP 服务器应用程序的基本信息字段。\]](http://docs.aws.amazon.com/zh_cn/connect/latest/adminguide/images/integrations-3p-mcp-app.png) 1. **应用程序详细信息** 选择 Bedrock AgentCore 网关以连接 Amazon Connect。网关将 APIs Lambda 函数和服务转换为适用于 AI 代理的 MCP 兼容工具。如果当前不存在网关，请使用 Bedrock AgentCore 创建一个新网关。 ![\[显示网关选择的应用程序详细信息部分。\]](http://docs.aws.amazon.com/zh_cn/connect/latest/adminguide/images/integrations-3p-mcp-select-gateway.png) 可以在 Bedrock AgentCore 中创建新的网关。 **注意** 发现 URL 必须遵循以下格式:`[connect instance URL]/.well-known/openid-configuration`. 例如：`https://my-instance.my.connect.aws/.well-known/openid-configuration`。 ![\[其他网关配置选项。\]](http://docs.aws.amazon.com/zh_cn/connect/latest/adminguide/images/3p-apps-mcp-bedrock.png) 1. **实例关联（可选）** 选择使用所选网关的发现 URL 配置的实例。默认为 “**无”**。如果您尚未准备好选择实例，或者没有实例与所选网关的 Discovery URL 关联，则仍然可以立即创建 MCP 服务器集成，稍后再关联实例。 ![\[实例关联部分显示了实例选择选项。\]](http://docs.aws.amazon.com/zh_cn/connect/latest/adminguide/images/3p-apps-mcp-instance.png) 1. 选择**添加集成**。 1. 如果成功创建集成，您将被带到**查看集成**页面，在那里您将看到成功横幅和集成摘要。 ![\[集成 MCP 服务器后，“查看集成” 页面会显示成功横幅。\]](http://docs.aws.amazon.com/zh_cn/connect/latest/adminguide/images/3p-apps-mcp-success.png) # 允许第三方应用程序访问 Amazon Connect 时的发生的活动和请求 事件和请求 本主题列出了您必须向第三方应用程序显式授予的用于访问 Amazon Connect 数据的权限。 **注意** 如果您是开发人员，请查看如何创建对事件做出反应的应用程序：[将应用程序与 Amazon Connect 座席工作区座席数据集成](https://docs.aws.amazon.com/agentworkspace/latest/devguide/integrate-with-agent-data.html)。 当您使用中的 API 或入门用户界面加载第三方应用程序时 AWS 管理控制台，必须明确授予第三方应用程序访问 Amazon Connect 数据的权限。您还可以编辑现有应用程序的权限。 要了解分配特定权限的效果，请查看以下权限、描述以及相应的请求和事件。 例如，如果您为应用程序分配了 `User.Details.View` 权限，则该应用程序将能够发出以下请求：`agent.getName` 和 `agent.getARN`。如果您的应用尝试订阅事件或请求其没有权限访问的数据，则该应用可能无法正常运行。 要了解有关每个请求和事件的更多信息，请参阅 [API 参考](https://docs.aws.amazon.com/agentworkspace/latest/devguide/api-reference-3p-apps-events-and-requests.html.html)。 | 权限 | 说明 | 请求 | Events | | --- | --- | --- | --- | | User.Details.View | 有关座席的详细信息，例如他们的全名和用户 ARN | agent/getName agent/getARN | | | User.Configuration.View | 有关座席的配置信息，例如其关联的路由配置文件 | 代理/ getRoutingProfile 代理/ getChannelConcurrency agent/getExtension getLanguage 代理/ listAvailabilityStates 代理/ listQuickConnects 语音/ 权限 getOutboundCall 语音/ listDialableCountries | onLanguageChanged | | User.Status.View | 有关座席状态的详细信息 | agent/getState | 代理/ onStateChanged | | Contact.Details.View | 有关工作区中可用联系人的详细信息 | 联系人/ 身份证 getInitialContact 联系/ getChannelType 联系/ getStateDuration contact/getQueue 联系/ getQueueTimestamp | contact/onCleared contact/onMissed 联系/ onStartingAcw contact/onConnected | | 联系我们。 CustomerDetails.View | 有关客户的详细信息，例如他们拨打的电话号码（仅限语音） | 语音/ getInitialCustomer PhoneNumber | | | Contact.Attributes.View | 有关联系人的元数据 | contact/getAttribute contact/getAttributes | | | User.Status.Edit | 修改座席状态 | 代理/ setAvailabilityState 代理/ setAvailabilityState ByName agent/setOffline | | | Contact.Details.Edit | 联系人编辑功能，例如外拨电话或转接电话。 | 语音/ createOutboundCall contact/transfer contact/addParticipant contact/accept contact/clear | | | \$1 | 提供对所有请求和事件的访问权限。 | | | # 访问 Amazon Connect 座席工作区中的第三方应用程序 访问 Agent Workspace 中的第三方应用程序 ## 需要了解的重要事项 需要了解的重要事项 + 2024 年 7 月 22 日，谷歌[宣布](https://privacysandbox.com/news/privacy-sandbox-update/)他们不再计划弃用第三方 Cookie，而是为弃用第三方 Cookie 提供选择机制。选择停用第三方 Cookie 可能会影响第三方应用程序的使用体验。如果您正在 Chrome 浏览器中的 Amazon Connect Agent Workspace 中使用第三方应用，建议您： + **临时解决方案**：更新[企业版 Chrome 策略](https://support.google.com/chrome/a/answer/7679408?sjid=16745203858910744446-EU#upChromeBrsrBB117)。您可以将 `BlockThirdPartyCookies` 策略设置为 false，以保护您的座席体验免受停用 3P Cookie 的直接影响。 + **永久解决方案**：建议应用程序开发人员遵循[最佳实践](https://developers.google.com/privacy-sandbox/3pcd)，继续传递第三方 Cookie。 + 您必须已[集成应用程序](https://docs.aws.amazon.com/connect/latest/adminguide/3p-apps.html)，并且座席必须能够使用安全配置文件[访问该应用程序](https://docs.aws.amazon.com/connect/latest/adminguide/assign-security-profile-3p-apps.html)。座席还必须有权访问 CCP 才能显示应用程序启动程序。 ## 使用应用程序启动器访问第三方应用程序 使用应用程序启动器 座席可以使用应用程序启动程序访问座席工作区中的第三方应用程序，如下图所示。成功[登录](3p-apps.md)第三方应用程序后，应用程序启动器会出现在座席工作区。 ![\[座席工作区的应用程序启动器。\]](http://docs.aws.amazon.com/zh_cn/connect/latest/adminguide/images/agent-workspace-apps-launcher.png) 应用程序启动程序显示座席可以访问的应用程序列表。 座席可以在没有任何联系人（处于空闲状态）或正在处理联系（通话、聊天或任务）时启动应用程序。针对指定联系打开应用程序后，它保持打开状态，直到该联系关闭。 ## 访问第三方应用程序所需的安全配置文件权限 所需的安全配置文件权限 座席需要以下安全配置文件权限才能访问第三方应用程序： + **联系人控制面板 (CCP)：访问 CCP** + 访问至少一个第三方应用程序：成功[登录](3p-apps.md)第三方应用程序后，它将出现在安全配置文件页面中。 ## 将应用程序固定在座席工作区 将应用程序固定在座席工作区 座席可以将应用程序固定为打开状态。在“应用程序”选项卡上，选择“更多”图标，然后选择**图钉选项卡**，如下图所示。 ![\[在座席工作区打开图钉选项卡。\]](http://docs.aws.amazon.com/zh_cn/connect/latest/adminguide/images/3p-apps-agent-workspace-pinned-1.png) 当固定一个应用程序后，它会在闲置状态下保持打开状态，并在任何联系人进入时弹出。在用户清除浏览器上的 Cookie 之前，该应用程序会一直固定在该用户和浏览器上。 如果座席不再希望此应用程序始终处于打开状态，则可以取消固定该选项卡；他们仍然可以根据需要打开和关闭此应用程序。 ### 固定在座席工作区的应用程序示例 固定的应用程序示例 下图显示了一个名为的第三方应用程序的示例 NoteTest，该应用程序已固定到代理工作区。 ![\[固定在座席工作区的第三方 NoteTest 应用程序。\]](http://docs.aws.amazon.com/zh_cn/connect/latest/adminguide/images/3p-apps-agent-workspace-notes-app.png) 下图显示了一个将名为 Maps 的第三方应用程序固定到座席工作区的示例。 ![\[固定在座席工作区的第三方 Maps 应用程序。\]](http://docs.aws.amazon.com/zh_cn/connect/latest/adminguide/images/3p-apps-agent-workspace-maps-app.png) # 访问 Amazon Connect 座席工作区中的 Worklist 应用程序 访问 Worklist 应用程序 Worklist 应用程序使具有所需权限和路由配置文件设置的座席能够手动确定已排队工作的优先级，并将它们分配给自己。以下步骤说明如何向用户提供在其工作区中访问 Worklist 应用程序的权限。 **注意** 只有当座席拥有具有下述相应权限的安全配置文件时，才能访问座席工作区中的 Worklist 应用程序。 1. 通过选择以下权限之一来更新安全配置文件： + **允许任何联系人“分配给我”**权限：可让座席在以下任一条件下查看联系人： + 当前座席是联系人中唯一的首选座席。 + 当前座席是联系人中的首选座席之一。 + 任何座席或一组座席都是联系人中的首选座席。 + 无首选座席的联系人。 + **允许我的联系人“分配给我”**权限：可让座席在以下条件下查看联系人： + 当前座席是联系人中唯一的首选座席。 + 当前座席是联系人中的首选座席之一。 ![\[Worklist 应用程序的联系人操作。\]](http://docs.aws.amazon.com/zh_cn/connect/latest/adminguide/images/worklist-app-1.png) 分配这些权限后，它们将反映在**安全配置文件页面**上。 ![\[Worklist 应用程序的安全配置文件权限。\]](http://docs.aws.amazon.com/zh_cn/connect/latest/adminguide/images/worklist-security-profile.png) ![\[Worklist 应用程序的安全配置文件权限。\]](http://docs.aws.amazon.com/zh_cn/connect/latest/adminguide/images/worklist-security-profile-2.png) 1. 更新路由配置文件设置，以便在新部分中指定队列/渠道来进行手动分配。 ![\[Worklist 应用程序的路由配置文件设置。\]](http://docs.aws.amazon.com/zh_cn/connect/latest/adminguide/images/worklist-routing-profile.png) 1. 更新安全配置文件和路由配置文件设置后，座席将在其工作区中看到 Worklist 应用程序： ![\[座席工作区中的 Worklist 应用程序。\]](http://docs.aws.amazon.com/zh_cn/connect/latest/adminguide/images/worklist-workspace-view.png) ## 可用的筛选选项 可用的筛选选项取决于座席的权限： + 拥有**允许任何联系人“分配给我”**的座席可以查看以下筛选选项： ![\[拥有任何联系人“分配给我”权限的座席的选项。\]](http://docs.aws.amazon.com/zh_cn/connect/latest/adminguide/images/worklist-filter-any-contact.png) + 拥有**允许我的联系人“分配给我”**的座席可以查看以下筛选选项： ![\[拥有我的联系人“分配给我”权限的座席的选项。\]](http://docs.aws.amazon.com/zh_cn/connect/latest/adminguide/images/worklist-filter-my-contact.png) ## 联系人历史记录的时间范围过滤器 默认情况下，Worklist 应用程序会显示过去 2 周内创建的联系人。要查看在此时间范围之外创建的联系人，请使用时间范围筛选器选择特定的日期范围。时间范围筛选器允许您选择过去 90 天内的任何日期范围。 ![\[Worklist 应用程序显示用于选择联系人历史记录日期范围的时间范围过滤器。\]](http://docs.aws.amazon.com/zh_cn/connect/latest/adminguide/images/worklist-time-range-filter.png) # 在 Amazon Connect 实例中为第三方应用程序设置 SSO 联合身份验证 第三方应用程序 SSO 联合身份验设置 用户可以使用联合 Single-Sign-On到已在其 Amazon Connect 实例中设置的多个第三方应用程序，而无需为每个应用程序单独进行身份验证。 **注意** 第三方 (3P) 应用程序可以在内嵌框架内无缝完成登录流程，前提是身份提供商支持内嵌框架登录页面。有关内嵌框架功能的详细信息，请参阅身份提供商指南。 **为实例中存在的第三方应用程序设置 SSO Amazon Connect** 1. 设置身份提供程序或使用现有的身份提供程序。 1. 在身份提供程序中设置用户。 1. 设置 Amazon Connect 实例和 [使用 IAM 为 Amazon Connect 配置 SAML](configure-saml.md)。 1. 在您的身份提供程序中设置将与 Amazon Connect 实例集成的其他应用程序。 1. 将每个用户身份附加到身份提供程序中将与您的 Amazon Connect 实例集成的任何应用程序。通过在安全配置文件中提供更精细的应用程序特定权限，您可以控制哪个座席有权访问 Amazon Connect 座席工作区中的应用程序。有关更多信息，请参阅 [在 Amazon Connect 中使用第三方应用程序的安全配置文件权限](assign-security-profile-3p-apps.md)。 1. 用户登录其身份提供程序后，他们就可以在配置了第三方应用程序的 Amazon Connect 实例中进行联合身份验证，并且无需用户名和密码即可在每个应用程序（如果应用程序已设置了 SSO）中进行联合身份验证。