查看资源 - Amazon Connect

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

查看资源

视图是用户界面模板，可用于自定义代理的工作区。例如，您可以使用视图向代理显示联系人属性，提供用于输入处置代码的表单，提供电话备忘以及在 step-by-step 指南中向代理展示用户界面页面。

Amazon Connect 包含一组视图，您可以使用该显示视图块添加代理的工作区。

在流程中配置视图时，您可以为每个视图定义静态和动态内容。特定视图的内容由三个关键元素组成：模板、输入架构和操作。

提示

为了获得最佳的数据映射体验，我们建议在显示视图区块中使用 Se t JSON 选项。可以在 Show Vie w 块中引用流程中的所有命名空间，包括$.External，这样您就可以在创建的任何视图中将来自外部系统的数据共享给代理。您可以混合和匹配来自 Amazon Connect 和其他来源的数据，以便为您的代理创建统一的用户界面。

Detail view

详细视图用于向代理显示信息，并为他们提供可以采取的操作列表。细节视图的一个常见用例是在呼叫开始时向代理显示屏幕弹出窗口。

  • 此视图中的操作可用于让代理继续执行 step-by-step 指南中的下一步，也可以使用这些操作来调用全新的工作流程。

  • 部分是唯一的必需组件。您可以在此处配置要向代理显示的页面正文。

  • 此视图支持诸如之AttributeBar类的可选组件。

详细视图的交互式文档

下图显示了细节视图的示例。它有页面标题、描述和四个示例。

详细视图，包含页面标题、描述和四个带属性的示例。

章节

  • 内容可以是静态字符串， TemplateString 或键-值对。它可以是单个数据点或列表。有关更多信息，请参阅 TemplateString 或 AtrributeSection。

AttributeBar （可选）

  • 可选，如果提供，将在视图顶部，属性栏将显示在视图顶部。

  • 是具有必需属性、标签、值和可选属性LinkTypeResourceId、可复制和 URL 的对象列表。有关更多信息，请参见属性。

    • LinkType可以是外部应用程序，也可以是连接应用程序，例如 case。

      • 当它是外部时，用户可以导航到配置了 Ur l 的新浏览器页面。

      • 如果是案例，用户可以在代理工作区中导航到新的案例详细信息，该工作区配置为 ResourceId。

    • Copyable 允许用户 ResourceId 通过在您的输入设备上进行选择来复制。

返回（可选）

  • 可选，但如果不包含任何操作，则为必填项。如果提供，将显示返回导航链接。

  • 是一个带有标签的对象，它将控制链接文本中显示的内容。

标题（可选）

  • 可选，如果提供，将显示文本作为标题。

描述（可选）

  • 可选，如果提供，将在标题下显示描述文本。

操作（可选）

  • 可选。如果提供，将在页面底部，操作列表。

输入示例


