"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`。
**外觀**
![\[客服人員工作區檢視卡片的影像。\]](http://docs.aws.amazon.com/zh_tw/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：選擇**咖啡館卡片****
```
"Action": "CardSelected"
"Output": {
"Heading": "CafeCard",
"Id": "CafeCard"
}
```
**情境 2：選擇**略過**按鈕**
```
"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 受管檢視
Amazon Connect 包含一組檢視，您可以新增客服人員的工作區。如需如何設定不同 AWS 受管檢視的詳細資訊，請參閱下列內容。
------
#### [ Detail view ]
**詳細資訊檢視**向客服人員顯示資訊，並提供他們可以採取的動作清單。**詳細資料檢視**的常見使用案例是在通話開始時向客服人員顯示螢幕彈出視窗。
+ 此檢視中的動作可以讓客服人員繼續逐步指南中的下一個步驟，或者可以使用這些動作來調用全新的工作流程。
+ **區段** 是唯一的必要元件。您可以在區段中配置要顯示給客服人員的頁面的主體。
+ 此檢視支援選用元件，例如**屬性列**。
**詳細檢視**的互動式[文件](https://d3irlmavjxd3d8.cloudfront.net/?path=/docs/aws-managed-views-detail--with-all)
下圖顯示**詳細檢視**的範例。擁有一個頁面標題、描述和四個範例。
![\[詳細檢視，包含頁面標題，描述和四個具有屬性的範例。\]](http://docs.aws.amazon.com/zh_tw/connect/latest/adminguide/images/details-view-page-heading-sq.png)
**章節**
+ 內容可以是靜態字串、範本字串或鍵值配對。可以是單一資料點或清單。如需更多詳細資訊，請參閱[範本字串](https://d3irlmavjxd3d8.cloudfront.net/?path=/docs/aws-managed-views-common-configuration--page#templatestring)或[屬性列](https://d3irlmavjxd3d8.cloudfront.net/?path=/docs/aws-managed-views-common-configuration--page#attribute-section)區段。
**屬性列 (選用)**
+ 選用，如果有提供，將在檢視上方顯示屬性列。
+ 具有必要屬性、**標籤**、**值** 和選用屬性 **連結類型**、**資源 ID**、**可複製** 和 **URL** 的物件清單。如需更多詳細資訊，請參閱[屬性](https://d3irlmavjxd3d8.cloudfront.net/?path=/docs/aws-managed-views-common-configuration--page#attribute)。
+ **連結類型** 可以是外部或連結的應用程式，例如案例。
+ 當是*外部*時，使用者可以導覽至一個新的瀏覽器頁面，該頁面使用 **URL** 設定。
+ 當是*案例*時，使用者可以在客服人員工作區上導覽至新案例詳細資訊，該案例使用資源 ID 設定。
+ **可複製**允許使用者透過您的輸入裝置進行選擇，以複製資源 ID。
**返回 (選用)**
+ 選用，但如果沒有包含任何動作，則為必填。如果提供，將顯示返回導覽連結。
+ 是具有*標籤*的物件，將控制連結文字中顯示的內容。
**標題 (選用)**
+ 選用，如果提供將顯示文字作為標題。
**描述 (選用)**
+ 選用，如果提供，將在標題下方顯示描述文字。
**動作 (選用)**
+ 選用。如果提供，將在頁面底部顯示動作清單。
**輸入範例**
```
{
"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_tw/connect/latest/adminguide/images/list-view-column-sq.png)
**項目**
+ 必要，會以清單顯示這些項目。
+ 每個項目可能有一個標題、描述、圖示和 ID。
+ 所有屬性皆是選用。
+ 定義 Id 之後，輸出將包含該值作為輸出的一部分。
**屬性列 (選用)**
+ 選用，如果有提供，將在檢視上方顯示屬性列。
+ 具有必要屬性、**標籤**、**值** 和選用屬性 **連結類型**、**資源 ID**、**可複製** 和 **URL** 的物件清單。如需更多詳細資訊，請參閱[屬性](https://d3irlmavjxd3d8.cloudfront.net/?path=/docs/aws-managed-views-common-configuration--page#attribute)。
+ **連結類型** 可以是外部或連結的應用程式，例如案例。
+ 當是*外部*時，使用者可以導覽至一個新的瀏覽器頁面，該頁面使用 **URL** 設定。
+ 當是*案例*時，使用者可以在客服人員工作區上導覽至新案例詳細資訊，該案例使用資源 ID 設定。
+ **可複製**允許使用者透過您的輸入裝置進行選擇，以複製資源 ID。
**返回 (選用)**
+ 選用，但如果沒有包含任何動作，則為必填。如果提供，將顯示返回導覽連結。
+ 是具有*標籤*的物件，將控制連結文字中顯示的內容。
**標題 (選用)**
+ 選用，如果提供將顯示文字作為標題。
**副標題 (選用)**
+ 選用，如果提供將顯示文字作為清單標題。
**輸入資料範例**
```
{
"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 ]
**表單檢視**允許您為客服人員提供輸入欄位，以收集所需的資料並將資料提交到後台系統。此檢視由預先定義的*區段*風格和標題的多個*區段*組成。主體包含排列在一列或網格佈局格式的各種輸入欄位。
**表單檢視**的互動式[文件](https://d3irlmavjxd3d8.cloudfront.net/?path=/docs/aws-managed-views-form--with-all)
下圖顯示租車預約的表單檢視範例。其擁有位置和日期欄位。
![\[以位置和日期欄位作為範例的表單檢視。\]](http://docs.aws.amazon.com/zh_tw/connect/latest/adminguide/images/form-view-sq.png)
**章節**
+ **表單檢視**中的位置，也就是輸入欄位和顯示欄位的位置。
+ **區段屬性**
+ **標題**
+ 章節的標題
+ **類型**
+ 區段類型
+ 表單區段 (處理使用者輸入的表單) 或資料區段 (顯示標籤和值的清單)
+ **項目**
+ 基於類型的資料清單。如果 `Type` 是 `DataSection`，則資料應該是屬性。如果 `Type` 是 `FormSection`，則資料應該是表單元件。
+ **可編輯**
+ 當區段類型為時 `DataSection`，在標題處顯示編輯按鈕。
+ Boolean
**精靈 (選用)**
+ 在檢視的左側顯示**進度追蹤器**。
+ 每個項目可以有一個標題、描述和選項。
+ 標題是必需的
**返回 (選用)**
+ 是具有標籤的物件或字串，將控制連結文字中顯示的內容。
**下一步 (選用)**
+ 當步驟不是最後一個步驟時，會使用此動作。
+ 這是一個物件 (FormActionProps) 或字串。如需更多詳細資訊，請參閱 [FormActionProps](https://d3irlmavjxd3d8.cloudfront.net/?path=/docs/aws-managed-views-common-configuration--page#actionProps)。
**取消 (選用)**
+ 當步驟不是第一個步驟時，會使用此動作。
+ 這是一個物件 (FormActionProps) 或字串。如需更多詳細資訊，請參閱 [FormActionProps](https://d3irlmavjxd3d8.cloudfront.net/?path=/docs/aws-managed-views-common-configuration--page#actionProps)。
**上一步 (選用)**
+ 當步驟不是第一個步驟時，會使用此動作。
+ 這是一個物件 (FormActionProps) 或字串。如需更多詳細資訊，請參閱 [FormActionProps](https://d3irlmavjxd3d8.cloudfront.net/?path=/docs/aws-managed-views-common-configuration--page#actionProps)。
**編輯 (選用)**
+ 當章節類型是 `DataSection` 時，會顯示此動作。
+ 這是一個物件 (FormActionProps) 或字串。如需更多詳細資訊，請參閱 [FormActionProps](https://d3irlmavjxd3d8.cloudfront.net/?path=/docs/aws-managed-views-common-configuration--page#actionProps)。
**屬性列 (選用)**
+ 選用，如果有提供，將在檢視上方顯示屬性列。
+ 具有必要屬性、**標籤**、**值** 和選用屬性 **連結類型**、**資源 ID**、**可複製** 和 **URL** 的物件清單。如需更多詳細資訊，請參閱[屬性](https://d3irlmavjxd3d8.cloudfront.net/?path=/docs/aws-managed-views-common-configuration--page#attribute)。
+ **連結類型** 可以是外部或連結的應用程式，例如案例。
+ 當是*外部*時，使用者可以導覽至一個新的瀏覽器頁面，該頁面使用 **URL** 設定。
+ 當是*案例*時，使用者可以在客服人員工作區上導覽至新案例詳細資訊，該案例使用資源 ID 設定。
+ **可複製**允許使用者透過您的輸入裝置進行選擇，以複製資源 ID。
**標題 (選用)**
+ 顯示頁面標題的字串。
**副標題 (選用)**
+ 頁面的次要訊息。
**錯誤文字 (選用)**
+ 選用，顯示伺服器端的錯誤訊息。
+ 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_tw/connect/latest/adminguide/images/confirmation-view-check-sq.png)
**下一頁**
+ 必要.
+ 下一個動作按鈕
+ 標籤 – 導覽按鈕的字串標籤。
**屬性列 (選用)**
+ 選用，如果有提供，將在檢視上方顯示屬性列。
+ 具有必要屬性、**標籤**、**值** 和選用屬性 **連結類型**、**資源 ID**、**可複製** 和 **URL** 的物件清單。如需更多詳細資訊，請參閱[屬性](https://d3irlmavjxd3d8.cloudfront.net/?path=/docs/aws-managed-views-common-configuration--page#attribute)。
+ **連結類型** 可以是外部或連結的應用程式，例如案例。
+ 當是*外部*時，使用者可以導覽至一個新的瀏覽器頁面，該頁面使用 **URL** 設定。
+ 當是*案例*時，使用者可以在客服人員工作區上導覽至新案例詳細資訊，該案例使用資源 ID 設定。
+ **可複製**允許使用者透過您的輸入裝置進行選擇，以複製資源 ID。
**標題 (選用)**
+ 顯示頁面標題的字串。
**副標題 (選用)**
+ 頁面的次要訊息。
**圖形 (選用)**
+ 顯示影像
+ 具有以下鍵的物件：
+ 包括 – 布林值，如果這是真的，則圖形將被包括在頁面中。
**輸入資料範例**
```
{
"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_tw/connect/latest/adminguide/images/solve-view-sq.png)
*當客服人員選擇卡片時，會顯示更多資訊。*下圖顯示開啟的卡片，其顯示預約的詳細資訊。
![\[開啟的卡片顯示預約詳細資訊。\]](http://docs.aws.amazon.com/zh_tw/connect/latest/adminguide/images/card-view-sq.png)
**章節**
+ 具有摘要和詳細資訊的物件清單。建立卡片和詳細資訊時必須提供。
+ 由摘要和詳細資訊組成。如需更多詳細資訊，請參閱[摘要和詳細資訊](https://d3irlmavjxd3d8.cloudfront.net/?path=/docs/aws-managed-views-cards--with-all)。
**屬性列 (選用)**
+ 選用，如果有提供，將在檢視上方顯示屬性列。
+ 具有必要屬性、**標籤**、**值** 和選用屬性 **連結類型**、**資源 ID**、**可複製** 和 **URL** 的物件清單。如需更多詳細資訊，請參閱[屬性](https://d3irlmavjxd3d8.cloudfront.net/?path=/docs/aws-managed-views-common-configuration--page#attribute)。
+ **連結類型** 可以是外部或連結的應用程式，例如案例。
+ 當是*外部*時，使用者可以導覽至一個新的瀏覽器頁面，該頁面使用 **URL** 設定。
+ 當是*案例*時，使用者可以在客服人員工作區上導覽至新案例詳細資訊，該案例使用資源 ID 設定。
+ **可複製**允許使用者透過您的輸入裝置進行選擇，以複製資源 ID。
**標題 (選用)**
+ 顯示頁面標題的字串
**返回 (選用)**
+ 是具有標籤的物件或字串，將控制連結文字中顯示的內容。如需更多詳細資訊，請參閱 [ActionProps](https://d3irlmavjxd3d8.cloudfront.net/?path=/docs/aws-managed-views-common-configuration--page#actionProps)。
**找不到相符項目 (選用)**
+ 是一個字串，顯示在卡下片面的按鈕。如需更多詳細資訊，請參閱 [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:- Customer provides incident information
- Customer provides receipts and agrees with amount
- 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 客服人員工作區的檢視
您可以自訂視圖資源配置的外觀和體驗。當您將輸入參數傳遞給 [顯示檢視](show-view-block.md) 區塊時，您可以利用 HTML 或 JSX 來執行此操作。
請完成下列步驟，以取得簡單範例，了解如何搭配使用 HTML 或 JSX 和 [顯示檢視](show-view-block.md) 區塊。
1. 透過 [顯示檢視](show-view-block.md) 區塊建立流程。
1. 開啟 [顯示檢視](show-view-block.md) 區塊的屬性頁面。
1. 在**檢視**下，從下拉式清單中選取**詳細資訊**。
1. 在**章節**區段中，選擇**設定 JSON**。
1. 複製貼上以下 JSON 程式碼。此程式碼會顯示 HTML 或 JSX 表達式的處理方式。
**HTML 範例**
```
{
"TemplateString":
"Steps:- Customer provides incident information
- Customer provides receipts and agrees with
amount
- 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 中的 UI 建置器以取得逐步指南中的資源 step-by-step
您可以使用 Amazon Connect 中的 UI 建置器，建立step-by-step指南中使用的檢視資源。透過 UI 建置器，您可以：
+ 將 UI 元件拖放到畫布。
+ 安排您的配置。
+ 編輯每個元件的屬性和樣式。
下圖顯示 UI 建置器頁面的範例。
![\[UI 建置器使用者介面。\]](http://docs.aws.amazon.com/zh_tw/connect/latest/adminguide/images/no-code-ui-builder-updates.png)
1. **建立**面板，您可以從 UI 元件程式庫中選擇，或使用一種可用範本。
1. 元件會在可摺疊容器中分組。將這些元件拖放到視圖資源的畫布。
1. 視圖資源的畫布。
1. **自訂**面板和全域設定圖示。您可以在此處設定頁面的全域屬性，例如欄位、對齊和顏色。您也可以在此處為畫布上的個別元件設定屬性。
下圖顯示**地址**元件的**屬性**索引標籤範例。當您選取動態圖示 (閃電) 時，欄位會在執行時期填入內容。
![\[自訂面板、屬性索引標籤、動態圖示。\]](http://docs.aws.amazon.com/zh_tw/connect/latest/adminguide/images/no-code-ui-builder-properties.png)
## 存取 UI 建置器
1. 登入 Amazon Connect 管理網站，網址為 https：//*instance name*.my.connect.aws/。使用管理員帳戶或其安全性設定檔具**頻道和流程 - 檢視**權限的帳戶。
1. 在 Amazon Connect 管理員網站中，選擇 **UI 管理**。
1. 選擇**建立檢視**。在**建立檢視**對話方塊中，指定檢視的名稱，然後選取**用途類型**。檢視有兩個目的：
+ **指南檢視**：用於建構單一或多步驟工作流程，這些工作流程可以向客服人員、終端客戶或管理員顯示，以在統一界面中存取聯絡人特定或第三方資料。
+ **工作區檢視**：這些檢視用於建置工作區頁面，例如 首頁，提供一般界面元件和功能，不受聯絡處理影響。
1. UI 建置器頁面隨即出現。快速從範本開始，或從頭建置檢視。
1. 選擇**建立新項目**。出現空的 UI 建置器頁面，如下圖所示。
![\[空的 UI 建置器頁面。\]](http://docs.aws.amazon.com/zh_tw/connect/latest/adminguide/images/no-code-ui-builder-blank-page.png)
# Amazon Connect 中 UI 建置器的 UI 元件程式庫
[Amazon Connect UI 元件文件中說明所有 UI 建置器元件](https://d3irlmavjxd3d8.cloudfront.net/?path=/docs/overview--page)。本文件顯示您可以在 UI 建置器中使用的個別 UI 元件，以及如何設定這些元件。
您可以在**建立**面板的程式庫索引標籤中，存取 UI 建置器中的**程式庫**元件。下圖顯示**程式庫**索引標籤和**容器**元件的範例。
![\[UI 建置器建立面板、程式庫索引標籤、UI 元件。\]](http://docs.aws.amazon.com/zh_tw/connect/latest/adminguide/images/user-interface-component-library-example.png)
## 使用容器來移動和整理元件
容器是製作視圖的核心構建區塊。您可以將 UI 元件 (包括其他容器) 移動到容器中，在頁面上以邏輯和視覺化方式分類。
為了在自訂頂層視圖設定時維持相對一致的頁面內容，建議您在所有視圖中使用容器。容器也配有欄位配置。您可以透過欄位配置，在容器內整理內容。
## 建立表單
若要建立表單供客服人員或客戶填寫和提交，請使用[表單](https://d3irlmavjxd3d8.cloudfront.net/?path=/story/aws-managed-views-form--with-all)元件。您可擇一方法：
+ 從 UI 程式庫將**表單**元件拖放到畫布。
+ 或者從**範本**索引標籤中選取**表單範例**範本。該範本使用表單元件。
[表單](https://d3irlmavjxd3d8.cloudfront.net/?path=/story/aws-managed-views-form--with-all)元件是一種特殊容器類型，您可以在其中插入輸入欄位和新增**提交**按鈕。與指南互動的使用者按下提交**按鈕**時，Amazon Connect 會將所有輸入到表格欄位的值傳到流程。此時，您可以在流程中使用 [AWS Lambda 函數](invoke-lambda-function-block.md) 區塊，自訂自己的業務邏輯，並將資料傳送/擷取至第三方系統。
下圖顯示具預留位置標籤和提交按鈕的**表單**元件範例。
![\[具預留位置標籤和提交按鈕的表單元件。\]](http://docs.aws.amazon.com/zh_tw/connect/latest/adminguide/images/user-interface-component-library-form-section-example.png)
# 在視圖中設定欄位配置、顏色和資料定義
本主題說明如何在 Amazon Connect UI 建置器中設定欄配置、顏色和動態資料欄位，以自訂聯絡中心客服人員的檢視。
在 UI 建置器中，**自訂**面板位於右側，如下圖所示。
![\[UI 建置器中的自訂面板範例，即全域設定圖示。\]](http://docs.aws.amazon.com/zh_tw/connect/latest/adminguide/images/no-code-ui-builder-customize-panel-example.png)
您可以使用**自訂**面板來設定：
+ 整個視圖資源的全域設定。
+ 元件層級的本機設定。每個元件都有自己的一組屬性。
您可以使用**自訂**面板來設定視圖，包括：
+ 欄位配置
+ 顏色
+ 動態資料映射
+ 範例資料
+ 靜態資料定義
## 設定視圖的全域配置和顏色
若要進行全域設定，請前往**自訂**面板，然後選擇全域設定圖示，如下圖所示。
![\[自訂面板，全域設定圖示。\]](http://docs.aws.amazon.com/zh_tw/connect/latest/adminguide/images/no-code-ui-builder-properties-global-settings-example.png)
您可以使用全域設定來設定視圖的整體配置和顏色：
+ 透過**對齊**區段，控制元件在視圖左側、中心或右側的相對位置。
+ 選擇三個顏色欄位：
+ 主要顏色
+ 次要顏色
+ 中性顏色
根據預設，視圖中的每個元件都會套用這些設定。但是，自訂元件時，您可以變更這些全域顏色設定。
## 配置欄位
視圖資源使用帶有 12 欄的柔性盒子模式。元件會佔據彼此的相對位置。元件不會完美符合像素地放置在畫布上。如此一來，視圖能互動式調整大小，而不遺失視圖組成。
在全域設定中，您可以決定如何分類欄位。例如，在**欄位**區段中，您可以將視圖分成兩部分，每部分六個欄位，如下圖所示。
![\[欄位區段，分為兩部分，每部分有六個欄位。\]](http://docs.aws.amazon.com/zh_tw/connect/latest/adminguide/images/no-code-ui-builder-properties-layout-columns-example-1.png)
下圖顯示客服人員看到的配置範例。
![\[視圖分為兩部分，每部分六個欄位，呈現給客服人員。\]](http://docs.aws.amazon.com/zh_tw/connect/latest/adminguide/images/no-code-ui-builder-properties-layout-columns-details-example-1.png)
您也可以使用**自訂**滑桿，變更這些群組的比例。例如，您可以設定讓視圖左側為四欄，右側為八欄，如下圖所示：
![\[一邊有四欄，另一邊有八欄的配置。\]](http://docs.aws.amazon.com/zh_tw/connect/latest/adminguide/images/no-code-ui-builder-properties-layout-columns-example-2.png)
下圖顯示使用者看到的配置範例。
![\[兩邊各有四欄，呈現給客服人員。\]](http://docs.aws.amazon.com/zh_tw/connect/latest/adminguide/images/no-code-ui-builder-properties-layout-columns-details-example-2.png)
# 在 Amazon Connect 的無程式碼建置器 UI 中設定動態欄位
本主題說明如何在建置客服人員和客戶介面時使用 Amazon Connect 中的無程式碼建置器 UI，以在元件中設定動態欄位，顯示執行時期資料，而非硬式編碼值。
在部分情況下，您可能希望能動態填入向客服人員或客戶顯示的資料，而不是硬式編碼。例如，如果您製作螢幕彈出視窗，您可能希望顯示客戶名稱和設定檔 ID。這種情況下，您便需要動態資料，因為每位聯絡人的這些欄位值可能都不同。
若要動態填入元件欄位：
1. 開啟該元件的屬性索引標籤。
1. 選取您想要在動態欄位旁顯示的動態圖示 (閃電圖示)。
最常需要動態值的欄位為：
+ 顯示欄位的**值**欄位。
+ 表單輸入的 **DefaultValue** 欄位。
技術上而言，任何客服人員可見和不可見的欄位都可以在執行時期動態決定。這就是為什麼**屬性**索引標籤的每個欄位都可以設為動態 (閃電圖示)。
例如，請參閱下圖的 **AttributesBar** 元件。
![\[屬性列元件，其值設為動態。\]](http://docs.aws.amazon.com/zh_tw/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_tw/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_tw/connect/latest/adminguide/images/no-code-ui-builder-dynamic-example2.png)
**重要**
動態參考的類型必須符合預期的欄位類型。例如，您無法在布林值欄位中使用字串型動態參考。下圖顯示動態參考不相符時的錯誤訊息範例。
![\[自訂面板，出現錯誤訊息，因為動態參考不符合欄位的預期類型。\]](http://docs.aws.amazon.com/zh_tw/connect/latest/adminguide/images/no-code-ui-builder-properties-dynamic-fields-example-4.png)
您也可以選擇將元件的所有屬性設為動態。下圖中，有關此屬性的所有內容 (包括標籤) 將根據執行時期傳遞到 [顯示檢視](show-view-block.md) 區塊的值決定。例如，**客戶名稱**現在是範例資料，您可以使用這些資料，以了解客服人員使用指南時會看到的內容。但客服人員無法檢視此值。
![\[自訂面板，客戶名稱作為範例資料。\]](http://docs.aws.amazon.com/zh_tw/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_tw/connect/latest/adminguide/images/no-code-ui-builder-properties-dynamic-6.png)
# 在顯示檢視區塊中設定顯示為流程分支的動作
在逐步指南中，使用者必須選擇按鈕才能繼續前往指南中的新頁面。您可以在 UI 建置器中設定這些按鈕，方法是為每個按鈕設定動作。例如，您可以設定提交表單的按鈕。
當使用者在執行時期選擇該按鈕，指南會傳送回應訊息至流程。**動作**值會從 [顯示檢視](show-view-block.md) 區塊決定分支路徑。
例如，視圖可以有三個具不同動作的按鈕。這些動作會在 [顯示檢視](show-view-block.md) 區塊上顯示為不同的分支路徑。如此一來，您就可以在指南流程中設定適當的分支邏輯。
下圖範例顯示無程式碼建置器**自訂**面板的**動作**區段。
![\[無程式碼 UI 建置器自訂面板的動作區段。\]](http://docs.aws.amazon.com/zh_tw/connect/latest/adminguide/images/no-code-ui-builder-setting-actions-in-flows-example.png)
# 儲存和發布視圖，以用於 Amazon Connect 的逐步指南
視圖資源具有版本控制支援。版本控制支援可讓您稽核甚至重複使用您在逐步指南中建立和/或使用的先前視圖。
1. 如果您尚未命名視圖，請輸入其名稱。命名視圖之後才能儲存視圖。
1. 變更視圖後，選擇**儲存**以更新資源。
1. 準備好在逐步指南流程中使用視圖後，選擇**發布**。視圖會顯示在 [顯示檢視](show-view-block.md) 區塊，供您在流程中使用
只有已發布的視圖版本會顯示在 [顯示檢視](show-view-block.md) 區塊，供流程中使用。
# 快速入門的 UI 建置器範本
UI 建置器包含 範本，您可以使用這些範本預先填入您的畫布與元件。若要存取範本：
1. 在無程式碼建置器中，開啟**建立**面板。
1. 選擇**範本**索引標籤。
1. 選擇您要使用的範本，然後將其拖放到視圖畫布。
畫布顯示範本後，您可以：
+ 新增更多元件
+ 刪除元件
+ 透過重新建置的視圖資源，套用任何其他類型的組態
如果您已經將 UI 元件放在畫布上，這些元件會被覆蓋，範本將取代它們的位置。這些變更會在您**儲存**視圖資源後完成。如果您誤用範本，您可以離開頁面並返回上次儲存的視圖資源版本。
下圖範例顯示**建立**面板中一些可用的範本：螢幕彈出視窗、處置、付款
![\[建立面板中有一些可以使用的範本：螢幕彈出視窗、處置、付款。\]](http://docs.aws.amazon.com/zh_tw/connect/latest/adminguide/images/no-code-ui-builder-templates-example.png)
# 在 Amazon Connect 客服人員工作區中，使用第三方應用程式的螢幕彈出功能
針對第三方應用程式的螢幕彈出功能，您可以使用逐步指南或應用程式鎖定。如需詳細資訊，請參閱[在客服人員工作區中存取第三方應用程式](3p-apps-agent-workspace.md)。聯絡人來電時，**指南**索引標籤會開啟為客服人員工作區中的第一個索引標籤。您可以使用流程[設定逐步指南](how-to-invoke-a-flow-sg.md)。
**注意**
當您設定視圖時：
確定在 中註冊的應用程式名稱與您提供給[應用程式](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_tw/connect/latest/adminguide/images/no-code-ui-builder-app-integration-1.png)
下圖顯示新增至流程並設為 **DefaultAgentUI** 事件勾點的範例 [Amazon Connect 中的流程區塊：設定事件流程](set-event-flow.md) 區塊。
![\[設為 DefaultAgentUI 事件勾點的事件流程區塊。\]](http://docs.aws.amazon.com/zh_tw/connect/latest/adminguide/images/no-code-ui-builder-app-integration-2.png)
# 使用範例資料，在 Amazon Connect 中預覽視圖
您可以使用範例資料來查看使用者將看到的視圖。您甚至可以看到在執行時期動態呈現的資料欄位。當欄位設為動態 (已選取閃電圖示) 時，您可以在該屬性的**範例資料**區段下，在輸入欄位中輸入範例資料。此範例資料僅供檢視。它只會出現在 Amazon Connect UI 建置器中。
例如，下圖顯示**郵寄地址表單**範例。
![\[自訂面板的 DefaultValue 和範例資料區段。\]](http://docs.aws.amazon.com/zh_tw/connect/latest/adminguide/images/no-code-ui-builder-sample-data-example.png)
+ **街道地址**是動態預設值。該值會在執行時期填入客戶設定檔中的地址。
+ 若要檢視客服人員最終會看到的 UI，您可以輸入文字預設值。
+ 該 `7 W 34th St` 值僅供在 Amazon Connect 管理員網站中顯示。它不會顯示給客服人員。
# 具有檢視的命名工作區
在工作區或客服人員工作區中使用檢視搭配自訂檢視時，UI 元件可以繼承工作區主題或使用自訂樣式。請記住幾個原則：
+ 設定工作區佈景主題時，當使用者不進行自訂編輯時，檢視的全域主要顏色、次要顏色、預設顏色和元件預設會繼承工作區層級樣式。
+ 當檢視具有 UI 建置器中定義的自訂全域樣式，例如主要、次要和預設顏色時，自訂樣式將優先於工作區。
+ 當元件在 UI 建置器中定義了自訂樣式時，元件樣式將優先於工作區。
+ 自訂元件顏色會保留在不同工作區。
# 使用檢視建置條件式 UIs
檢視的 UI 條件功能可讓客戶根據使用者與相同檢視中其他元件的互動，變更檢視中元件的屬性。例如，當使用者更新元件 A 中的輸入值，例如下拉式清單，元件 B，例如容器，將在檢視中隱藏。條件可讓您根據任務或互動的特定需求，為客服人員、最終客戶或主管建立量身打造的體驗。
若要建立 UI 條件，請造訪 UI 建置器，並將支援的元件拖曳到畫布上。請造訪畫面右側的元件設定面板，然後按一下 UI 條件索引標籤。UI 條件索引標籤會組織成收集下列輸入：
1. 變更類型：您要根據條件更新之所選元件的屬性
+ 可見性：讓元件變成可見或隱藏
+ DefaultValue：更新元件的預設值 (s)
+ 必要：更新元件的必要屬性
+ 停用：停用或啟用元件
+ 選項：更新使用者從元件中選取的可用選項
1. 選取觸發元件：將觸發套用條件的元件
1. 套用條件時：根據觸發元件的值評估的操作
1. 值相符時套用：將評估以觸發條件的觸發元件值
1. 套用結果：滿足觸發元件上的評估後，對所選元件所需的變更
在元件上設定條件時，會在 UI 建置器中以虛線概述。您可以按一下元件設定面板中條件索引標籤中的垃圾桶圖示來移除條件。
# 聯絡開始時，在 Amazon Connect 中調用指南
建立流程之後，您可以動態判斷要向使用者顯示哪些指南。若要執行此作業：
1. 將 [Amazon Connect 中的流程區塊：設定事件流程](set-event-flow.md) 區塊新增至流程。
1. 在**設定事件流程**區塊中，設定 **DefaultFlowForAgentUI** 事件勾點
向客服人員提供聯絡時，指南會立即開始。指南不會等待接受聯絡。
例如，透過檢查 IVR 回應、佇列名稱和客戶資訊，您可以在流程中建立分支邏輯，以決定要設定的流程 ID。使用**檢查屬性**區塊來設定條件式邏輯，使用**設定事件流程**區塊來設定要傳送給客服人員的流程。
下圖顯示**設定事件流程**區塊的**屬性**頁面。事件勾點設為**客服人員 UI 的預設流程**。
![\[設定事件流程區塊，客服人員 UI 事件勾點的預設流程。\]](http://docs.aws.amazon.com/zh_tw/connect/latest/adminguide/images/example-flow-id-sq.png)
# 在 Amazon Connect 聊天中部署逐步指南
您可以在 Amazon Connect 聊天中啟用逐步指南，以建立互動式的自助體驗。這項功能會收集內容並將其傳給客服人員，協助您更快速地解決客戶問題。您可以給客戶您為客服人員建置的指南，擁有更優質的組態管理。
## 在 Amazon Connect 聊天中啟用逐步指南
1. 請確認您已啟用並設定客服人員[逐步指南](step-by-step-guided-experiences.md)。設定指南後，請確認在保留聯絡等待客服人員接聽時，系統會彈出指南。
1. 設定流程，透過顯示視圖區塊在聊天流程中調用視圖，其設定方式與為客服人員設定此項目的方式相同。下列範例會在客戶選擇聊天泡泡時觸發指南。在將聊天轉移到客服人員之前，該流程會經過兩個視圖。
![\[設定您的流程，以使用顯示視圖區塊，在聊天流程中調用視圖。\]](http://docs.aws.amazon.com/zh_tw/connect/latest/adminguide/images/step-by-step-guides-chat-enable-1.png)
1. 從管理員頁面建立託管聊天小工具。將聊天流程設定為您建立的流程。
![\[從管理員頁面建立託管聊天小工具。將聊天流程設定為您建立的流程。\]](http://docs.aws.amazon.com/zh_tw/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. 將以下內容新增至允許 URL 清單，以允許逐步指南在聊天中運作：
+ `your-website-url/views/renderer/`
如果您使用 CSP 在網站上運作聊天小工具，您應該已經有 Cloudfront URL。例如：
+ `https://unique-id.cloudfront.net/amazon-connect-chat-interface.js`
**注意**
您也可以在聊天中使用指南與自訂建置通訊小工具。如需了解如何將逐步指南新增至自訂通訊小工具，請參閱 Github 上的 [Amazon Connect 聊天介面](https://github.com/amazon-connect/amazon-connect-chat-interface)。
# 在 Amazon Connect 中開始聯絡時，在客服人員工作區顯示聯絡內容
當您為客服人員工作區設計逐步指南時，您可以設定指南在聯絡開始時顯示聯絡屬性。這可以在聯絡開始時向客服人員提供所需內容，讓他們直接解決問題。此功能有時稱為螢幕彈出畫面。
若要在聯絡開始時顯示聯絡屬性，您可以設定**詳細資訊檢視**，這是 [AWS 受管檢視](view-resources-managed-view.md)。
**詳細資訊檢視**向客服人員顯示資訊，並提供他們可以採取的動作清單。**詳細資料檢視**的常見使用案例是在通話開始時向客服人員顯示螢幕彈出視窗。
+ 此檢視中的動作可以讓客服人員繼續逐步指南中的下一個步驟。這些動作也可以用來調用全新的工作流程。
+ **區段**是唯一的必要元件。您可以在區段中配置要顯示給客服人員的頁面的主體。
+ 此檢視支援選用元件，例如**屬性列**。
**提示**
如需詳細了解顯示**詳細資訊檢視**預覽的互動式文件，請參閱[詳細資訊](https://d3irlmavjxd3d8.cloudfront.net/?path=/docs/aws-managed-views-detail--with-all)。
下圖顯示**詳細檢視**的範例。擁有一個頁面標題、描述和四個範例。
![\[詳細資訊檢視，包含頁面標題、說明和四個具有屬性的範例。\]](http://docs.aws.amazon.com/zh_tw/connect/latest/adminguide/images/details-view-page-heading-sq.png)
**章節**
+ 內容可以是靜態字串、範本字串或鍵值配對。可以是單一資料點或清單。如需更多詳細資訊，請參閱[範本字串](https://d3irlmavjxd3d8.cloudfront.net/?path=/docs/aws-managed-views-common-configuration--page#templatestring)或[屬性列](https://d3irlmavjxd3d8.cloudfront.net/?path=/docs/aws-managed-views-common-configuration--page#attribute-section)區段。
**屬性列 (選用)**
+ 選用，如果有提供，將在視圖上方顯示屬性列。
+ 具有必要屬性、**標籤**、**值**和選用屬性**連結類型**、**資源 ID**、**可複製**和 **URL** 的物件清單。如需更多詳細資訊，請參閱[屬性](https://d3irlmavjxd3d8.cloudfront.net/?path=/docs/aws-managed-views-common-configuration--page#attribute)。
+ **連結類型**可以是外部或 Amazon Connect 應用程式，例如 Amazon Connect Cases。
+ 如果是*外部應用程式*，客服人員可以導覽至新的瀏覽器頁面，該頁面使用 **URL** 設定。
+ 如果是*案例*，客服人員可以在客服人員工作區上導覽至新案例詳細資訊，該案例使用資源 ID 設定。
+ **可複製**允許客服人員透過您的輸入裝置進行選擇，以複製資源 ID。
**返回 (選用)**
+ 選用，但如果未包含任何動作，此則為必要。如果有提供，畫面將顯示返回導覽連結。
+ 是具有*標籤*的物件，將控制連結文字中顯示的內容。
**標題 (選用)**
+ 選用，如果提供將顯示文字作為標題。
**描述 (選用)**
+ 選用，如果提供，將在標題下方顯示描述文字。
**動作 (選用)**
+ 選用。如果提供，將在頁面底部顯示動作清單。
**輸入範例**
```
{
"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 聯絡中心客服人員在聯絡結束時輸入處置代碼
逐步指南的一個簡單使用案例是讓客服人員在聯繫結束時輸入處置代碼。為了讓您的客服人員能夠在聯繫結束時設定處理代碼，或完成其他呼叫後工作，請建立具有一個 [顯示檢視](show-view-block.md) 區塊和 [設定聯絡屬性](set-contact-attributes.md) 區塊的流程。
+ 使用 [顯示檢視](show-view-block.md) 區塊建立**表單**檢視，為客服人員提供必要的輸入欄位。
+ 使用 [設定聯絡屬性](set-contact-attributes.md) 區塊將回應儲存為聯絡屬性。
此外，您也可以使用 [AWS Lambda 函數](invoke-lambda-function-block.md) 區塊將輸入的資料傳送到外部系統。
建立流程之後，您可以在聯絡流程中將 **DisconnectFlowForAgentUI** 設定為自訂屬性，靈活決定聯絡結束後要呈現的內容。只要於聯絡結束之前設定此屬性，客服人員 UI 就會在聯絡結束後顯示此表單。
下圖顯示 [設定聯絡屬性](set-contact-attributes.md) 的屬性頁面。配置為使用者定義屬性中儲存回應的配置。
![\[設定聯絡屬性區塊的屬性頁面。\]](http://docs.aws.amazon.com/zh_tw/connect/latest/adminguide/images/dispo-codes-sq.png)
# 使用 Amazon Connect Contact Lens 防止 PII 出現在聯絡文字記錄中
根據預設，透過指南傳遞的任何資訊都會包含在聯絡文字記錄中。為了防止 PII 出現在您的聯絡文字記錄中，請在逐步指南流程中使用[設定記錄和分析行為區塊](set-recording-behavior.md)、[啟用 Contact Lens](sensitive-data-redaction.md)，並啟用敏感日期的修訂文字。
如需如何啟用 PII 修訂文字的完整詳細資訊，請參閱 [啟用修訂敏感資料](enable-analytics.md#enable-redaction)。
# 將檢視與 Connect 資源整合
您可以建立在指南中使用的檢視，該指南透過使用檢視整合的指定間隔輪詢即時資料來源。檢視整合是可從 UI 建置器的全域設定面板取得的檢視層級組態，如下所示。
檢視整合面板可讓您在檢視上設定和參考資料。首先設定要與 整合的新工具。工具是檢視與 Connect 資源之間的特定整合點。設定工具需要下列屬性：
1. 整合名稱：整合的自訂名稱，稍後將用於參考檢視本身上的資料
1. 整合類型：檢視與 Connect 資源之間的整合格式
1. 工具：檢視將整合的整合來源，例如流程模組
1. 版本或別名：檢視將呼叫的流程模組版本/別名，以擷取新資訊
1. 啟用重新整理 （秒）：在指南中執行檢視時呼叫整合的布林值
1. 重新整理間隔：檢視將呼叫整合以擷取資訊的間隔
+ 輪詢即時資料來源最適合在單一標籤環境中運作。如果使用指南應用程式開啟多個索引標籤，則每個檢視都會輪詢資料來源，這可能會導致調節和某些檢視過時
1. 工具輸入物件：JSON 物件，代表從檢視傳送至來源 （例如流程模組） 的資料，以擷取最新的相關資訊來更新檢視
設定整合後，您將可以使用該檢視來參考整合的輸出。UI 建置器中顯示的參考是以特定整合提供的輸出資料為基礎。
若要利用整合中的參考資料，您必須先了解如何參考來自 UI 元件的資料及其屬性。與流程和檢視 中聯絡屬性的參考方式類似`($.Attributes.MyCustomAttribute)`，您可以使用下列語法來參考整合的輸出資料：`$.#[IntegrationName].[ReferenceObject]`。請記住，您有責任確保使用的參考物件是以檢視元件屬性可接受的正確格式傳回。若要了解整合輸出參考，請造訪模組組態頁面。
在執行時間，載入具有整合的檢視時，它會填入檢視結構描述中定義的整合資料。此外，如果您設定重新整理間隔，檢視將在每個間隔叫用整合，如果有新資料，檢視將提示使用者使用最新資訊重新整理檢視。
# 在 Workspace for Manager 中使用逐步指南
您可以使用角色型工作區中的指南來執行幾乎任何 Connect 使用者可以遵循的結構化工作流程。在繼續之前，請確定您已先建立以角色為基礎的工作區。
在 UI 建置器中，找到「Connect Application」元件並將其拖曳到畫布上。此元件可讓您在 檢視中嵌入第一方 Connect 應用程式。您可以使用下列屬性來設定元件：
1. 應用程式命名空間：要內嵌在元件中的應用程式類型
1. ContactFlowId：如果選取「指引」做為應用程式命名空間，請選擇指南的聯絡流程 ID，以在元件中執行。
使用 Connect 應用程式元件時，使用者可以按一下「開始」按鈕來啟動指南，這會建立背景聊天聯絡人以操作指南。引導式工作流程完成後，使用者可以按一下「重新啟動」按鈕，從流程的開頭開始指南。請記住，不支援在已在指南中使用的檢視中巢狀化指南應用程式元件。Connect 應用程式元件中的指南只能內嵌在靜態檢視中，做為角色型工作區中的頁面。
# 使用檢視建立以角色為基礎的工作區頁面
檢視可讓您在指派給不同 Connect 使用者的以角色為基礎的工作區中建立自訂頁面。若要建立新的檢視，請先選取適當的工作區用途。存取 UI 建置器後，您可以從工作區檢視中可供使用的可用 UI 元件進行篩選和選取。
專為工作區頁面設計的檢視可做為針對特定使用者群組量身打造的單一步驟界面。為了確保最佳功能，請使用相容的元件，例如警示、浮動切換和容器。工作區檢視也可以納入資料表元件，這可讓商業使用者即時管理聯絡中心操作。這包括關鍵的使用案例，例如通話路由調整和實作緊急通訊協定。
## 將輸入資料從工作區傳遞至檢視
使用檢視建立工作區頁面時，您可以在執行時間透過頁面組態精靈傳遞輸入資料。這種動態方法可讓您建立可重複使用的檢視，以適應不同的內容，而無需為每個使用案例進行單獨的實作。
例如，建立使用者首頁的檢視時，您可能想要向不同的使用者顯示個人化的問候語。您可以建立具有動態標頭元件的單一檢視，並在多個工作區中重複使用該檢視，而不是為每個工作區建立唯一的檢視，每個檢視都有自己的自訂訊息內容。
# 自訂客服人員工作區的主題
根據預設，客服人員工作區會使用 Amazon Connect 佈景主題，其中包含標誌、favicon、字型系列和調色盤。您可以使用佈景主題來自訂客服人員工作區的視覺效果，使其與組織的品牌身分保持一致。若要自訂客服人員工作區的視覺效果，[請建立工作區](amazon-connect-workspaces.md)、[自訂其主題](custom-theme.md)，並將其指派給客服人員。
![\[具有自訂佈景主題的客服人員工作區。\]](http://docs.aws.amazon.com/zh_tw/connect/latest/adminguide/images/agent-workspace-custom-theme.png)
客服人員可以在淺色和深色模式之間進行選擇，以符合其偏好設定。若要變更模式，請前往客服人員工作區右上角的使用者設定。
![\[光線模式下的客服人員工作區。\]](http://docs.aws.amazon.com/zh_tw/connect/latest/adminguide/images/agent-workspace-light-mode.png)
![\[在深色模式下的客服人員工作區。\]](http://docs.aws.amazon.com/zh_tw/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)
+ [在客服人員工作區中存取第三方應用程式](3p-apps-agent-workspace.md)
+ [存取工作清單應用程式](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_tw/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 開頭，除非是本地主機則例外。
**注意**
並非所有 URL 都可以進行 iframed。有兩種方法來檢查 URL 是否可以 iframed：
有一個第三方工具可用於檢查是否可以對 URL 進行 iframed，稱為 [Iframe Tester](http://iframetester.com/)。
如果 URL 可以 iframed，將在此頁面中呈現預覽。
如果 URL 不能被 iframed，將在此頁面上的預覽中顯示錯誤。
該網站有可能顯示錯誤，並且仍可以在客服人員工作區中對 URL 進行 iframed。這是因為應用程式開發人員可以將其應用程式鎖定為僅能嵌入到工作區中，而無法嵌入其他地方。如果您從應用程式開發人員收到此應用程式，我們建議您仍然嘗試將此應用程式整合至客服人員工作區。
對技術人員使用者：檢查您嘗試整合之應用程式的安全性原則內容。
Firefox：Hamburger 功能表 > 更多工具 > 網頁開發者工具>網路
Chrome：自訂及管理功能表 > 更多工具 > 開發人員工具 > 網路
其他瀏覽器：在開發人員工具中找到網路設置。
內容安全策略框架祖先指令應該是 `https://your-instance.my.connect.aws`。
如果指令是 `same origin` 或 `deny`，則此 URL 無法透過 AWS/Amazon Connect 進行 iframed
如果應用程式無法 iframed，您可以執行以下操作：
+ 如果您控制應用程式/URL，您可以更新應用程式的內容安全性政策。請遵循應用程式開發人員的最佳實務/確保應用程式僅能嵌入[此處](https://docs.aws.amazon.com/agentworkspace/latest/devguide/recommendations-and-best-practices.html)的 Amazon Connect 客服人員工作區。
+ 如果您無法控制應用程式/URL，您可以嘗試聯絡應用程式開發人員，並要求他們更新應用程式的內容安全性政策。
1. **已核准的來源 (選用)**：允許清單允許的 URL (如果與存取 URL 不同)。URL 必須安全並以 https 開頭，除非是本地主機則例外。
1. 為[事件和請求](3p-apps-events-requests.md)新增權限。
以下範例說明如何啟動新應用程式，並透過使用 AWS 管理主控台指定權限。在此範例中，會將六個不同的權限指定給應用程式。
**提供基本資訊和存取詳細資訊**
1. **執行個體關聯**
1. 您可以授予此帳戶區域內的任何執行個體存取此應用程式。
1. 雖然將整合與執行個體建立關聯是選用的，但除非您將此應用程式與執行個體建立關聯 (instance)，否則您將無法使用此應用程式。
**注意**
對於 MCP 伺服器，您只能選取使用所選閘道的探索 URL 設定的執行個體。
![\[供基本資訊和存取詳細資訊。\]](http://docs.aws.amazon.com/zh_tw/connect/latest/adminguide/images/integrations-add-basic-info.png)
**授與應用程式進行工作區資料整合的權限**
![\[授與應用程式進行工作區資料整合的權限。\]](http://docs.aws.amazon.com/zh_tw/connect/latest/adminguide/images/integrations-add-permissions.png)
**Iframe 組態**
![\[Iframe 組態。\]](http://docs.aws.amazon.com/zh_tw/connect/latest/adminguide/images/integrations-add-iframe-config.png)
1. 選擇**新增整合作業**。
1. 如果已成功建立整合，您會收到**整合詳細資訊**頁面，而且您會看到成功橫幅。
![\[授與應用程式進行工作區資料整合的權限。\]](http://docs.aws.amazon.com/zh_tw/connect/latest/adminguide/images/integrations-view.png)
您可以編輯現有應用程式的特定屬性，例如顯示名稱、存取 URL 和權限。
1. 如果建立應用程式或將應用程式與執行個體關聯時發生錯誤，您將會看到錯誤訊息，而且您可以採取對應的動作來修正問題。
## 刪除整合
如果您不再想要在可預見的未來使用 整合，則可以將其刪除。如果您暫時想停止使用，但是在可預見的未來可能想要再次使用，建議您與執行個體取消關聯，以避免再次新增。若要刪除整合，請導覽至 AWS 管理主控台，選取整合，然後選擇**刪除**。
**疑難排解**
+ 如果整合與任何執行個體相關聯，則操作將會失敗。您必須先取消整合與任何執行個體的關聯。然後，您可以返回並刪除它。
**提示**
如果您在 2023 年 12 月 15 日之前建立整合，則更新整合與執行個體 (instance) 的關聯時可能會遇到問題。這是因為您需要更新 IAM 政策。
![\[由於許可不足，嘗試刪除整合時發生 IAM 錯誤\]](http://docs.aws.amazon.com/zh_tw/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 分鐘，才能看到應用程式出現在**安全性設定檔**頁面的**客服人員應用程式**區段。
您加入執行個體 AWS 並與 Amazon Connect 執行個體相關聯的任何應用程式都會顯示在**安全性設定檔**頁面的**客服人員應用程式**區段中，如下圖所示。
![\[安全性設定檔頁面的客服人員應用程式區段。\]](http://docs.aws.amazon.com/zh_tw/connect/latest/adminguide/images/assign-security-profile-3p-apps-displayed.png)
您還需要授予對 CCP 的存取權限，以便顯示應用程式啟動器功能表。
![\[已套用 CCP 存取連絡控制面板的存取權限。\]](http://docs.aws.amazon.com/zh_tw/connect/latest/adminguide/images/assign-security-profile-3p-apps-ccp-permissions.png)
指派授權後，請參閱如何 [在 Amazon Connect 客服人員工作區中存取第三方應用程式](3p-apps-agent-workspace.md)。
# 授予第三方應用程式 Amazon Connect 存取權限時的 Iframe 權限
透過 AWS 主控台的 `onboarding` UI 或 API 設定第三方應用程式時，您可以指定 `iframe` 權限設定。即使已設定應用程式，也可以修改這些權限。
根據預設，所有第三方應用程式都會獲得四個基本 `iframe` 權限：`allow-forms`、`allow-popups`、`allow-same-origin` 和 `allow-scripts`。部分應用程式可能需要增強功能，因此可以在應用程式註冊期間要求其他 `iframe` 權限。
**注意**
下列權限的瀏覽器相容性可能因不同瀏覽器實作而有所不同。
| 權限 | Description |
| --- | --- |
| Allow | |
| clipboard-read | 控制是否允許應用程式從剪貼簿讀取資料。Chrome 目前支援此功能，但 Firefox 和 Safari 不支援。 |
| clipboard-write | 控制是否允許應用程式在剪貼簿寫入資料。Chrome 目前支援此功能，但 Firefox 和 Safari 不支援。 |
| 麥克風 | 控制是否允許應用程式使用音訊輸入裝置。 |
| 攝影機 | 控制是否允許應用程式使用影片輸入裝置。 |
| 沙盒 | |
| allow-forms | 允許頁面提交表單。根據預設支援此功能。 |
| allow-popups | 允許應用程式開啟彈出視窗。根據預設支援此功能。 |
| allow-same-origin | 如果未使用此字符，系統會將資源視為來自一律不符合 same-origin 政策的特殊來源 (可能會阻止存取資料儲存/Cookie 和部分 JavaScript API)。根據預設支援此功能。 |
| allow-scripts | 允許頁面執行指令碼。根據預設支援此功能。 |
| allow-downloads | 允許透過具下載屬性的 或 元素，以及引導至檔案下載的導覽來下載檔案 |
| allow-modal | 允許頁面透過 Window.alert()、Window.confirm()、Window.print() 和 Window.prompt() 開啟模態視窗，同時允許開啟