Amazon Connect에서 에이전트의 워크스페이스에 대한 AWS 관리형 뷰 설정

세부 정보 보기는 에이전트에게 정보를 표시하고 에이전트가 취할 수 있는 작업 목록을 제공합니다. 세부 정보 보기의 일반적인 사용 사례는 통화가 시작될 때 에이전트에게 화면 팝을 표시하는 것입니다.

세부 정보 보기의 대화형 설명서

다음은 세부 정보 보기의 예를 보여 주는 이미지입니다. 여기에는 페이지 제목, 설명 및 네 가지 예가 있습니다.

Sections

AttributeBar(선택 사항)

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

목록 보기는 제목과 설명이 있는 항목의 목록으로 정보를 표시하는 데 사용됩니다. 항목은 작업이 첨부된 링크 역할을 할 수도 있습니다. 또한 표준 뒤로 탐색 및 영구적인 컨텍스트 헤더를 선택적으로 지원합니다.

목록 보기의 대화형 설명서

다음은 목록 보기의 예를 보여 주는 이미지입니다. 하나의 열에 세 개의 항목이 있습니다.

Items

AttributeBar(선택 사항)

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

양식 보기를 사용하면 에이전트가 필수 데이터를 수집하고 백엔드 시스템에 데이터를 제출할 수 있는 입력 필드를 제공할 수 있습니다. 이 보기는 헤더가 있는 미리 정의된 섹션 스타일을 가진 여러 섹션으로 구성됩니다. 본문은 열 또는 그리드 레이아웃 형식으로 배열된 다양한 입력 필드로 구성됩니다.

양식 보기의 대화형 설명서

다음은 렌터카 예약에 대한 양식 보기의 예를 보여 주는 이미지입니다. 위치 및 날짜 필드가 있습니다.

Sections

Wizard(선택 사항)

Back(선택 사항)

Next(선택 사항)

Cancel(선택 사항)

Previous(선택 사항)

Edit(선택 사항)

AttributeBar(선택 사항)

Heading(선택 사항)

SubHeading(선택 사항)

ErrorText(선택 사항)

입력 데이터 예제

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

확인 보기는 양식이 제출되거나 작업이 완료된 후 사용자에게 표시되는 페이지입니다. 이 미리 작성된 템플릿에서는 발생한 일의 요약, 다음 단계 및 프롬프트를 제공할 수 있습니다. 확인 보기는 영구 속성 표시줄, 아이콘/이미지, 헤드라인 및 하위 헤드라인과 함께 홈으로 돌아가기 탐색 버튼을 지원합니다.

확인 보기의 대화형 설명서

다음은 확인의 예를 보여 주는 이미지입니다.

Next

AttributeBar(선택 사항)

Heading(선택 사항)

SubHeading(선택 사항)

Graphic(선택 사항)

입력 데이터 예제

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

카드 보기에서는 에이전트가 연락을 수락하는 즉시 선택할 수 있는 주제 목록을 제시하여 에이전트를 안내할 수 있습니다.

카드 보기의 대화형 설명서

에이전트에게 카드를 표시합니다. 다음은 새 예약을 위한 카드와 예정된 여행의 예약을 검토하기 위한 카드 등 에이전트에게 제시되는 6가지 카드의 예를 보여 주는 이미지입니다.

에이전트가 카드를 선택하면 더 많은 정보가 표시됩니다. 다음은 예약 세부 정보를 표시하는 열린 카드를 보여주는 이미지입니다.

Sections

AttributeBar(선택 사항)

Heading(선택 사항)

Back(선택 사항)

NoMatchFound(선택 사항)

입력 데이터 예제

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