{
  "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

列表视图用于将信息显示为带有标题和描述的项目列表。项目也可以充当附有操作的链接。它还可选择支持标准的返回导航和永久上下文标题。

列表视图的交互式文档

下图显示了列表视图的示例。它有一列，里面有三个项目。

列表视图、一个带链接的列表项和两个没有链接的项目。

物品

  • 必填项，将以列表形式显示这些项目。

  • 每个项目可能有标题、描述、图标和 ID。

    • 所有属性均为可选属性。

    • 定义 Id 时，输出将包括该值作为输出的一部分。

AttributeBar （可选）

  • 可选，如果提供，将在视图顶部，属性栏将显示在视图顶部。

  • 是具有必需属性、标签、值和可选属性LinkTypeResourceId、可复制和 URL 的对象列表。有关更多信息，请参见属性。

    • LinkType可以是外部应用程序，也可以是连接应用程序，例如 case。

      • 当它是外部时，用户可以导航到配置了 Ur l 的新浏览器页面。

      • 如果是案例，用户可以在代理工作区中导航到新的案例详细信息，该工作区配置为 ResourceId。

    • Copyable 允许用户 ResourceId 通过在您的输入设备上进行选择来复制。

返回（可选）

  • 可选，但如果不包含任何操作，则为必填项。如果提供，将显示返回导航链接。

  • 是一个带有标签的对象，它将控制链接文本中显示的内容。

标题（可选）

  • 可选，如果提供，将显示文本作为标题。

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

表单视图允许您为代理提供输入字段，以收集所需的数据并将数据提交到后端系统。此视图由多个分区组成，这些分区具有预定义的分区样式和标题。正文由以列或网格布局格式排列的各种输入字段组成。

表单视图的交互式文档

下图显示了汽车租赁预订的表单视图的示例。它上面有位置和日期字段。

以位置和日期字段为示例的表单视图。

章节

  • 表单视图中输入字段和显示字段所在的位置。

  • SectionProps

    • 标题

      • 本节的标题

    • Type

      • 章节的类型

      • FormSection （处理用户输入的表单）或 DataSection （显示标签和值列表）

    • 物品

      • 基于类型的数据列表。如果Type是DataSection，则数据应为属性。如果Type是FormSection，则数据应为表单组件。

    • 可以编辑

      • 如果章节类型为，则在标题处显示编辑按钮DataSection。

      • 布尔值

向导（可选）

  • 显示ProgressTracker在视图的左侧。

  • 每个项目可能有标题、描述和可选。

    • 标题为必填项

返回（可选）

  • 是带有标签的对象或字符串，它将控制链接文本中显示的内容。

下一步（可选）

  • 当步骤不是步骤中的最后一步时，使用此操作。

  • 是对象 (FormActionProps) 或字符串。有关更多信息，请参阅FormActionProps。

取消（可选）

  • 当步骤不是第一步时，使用此操作。

  • 是对象 (FormActionProps) 或字符串。有关更多信息，请参阅FormActionProps。

以前（可选）

  • 当步骤不是第一步时，使用此操作。

  • 是对象 (FormActionProps) 或字符串。有关更多信息，请参阅FormActionProps。

编辑（可选）

  • 当分区类型为时，将显示此操作DataSection。

  • 是对象 (FormActionProps) 或字符串。有关更多信息，请参阅FormActionProps。

AttributeBar （可选）

  • 可选，如果提供，将在视图顶部，属性栏将显示在视图顶部。

  • 是具有必需属性、标签、值和可选属性LinkTypeResourceId、可复制和 URL 的对象列表。有关更多信息，请参见属性。

    • LinkType可以是外部应用程序，也可以是连接应用程序，例如 case。

      • 当它是外部时，用户可以导航到配置了 Ur l 的新浏览器页面。

      • 如果是案例，用户可以在代理工作区中导航到新的案例详细信息，该工作区配置为 ResourceId。

    • Copyable 允许用户 ResourceId 通过在您的输入设备上进行选择来复制。

标题（可选）

  • 显示为页面标题的字符串。

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

确认视图是一个页面，用于在提交表单或完成操作后向用户显示。在此预建模板中，您可以提供发生的事情、后续步骤和提示的摘要。确认视图支持永久属性栏、图标/图像、标题和子标题以及返回主页导航按钮。

确认视图的交互式文档

下图显示了确认的示例。

确认视图、复选标记和确认租车的文本。

下一步

  • 必需。

  • 下一步的操作按钮

    • 标签-导航按钮的字符串标签。

AttributeBar （可选）

  • 可选，如果提供，将在视图顶部，属性栏将显示在视图顶部。

  • 是具有必需属性、标签、值和可选属性LinkTypeResourceId、可复制和 URL 的对象列表。有关更多信息，请参见属性。

    • LinkType可以是外部应用程序，也可以是连接应用程序，例如 case。

      • 当它是外部时，用户可以导航到配置了 Ur l 的新浏览器页面。

      • 如果是案例，用户可以在代理工作区中导航到新的案例详细信息，该工作区配置为 ResourceId。

    • Copyable 允许用户 ResourceId 通过在您的输入设备上进行选择来复制。

标题（可选）

  • 显示为页面标题的字符串。

SubHeading （可选）

  • 页面的辅助消息。

图形（可选）

  • 显示一个拆分图像

  • 具有以下密钥的对象：

    • 包括-布尔值，如果为真，则图形将包含在页面中。

输入数据示例


 {
  "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

卡片视图允许您在代理人接受联系后立即向他们提供主题列表以供他们选择，从而为他们提供指导。

卡片视图的交互式文档

向你的代理人出示卡片。下图显示了向代理出示的六张卡片的示例：一张用于进行新的预订，另一张用于查看即将到来的行程的预订。

一组六张牌。

当特工选择卡片时，会显示更多信息。下图显示了一张显示预订详细信息的已打开的卡片。

一张显示预订详情的开放式卡片。

章节

  • 它是带有 “摘要” 和 “详细信息” 的对象列表。必须提供此信息才能创建卡片和详细信息。

  • 由摘要和详细信息组成。有关更多信息，请参阅摘要和详细信息。

AttributeBar （可选）

  • 可选，如果提供，将在视图顶部，属性栏将显示在视图顶部。

  • 是具有必需属性、标签、值和可选属性LinkTypeResourceId、可复制和 URL 的对象列表。有关更多信息，请参阅属性。

    • LinkType可以是外部应用程序，也可以是连接应用程序，例如 case。

      • 当它是外部时，用户可以导航到配置了 Ur l 的新浏览器页面。

      • 如果是案例，用户可以在代理工作区中导航到新的案例详细信息，该工作区配置为 ResourceId。

    • Copyable 允许用户 ResourceId 通过在您的输入设备上进行选择来复制。

标题（可选）

  • 显示为页面标题的字符串

返回（可选）

  • 它是一个带有标签的对象或字符串，它将控制链接文本中显示的内容。有关更多信息，请参阅ActionProps。

NoMatchFound （可选）

  • 它是为卡片下方的按钮显示的字符串。有关更多信息，请参阅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": "<TextContent>Steps:<ol><li>Customer provides incident information</li><li>Customer provides receipts and agrees with amount</li><li>Customer receives reimbursement</li></ol></TextContent>"
                },
                "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": "<p>There is no additional information</p>"
                }
              }
            },
            {
              "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": "<p>There is no additional information</p>"
                }
              }
            },
            {
              "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": "<p>There is no additional information</p>"
                }
              }
            },
            {
              "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": "<p>There is no additional information</p>"
                }
              }
            },
            {
              "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": "<p>There is no additional information</p>"
                }
              }
            }],
    "NoMatchFound": {
        "Label": "Can't find match?"
    }

}

输出数据示例


{
    Action: "ActionSelected",
    ViewResultData: {
        actionName: "Update the trip"
    }
}