本文為英文版的機器翻譯版本，如內容有任何歧義或不一致之處，概以英文版為準。 # Amazon Connect 中的流程區塊：顯示檢視 本主題定義流程區塊建立逐步工作流程指南，以協助客服人員提供一致的客戶體驗，以及建立指南以啟用互動式客戶體驗。 ## Description + 使用此流程區塊來： + 為使用 Amazon Connect 客服人員工作區的客服人員建立[逐步指南](step-by-step-guided-experiences.md)。這些指南是為客服人員提供指示的工作流程，協助他們以一致的方式與您的客戶互動。 + 建立表單以收集聊天體驗中客戶的資訊。 + 當聯絡轉接到包含**顯示檢視**區塊的流程時，稱為[檢視](view-resources-sg.md)的 UI 頁面會在客服人員工作區或客戶的聊天 UI 中呈現。 ## 此區塊的使用案例 此流程區塊旨在引導客服人員完成以下步驟： + 為客戶執行常見任務，例如進行保留、管理付款和提交新訂單。 + 根據通知客戶所提交退款請求的範本傳送電子郵件。電子郵件結構一律相同，但特定值可能有所不同，例如訂單號碼、退款金額和付款帳戶。您可以設定客服人員的顯示檢視區塊，以提供這些類型的資訊。 + 在現有的客服人員工作區中建立新的 CRM 項目。使用聯絡屬性在表單中預先填入相關資訊，例如客戶的名稱和電話號碼。 以及引導客戶完成聊天對話中的步驟，以便： + 透過提供其信用卡資訊進行付款。 + 提供 PII 資訊，例如用於更新其設定檔的住家地址。 + 提供其客戶帳戶 ID 來接收帳戶資訊。 ## 聯絡類型 您可以在由 [設定事件流程](set-event-flow.md) 區塊起始的引導流程中使用**顯示檢視**區塊，該區塊來自任何聯絡類型，包括語音、聊天、電子郵件或任務。如果您打算向客戶展示指南，則可以直接在主要聊天流程中使用**顯示檢視**區塊。 | 聯絡人類型 | 支援？ | | --- | --- | | 語音 | 是 | | 聊天 | 是 | | 任務 | 是 | | Email | 是 | ## 流程類型 您可以在下列[流程類型](create-contact-flow.md#contact-flow-types)中使用此區塊： | 流程類型 | 支援？ | | --- | --- | | 入站流程 | 是 | | 客戶保留通話流程 | 否 | | 客戶低語流程 | 否 | | 外撥低語流程 | 否 | | 客服人員保留流程 | 否 | | 客服人員低語流程 | 否 | | 轉接客服人員流程 | 否 | | 轉接至佇列流程 | 否 | ## 如何設定此區塊 您可以使用 Amazon Connect 管理員網站或使用 Amazon Connect Flow 語言中的 [ShowView](https://docs.aws.amazon.com/connect/latest/APIReference/participant-actions-showview.html) 動作來設定**顯示檢視**區塊。 **Topics** + [選擇檢視資源](#choose-viewresource) + [如何使用「手動設定」選項](#view-setmanually) + [如何使用動態設定選項](#view-setdynamically) + [如何使用「設定 JSON」選項](#show-view-block-example-json) + [此檢視具有敏感資料](#showview-sensitive-data) + [流程區塊分支](#showview-branches) + [其他組態提示](#showview-tips) + [此區塊產生的資料](#showview-data) ### 選擇檢視資源 Amazon Connect 包含一組檢視，您可以新增客服人員的工作區。您可以在**檢視**方塊中指定檢視，如下圖所示： ![\[「顯示檢視」區塊的屬性頁面。\]](http://docs.aws.amazon.com/zh_tw/connect/latest/adminguide/images/show-view-block-form.png) 以下是這些 AWS 受管檢視的簡短描述。如需每個檢視的詳細資訊，請參閱 [在 Amazon Connect 中設定客服人員工作區的 AWS 受管檢視](view-resources-managed-view.md)。也支援客戶受管檢視。如需詳細資訊，請參閱[客戶受管檢視](https://d3irlmavjxd3d8.cloudfront.net/?path=/docs/customer-managed-views-customer-managed-views--page)文件。 + **詳細資訊檢視**：向客服人員顯示資訊，並提供他們可以採取的動作清單。詳細資料檢視的常見使用案例是在通話開始時向客服人員顯示螢幕彈出視窗。 + **清單檢視**：將資訊顯示為包含標題和說明的項目清單。項目可以做為帶有附加動作的連結。還可以選擇支持標準的返回導覽和持久性的內容標題。 + **表單檢視**：為客戶和客服人員提供輸入欄位，以收集所需的資料並將資料提交到後端系統。此檢視由預先定義的區段風格和標題的多個區段組成。主體包含排列在一列或網格佈局格式的各種輸入欄位。 + **確認檢視**：在提交表單或完成動作後向客戶和客服人員顯示的頁面。在此預先建置的範本中，您可以提供發生的事情、任何下一個步驟和提示的摘要。確認檢視支援持續性的屬性列、圖示或影像、標題和子標題，以及返回首頁導覽按鈕。 + **卡片檢視**：可讓您透過向客戶和客服人員提供主題清單來引導他們，以便在將聯絡呈現給客服人員時從中選擇。 **顯示檢視**區塊的屬性會根據您選擇的**檢視**資源動態填入。例如，如果您選擇**表單**，您可以設定顯示的**下一個**和**上一個**動作。這些只是檢視上的幾個動作。 ![\[檢視設定為表單，版本設定為 1。\]](http://docs.aws.amazon.com/zh_tw/connect/latest/adminguide/images/show-view-block-version2.png) 下列各節說明如何手動、動態或使用 JSON 選項來設定**表單**動作。 ### 如何使用「手動設定」選項 1. 在**屬性**頁面的**檢視**區段中，從下拉式功能表中選擇**表單**，並將**使用版本**設定為預設值 1。下圖顯示以這些選項設定的**屬性**頁面。 ![\[檢視設定為表單，版本設定為 1。\]](http://docs.aws.amazon.com/zh_tw/connect/latest/adminguide/images/show-view-block-version1.png) 1. **屬性**頁面會根據表單檢視顯示一組欄位。選擇**手動設定**，然後輸入要在檢視 UI 元件上轉譯的文字。下圖顯示**下一個**和**上一個** UI 元件。元件的顯示名稱已手動設定為**下一個**和**上一個**。這就是轉譯逐步指南時，客服人員工作區上會出現的內容。 ![\[手動設定下一個和上一個 UI 元件。\]](http://docs.aws.amazon.com/zh_tw/connect/latest/adminguide/images/show-view-block-version2.png) ### 如何使用動態設定選項 1. 在**屬性**頁面的**檢視**區段中，從下拉式功能表中選擇**表單**，並將**使用版本**設定為預設值 1。下圖顯示以這些選項設定的**屬性**頁面。 ![\[檢視設定為表單，版本設定為 1。\]](http://docs.aws.amazon.com/zh_tw/connect/latest/adminguide/images/show-view-block-version1.png) 1. **屬性**頁面會根據表單檢視顯示一組欄位。選擇**動態設定**。在**命名空間**下拉式功能表中，選擇聯絡屬性，然後選擇索引鍵。下圖顯示將在逐步指南中動態轉譯的**標題**，以顯示客戶的姓氏。 ![\[檢視 UI 範本中的標題。\]](http://docs.aws.amazon.com/zh_tw/connect/latest/adminguide/images/show-view-block-dynamic.png) ### 如何使用「設定 JSON」選項 本節將逐步介紹如何使用 **設定 JSON** 選項的範例。 1. 在顯示檢視區塊的**屬性**頁面的**檢視**區段中，從下拉式功能表中選擇**表單**，並將**版本**設定為預設值 **1**。下圖顯示這些選項。 ![\[檢視設定為表單，版本設定為 1。\]](http://docs.aws.amazon.com/zh_tw/connect/latest/adminguide/images/show-view-block-version1.png) 1. 當您選擇**表單**檢視時，檢視的輸入結構描述會顯示在**屬性**頁面上。結構描述具有下列區段，您可以在其中新增資訊：**Sections**、**AttributeBar**、**Back**、**Cancel**、**Edit**、**ErrorText** 等。 1. 下圖顯示 **AttributeBar** 參數，以及**使用 JSON 設定**選項。若要檢視您貼上的所有 JSON，請按一下方塊的角落並下拉。 ![\[輸入參數。\]](http://docs.aws.amazon.com/zh_tw/connect/latest/adminguide/images/show-view-block-json.png) **提示** 如果 JSON 無效，請修復任何錯誤。下圖顯示範例錯誤訊息，因為有多餘的逗號。 ![\[JSON 無效的錯誤訊息。\]](http://docs.aws.amazon.com/zh_tw/connect/latest/adminguide/images/show-view-block-json-invalid.png) 1. 選取自訂檢視時，您可能想要透過**設定 JSON** 選項來設定動態輸入的值。執行此操作時，您可以選擇**套用範例資料**，以包含範例資料的 JSON 結構描述預先填入輸入。 確保為要在執行時間填入的 UI 建置器中的動態資料 （例如 \$1.Channel) [設定動態參考](no-code-ui-builder-properties-dynamic-fields.md)。 下圖顯示**套用範例資料**選項。 ![\[顯示檢視區塊上的套用範例資料選項。\]](http://docs.aws.amazon.com/zh_tw/connect/latest/adminguide/images/apply-sample-data.png) 1. 準備就緒時，請選擇 **儲存** 並發布。 下列程式碼範例示範如何以流程語言的 [ShowView](https://docs.aws.amazon.com/connect/latest/APIReference/participant-actions-showview.html) 動作來表示此相同組態： ``` { "Parameters": { "ViewResource": { "Id": "arn:aws:connect:us-west-2:aws:view/form:1" }, "InvocationTimeLimitSeconds": "2", "ViewData": { "Sections": "Sections", "AttributeBar": [ { "Label": "Example", "Value": "Attribute" }, { "Label": "Example 2", "Value": "Attribute 2" }, { "Label": "Example 3", "Value": "Case 123456", "LinkType": "case", "ResourceId": "123456", "Copyable":true }, { "Label": "Example 3", "Value": "Case 123456", "LinkType": "case", "ResourceId": "https:example.com" } ], "Back": { "Label": "Back" }, "Cancel": { "Label": "Cancel" }, "Edit": "Edit", "ErrorText": "ErrotText", "Heading": "$.Customer.LastName", "Next": "Next", "Previous": "Previous", "SubHeading": "$.Customer.FirstName", "Wizard": { "Heading": "Progress tracker", "Selected": "Step Selected" } } }, "Identifier": "53c6be8a-d01f-4dd4-97a5-a001174f7f66", "Type": "ShowView", "Transitions": { "NextAction": "7c5ef809-544e-4b5f-894f-52f214d8d412", "Conditions": [ { "NextAction": "7c5ef809-544e-4b5f-894f-52f214d8d412", "Condition": { "Operator": "Equals", "Operands": [ "Back" ] } }, { "NextAction": "7c5ef809-544e-4b5f-894f-52f214d8d412", "Condition": { "Operator": "Equals", "Operands": [ "Next" ] } }, { "NextAction": "7c5ef809-544e-4b5f-894f-52f214d8d412", "Condition": { "Operator": "Equals", "Operands": [ "Step" ] } } ], "Errors": [ { "NextAction": "b88349e3-3c54-4915-8ea0-818601cd2d03", "ErrorType": "NoMatchingCondition" }, { "NextAction": "7c5ef809-544e-4b5f-894f-52f214d8d412", "ErrorType": "NoMatchingError" }, { "NextAction": "b88349e3-3c54-4915-8ea0-818601cd2d03", "ErrorType": "TimeLimitExceeded" } ] } } ``` ### 此檢視具有敏感資料 建議您在向客戶收集信用卡資料、住家地址或任何其他類型的敏感資料時，啟用**此檢視具有敏感資料**。透過啟用此選項，客戶提交的資料將不會記錄在文字記錄或聯絡人記錄中，也不會讓客服人員看到 (預設值)。如果您的聯絡流程中已開啟**設定記錄行為**，請記得關閉記錄，以確保流程日誌中不包含敏感的客戶資料。 ![\[敏感資料檢視核取方塊。\]](http://docs.aws.amazon.com/zh_tw/connect/latest/adminguide/images/show-view-block-form-sensitive-data.png) **提示** 使用顯示檢視區塊建置[流程模組](contact-flow-modules.md)，該區塊已啟用**此檢視具有敏感資料**、具有 Lambda 函式，以及提示可建立可重複使用的付款體驗模組，可放置在現有的傳入聯絡流程中。 ### 流程區塊分支 下圖顯示已設定**顯示檢視**區塊的範例。此區塊支援條件式分支，也就是說，分支取決於選取的檢視。它也支援**錯誤**和**逾時**分支。 ![\[已設定的「顯示檢視」區塊。\]](http://docs.aws.amazon.com/zh_tw/connect/latest/adminguide/images/show-view-block-sq-config.png) + 條件式分支：這些分支是根據在**顯示檢視**區塊上選取的檢視。上圖顯示已針對**表單**檢視設定的區塊，以及下列動作：**上一步**、**下一步**和**無相符項目**。 + 對於此特定組態，在執行時間，聊天聯絡會根據客服人員在檢視上點擊的內容，向下轉接至**上一步**或**下一步**分支。只有當使用者擁有具有自訂動作值的動作元件時，才能使用 **無相符項目**。 + **錯誤**：無法執行 (亦即，無法在客服人員工作區上轉譯檢視或擷取檢視輸出動作) 會導致取得**錯誤**分支。 + **逾時**：指定客服人員應耗費多少時間完成逐步指南中的此步驟。如果客服人員完成步驟的時間超過逾時 (例如，客服人員未在指定的時間量內提供必要資訊)，則該步驟會採用逾時分支。 當步驟逾時，逐步指南可以遵循流程中定義的邏輯來判斷下一個步驟。例如，下一個步驟可能是重試要求資訊，或停止指南體驗。 客戶此時已連線至客服人員，因此客戶的體驗不會因為逾時而有所變更。 ### 其他組態提示 使用此記錄設定、此區塊和 Lambda 建置流程模組，以建立可重複使用的付款體驗模組，保持記錄關閉，並可放置在任何現有的傳入流程中。 將下列安全性設定檔許可指派給客服人員，讓他們可以使用逐步指南： + **客服人員應用程式 - 自訂檢視 - 全部**：此許可可讓客服人員查看客服人員工作區中的逐步指南。 將下列安全性設定檔許可指派給經理和業務分析師，讓他們可以建立逐步指南： + **頻道和流程 - 檢視**：此許可可讓經理建立逐步指南。 如需如何將更多權限新增到現有安全性設定檔的資訊，請參閱 [在 Amazon Connect 中更新安全性設定檔](update-security-profiles.md)。 ### 此區塊產生的資料 在執行時間，**顯示檢視**區塊會在檢視資源執行時產生做為輸出的資料。檢視會產生兩個主要資料： + `Action` 在轉譯的檢視 UI (客服人員工作區) 和 `ViewResultData` 上取得，這是 `Output` 資料。 使用**顯示檢視**區塊時，**動作**代表分支，並設定為檢視命名空間下的 `$.Views.Action` 聯絡屬性。 + `Output` 資料設定為檢視命名空間下的 `$.Views.ViewResultData` 聯絡屬性。 `Action` 和 `Output` 資料的值取決於客服人員在使用檢視資源期間互動的元件。 #### 如何在流程的不同部分使用此資料 + 當區塊接收來自用戶端應用程式的回應時，可以使用 ` `$.Views.Action` 和 `$.Views.ViewResultData` 在流程中參考輸出資料。 + 搭配**顯示檢視**區塊使用檢視時，`Action` 代表在檢視命名空間下的聯絡屬性中擷取的分支，形式為 `$.Views.Action`，且檢視輸出資料設定為 `$.Views.ViewResultData` 聯絡屬性。 + 您可以使用聯絡屬性中的 JSON 路徑 (您可以在手動設定或設定 JSON 選項中指定聯絡屬性)，或在選擇**動態設定**時使用屬性選擇器下拉式清單，來參考**顯示檢視**區塊產生的資料。 ## 錯誤情況 **注意** 當 `ShowView` 區塊取得錯誤分支 (無相符項目、逾時或錯誤) 時，您可能想要將流程轉接回流程中的上一個點。如果您在這樣的流程中建立迴圈，聯絡流程可以無休止地執行，直到聊天聯絡逾時為止。建議使用 `Loop` 聯絡流程區塊來限制特定 `ShowView` 區塊的重試次數。 在下列情況下，聯絡案例會沿著 **錯誤** 分支轉接： + Amazon Connect 無法在客服人員工作區的檢視 UI 元件上擷取使用者動作。這可能是由於間歇性網路問題或媒體服務方面的問題。 ## 流程日誌項目 Amazon Connect 流程日誌可在流程與客戶進行互動時，提供您流程事件的即時詳細資訊。如需詳細資訊，請參閱[使用流程日誌來追蹤 Amazon Connect 流程中的事件](about-contact-flow-logs.md)。 下列範例 ShowView 輸入 (輸入日誌) ``` { "ContactId": "string", "ContactFlowId": "string", "ContactFlowName": "string", "ContactFlowModuleType": "ShowView", "Timestamp": "2023-06-06T16:08:26.945Z", "Parameters": { "Parameters": { "Cards": [ { "Summary": { "Id": "See", "Heading": "See cancel options" } }, { "Summary": { "Id": "Change", "Heading": "Change Booking" } }, { "Summary": { "Id": "Get", "Heading": "Get Refund Status" } }, { "Summary": { "Id": "Manage", "Heading": "Manage rewards" } } ], "NoMatchFound": { "Label": "Do Something Else", "type": "bubble" } }, "TimeLimit": "300", "ViewResourceId": "cards" } } ``` 下列範例 ShowView 輸出 (輸出日誌) ``` { "Results": "string", "ContactId": "string", "ContactFlowId": "string", "ContactFlowName": "string", "ContactFlowModuleType": "ShowView", "Timestamp": "2023-06-06T16:08:35.201Z" } ``` ## 流程範例 您可以從以下部落格中的步驟 2 下載範例流程：[開始使用逐步指南](https://aws.amazon.com/blogs/contact-center/getting-started-with-step-by-step-guides-for-the-amazon-connect-agent-workspace/)。建議您執行部落格中的步驟，以了解如何建立使用 AWS受管檢視設定的流程，以及如何為傳入媒體聯絡執行這些流程。 ## 其他資源 請參閱下列主題，進一步了解逐步指南和檢視。 + [設定 Amazon Connect 客服人員工作區的逐步指南](step-by-step-guided-experiences.md) + 探索[如何在 Amazon Connect 聊天中實作敏感資料收集](https://aws.amazon.com/blogs/contact-center/collecting-sensitive-information-with-amazon-connect-chat/)。 + 如需如何設定客戶受管檢視的逐步指示，請參閱[客戶受管檢視](https://d3irlmavjxd3d8.cloudfront.net/?path=/docs/customer-managed-views-customer-managed-views--page)。 + 如需在執行個體中設定隨插即用逐步指南體驗，請參閱[開始使用逐步指南](https://aws.amazon.com/blogs/contact-center/getting-started-with-step-by-step-guides-for-the-amazon-connect-agent-workspace/)。 + [AWS 受管檢視 - 一般組態](https://d3irlmavjxd3d8.cloudfront.net/?path=/story/aws-managed-views-common-configuration--page) + [檢視 - UI 元件](https://d3irlmavjxd3d8.cloudfront.net/?path=/story/ui-component-ui-components--page) + 在 *Amazon Connect API 參考*中[檢視動作](https://docs.aws.amazon.com/connect/latest/APIReference/view-api.html)。