AWS Verwaltete Ansichten für den Arbeitsbereich eines Agenten in Amazon Connect einrichten

Amazon Connect enthält eine Reihe von Ansichten, mit denen Sie den Arbeitsbereich Ihres Agenten hinzufügen können. Im Folgenden finden Sie Einzelheiten zur Konfiguration der verschiedenen AWS verwalteten Ansichten.

Detail view

In der Detailansicht werden Kundendienstmitarbeitern Informationen und eine Liste der Aktionen angezeigt, die sie ausführen können. Ein häufiger Anwendungsfall der Detailansicht besteht darin, Kundendienstmitarbeitern zu Beginn eines Anrufs ein Bildschirm-Popupfenster einzublenden.

Aktionen in dieser Ansicht können verwendet werden, damit ein Agent mit dem nächsten Schritt in einer step-by-step Anleitung weitermachen kann, oder die Aktionen können verwendet werden, um völlig neue Workflows aufzurufen.
Sections ist die einzige erforderliche Komponente. Hier können Sie den Hauptteil der Seite konfigurieren, die Sie Kundendienstmitarbeitern einblenden möchten.
Optionale Komponenten wie die AttributeBarwerden von dieser Ansicht unterstützt.

Interaktive Dokumentation für die Detailansicht

Die folgende Abbildung zeigt ein Beispiel einer Detailansicht. Sie enthält eine Seitenüberschrift, eine Beschreibung und vier Beispiele.

Die Detailansicht mit der Seitenüberschrift, der Beschreibung und vier Beispielen mit Attributen

Sections

Inhalt kann eine statische Zeichenfolge, ein Schlüssel-Wert-Paar TemplateString oder ein Schlüssel-Wert-Paar sein. Er kann ein einzelner Datenpunkt oder eine Liste sein. Weitere Informationen finden Sie unter TemplateStringoder. AtrributeSection

AttributeBar (Fakultativ)

Wenn angegeben, wird die Attributleiste oben in der Ansicht angezeigt.
Ist eine Liste von Objekten mit den erforderlichen Eigenschaften „Label“, „Value“ und den optionalen Eigenschaften LinkType„Copyable“ und „Url“. ResourceId Weitere Informationen finden Sie unter Attribute.
- LinkTypekann eine externe Anwendung sein oder eine Verbindung herstellen, z. B. Case.
  - Wenn er extern ist (external), kann ein Benutzer zu einer neuen Browserseite navigieren, die mit Url konfiguriert wird.
  - Wenn dies der Fall ist, kann ein Benutzer im Arbeitsbereich für Agenten, der mit konfiguriert wurde, zu einem neuen Falldetail navigieren ResourceId.
- Mit Copyable können Benutzer das kopieren, ResourceId indem sie es mit Ihrem Eingabegerät auswählen.

Back (optional)

Optional, aber erforderlich, wenn keine Aktionen enthalten sind. Wenn angegeben, wird der Link zur Rücknavigation angezeigt.
Ist ein Objekt mit einem Label, worüber festgelegt wird, was im Linktext angezeigt werden soll.

Heading (optional)

Wenn angegeben, wird Text als Titel angezeigt.

Description (optional)

Wenn angegeben, wird Beschreibungstext unter dem Titel angezeigt.

Actions (optional)

Optional. Wenn angegeben, wird eine Liste von Aktionen unten auf der Seite angezeigt.

Eingabebeispiel



{
  "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!"],
}

Output example



{
    Action: "ActionSelected",
    ViewResultData: {
        actionName: "Action 2"
    }
}

List view

In der Listenansicht werden Informationen als Liste von Elementen mit Titeln und Beschreibungen angezeigt. Elemente können auch als Links mit zugeordneten Aktionen fungieren. Optional werden auch die standardmäßige Rücknavigation und der persistente Kontext-Header unterstützt.

Interaktive Dokumentation für die Listenansicht

Die folgende Abbildung zeigt ein Beispiel einer Listenansicht. Sie hat eine Spalte mit drei Elementen.

Die Listenansicht, ein Listenelement mit Link und zwei Elemente ohne Links

Items

Erforderlich. Zeigt diese Elemente als Liste an.
Jedes Element kann eine Überschrift, eine Beschreibung, ein Symbol und eine ID haben.
- Alle anderen Eigenschaften sind optional.
- Wenn „Id“ definiert ist, enthält die Ausgabe den Wert als Teil der Ausgabe.

AttributeBar (Fakultativ)

Wenn angegeben, wird die Attributleiste oben in der Ansicht angezeigt.
Ist eine Liste von Objekten mit den erforderlichen Eigenschaften „Label“, „Value“ und den optionalen Eigenschaften LinkType„Copyable“ und „Url“. ResourceId Weitere Informationen finden Sie unter Attribute.
- LinkTypekann eine externe Anwendung sein oder eine Verbindung herstellen, z. B. Case.
  - Wenn er extern ist (external), kann ein Benutzer zu einer neuen Browserseite navigieren, die mit Url konfiguriert wird.
  - Wenn dies der Fall ist, kann ein Benutzer im Arbeitsbereich für Agenten, der mit konfiguriert wurde, zu einem neuen Falldetail navigieren ResourceId.
- Mit Copyable können Benutzer das kopieren, ResourceId indem sie es mit Ihrem Eingabegerät auswählen.

Back (optional)

Optional, aber erforderlich, wenn keine Aktionen enthalten sind. Wenn angegeben, wird der Link zur Rücknavigation angezeigt.
Ist ein Objekt mit einem Label, worüber festgelegt wird, was im Linktext angezeigt werden soll.

Heading (optional)

Wenn angegeben, wird Text als Titel angezeigt.

SubHeading (Fakultativ)

Wenn angegeben, wird Text als Titel der Liste angezeigt.

Beispiel für Eingabedaten



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

Beispiel für Ausgabedaten



{
    Action: "ActionSelected",
    ViewResultData: {
        actionName: "Select_Car"
    }
}

Form view

Mit der Formular-Ansicht können Sie Kundendienstmitarbeitern Eingabefelder zur Verfügung stellen, um die erforderlichen Daten zu erheben und Daten an Backend-Systeme zu senden. Diese Ansicht besteht aus mehreren Abschnitten (Sections) mit einem vordefinierten Sections-Stil samt Überschrift. Der Hauptteil besteht aus verschiedenen Eingabefeldern, die in einem Spalten- oder Rasterlayoutformat angeordnet sind.

Interaktive Dokumentation für die Formular-Ansicht

Die folgende Abbildung zeigt ein Beispiel einer Formular-Ansicht für eine Mietwagenreservierung. Sie enthält Felder für den Ort und das Datum.

Die Formular-Ansicht mit Beispielen für ein Orts- und ein Datumsfeld

Sections

Stelle in der Formular-Ansicht, an der sich Eingabefelder und Anzeigefelder befinden.
SectionProps
- Heading
  - Überschrift des Abschnitts
- Typ
  - Typ des Abschnitts
  - FormSection (Formulare, die Benutzereingaben verarbeiten) oder DataSection (Anzeige einer Liste mit Bezeichnungen und Werten)
- Items
  - Liste der Daten auf Grundlage des Typs. Wenn Type auf DataSection gesetzt ist, sollten die Daten Attribute sein. Wenn Type auf FormSection gesetzt ist, sollten die Daten Formularkomponenten sein.
- isEditable
  - Die Bearbeitungsschaltfläche wird in der Überschrift angezeigt, wenn sie angegeben ist und der Abschnittstyp DataSection ist.
  - Boolesch

Wizard (optional)

ProgressTrackerAuf der linken Seite der Ansicht anzeigen.
Jedes Element kann eine Überschrift und eine Beschreibung haben und optional sein.
- Überschrift ist erforderlich

Back (optional)

Ist ein Objekt oder eine Zeichenfolge mit einem Label, worüber festgelegt wird, was im Linktext angezeigt werden soll.

Next (optional)

Diese Aktion wird verwendet, wenn es sich bei diesem Schritt nicht um den letzten Schritt handelt.
Ist ein Objekt (FormActionProps) oder eine Zeichenfolge. Weitere Informationen finden Sie unter FormActionProps.

Cancel (optional)

Diese Aktion wird verwendet, wenn der Schritt nicht der erste Schritt ist.
Ist ein Objekt (FormActionProps) oder eine Zeichenfolge. Weitere Informationen finden Sie unter FormActionProps.

Previous (optional)

Diese Aktion wird verwendet, wenn der Schritt nicht der erste Schritt ist.
Ist ein Objekt (FormActionProps) oder eine Zeichenfolge. Weitere Informationen finden Sie unter FormActionProps.

Edit (optional)

Diese Aktion wird angezeigt, wenn der Abschnittstyp DataSection ist.
Ist ein Objekt (FormActionProps) oder eine Zeichenfolge. Weitere Informationen finden Sie unter FormActionProps.

AttributeBar (Fakultativ)

Wenn angegeben, wird die Attributleiste oben in der Ansicht angezeigt.
Ist eine Liste von Objekten mit den erforderlichen Eigenschaften „Label“, „Value“ und den optionalen Eigenschaften LinkType„Copyable“ und „Url“. ResourceId Weitere Informationen finden Sie unter Attribute.
- LinkTypekann eine externe Anwendung sein oder eine Verbindung herstellen, z. B. Case.
  - Wenn er extern ist (external), kann ein Benutzer zu einer neuen Browserseite navigieren, die mit Url konfiguriert wird.
  - Wenn dies der Fall ist, kann ein Benutzer im Arbeitsbereich für Agenten, der mit konfiguriert wurde, zu einem neuen Falldetail navigieren ResourceId.
- Mit Copyable können Benutzer das kopieren, ResourceId indem sie es mit Ihrem Eingabegerät auswählen.

Heading (optional)

Zeichenfolge, die als Seitentitel angezeigt wird.

SubHeading (Fakultativ)

Sekundäre Nachricht für die Seite

ErrorText (Fakultativ)

Zeigt serverseitige Fehlermeldungen an
ErrorProps; Zeichenfolge

Beispiel für Eingabedaten



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

Beispiel für Ausgabedaten



{
    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

Die Bestätigungsansicht ist eine Seite, die Benutzern angezeigt wird, nachdem ein Formular gesendet oder eine Aktion abgeschlossen wurde. In dieser vorgefertigten Vorlage können Sie eine Zusammenfassung der Geschehnisse, weitere Schritte und Aufforderungen angeben. Die Bestätigungsansicht unterstützt eine persistente Attributleiste, ein Symbol/Bild, eine Überschrift und eine Unterüberschrift sowie eine Schaltfläche, mit der wieder zur Startseite navigiert werden kann.

Interaktive Dokumentation für die Bestätigungsansicht

Die folgende Abbildung zeigt ein Beispiel einer Bestätigung.

Die Bestätigungsansicht, ein Häkchen und Text zur Bestätigung der Autovermietung

Next

Erforderlich
Aktionsschaltfläche zum Weiternavigieren
- Label – Bezeichnung für die Navigationsschaltfläche als Zeichenfolge

AttributeBar (Fakultativ)

Wenn angegeben, wird die Attributleiste oben in der Ansicht angezeigt.
Ist eine Liste von Objekten mit den erforderlichen Eigenschaften „Label“, „Value“ und den optionalen Eigenschaften LinkType„Copyable“ und „Url“. ResourceId Weitere Informationen finden Sie unter Attribute.
- LinkTypekann eine externe Anwendung sein oder eine Verbindung herstellen, z. B. Case.
  - Wenn er extern ist (external), kann ein Benutzer zu einer neuen Browserseite navigieren, die mit Url konfiguriert wird.
  - Wenn dies der Fall ist, kann ein Benutzer im Arbeitsbereich für Agenten, der mit konfiguriert wurde, zu einem neuen Falldetail navigieren ResourceId.
- Mit Copyable können Benutzer das kopieren, ResourceId indem sie es mit Ihrem Eingabegerät auswählen.

Heading (optional)

Zeichenfolge, die als Seitentitel angezeigt wird.

SubHeading (Fakultativ)

Sekundäre Nachricht für die Seite

Graphic (optional)

Abbildung wird angezeigt
Objekt mit dem folgenden Schlüssel:
- Include – boolescher Wert. Wenn „true“, wird die Grafik auf der Seite angezeigt.

Beispiel für Eingabedaten



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

Beispiel für Ausgabedaten



{
    "Action": "Next",
    "ViewResultData": {
        "Label": "Go Home"
    }
}

Cards view

In der Kartenansicht können Sie Kundendienstmitarbeiter anleiten, indem Sie ihnen eine Liste mit Themen zur Auswahl anbieten, sobald sie den Kontakt akzeptieren.

Interaktive Dokumentation für die Kartenansicht

Präsentieren Sie Ihren Kundendienstmitarbeiter Karten. Die folgende Abbildung zeigt ein Beispiel für sechs Karten, die Kundendienstmitarbeitern präsentiert werden: eine, um eine neue Reservierung vorzunehmen, und die restlichen, um Reservierungen für bevorstehende Reisen zu prüfen.

Wenn Kundendienstmitarbeiter eine Karte auswählen, werden weitere Informationen eingeblendet. Das folgende Bild zeigt eine maximierte Karte, auf der Details zu einer Reservierung angezeigt werden.

Eine maximierte Karte, auf der Details zu einer Reservierung angezeigt werden

Sections

Eine Liste von Objekten mit „Summary“ und „Detail“. Die Komponente muss angegeben werden, um „Card“ und „Detail“ zu erstellen.
Besteht aus „Summary“ und „Detail“. Weitere Informationen finden Sie unter „Summary“ und „Detail“.

AttributeBar (Fakultativ)

Wenn angegeben, wird die Attributleiste oben in der Ansicht angezeigt.
Ist eine Liste von Objekten mit den erforderlichen Eigenschaften „Label“, „Value“ und den optionalen Eigenschaften LinkType„Copyable“ und „Url“. ResourceId Weitere Informationen finden Sie unter Attribute.
- LinkTypekann eine externe Anwendung sein oder eine Verbindung herstellen, z. B. Case.
  - Wenn er extern ist (external), kann ein Benutzer zu einer neuen Browserseite navigieren, die mit Url konfiguriert wird.
  - Wenn dies der Fall ist, kann ein Benutzer im Arbeitsbereich für Agenten, der mit konfiguriert wurde, zu einem neuen Falldetail navigieren ResourceId.
- Mit Copyable können Benutzer das kopieren, ResourceId indem sie es mit Ihrem Eingabegerät auswählen.

Heading (optional)

Zeichenfolge, die als Seitentitel angezeigt wird.

Back (optional)

Ist ein Objekt oder eine Zeichenfolge mit einem Label, worüber festgelegt wird, was im Linktext angezeigt werden soll. Weitere Informationen finden Sie unter ActionProps.

NoMatchFound (Fakultativ)

Ist eine Zeichenfolge, die für eine Schaltfläche unter „Cards“ angezeigt wird. Weitere Informationen finden Sie unter ActionProps.

Beispiel für Eingabedaten



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

}

Beispiel für Ausgabedaten



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

Warnung JavaScript ist in Ihrem Browser nicht verfügbar oder deaktiviert.

Zur Nutzung der AWS-Dokumentation muss JavaScript aktiviert sein. Weitere Informationen finden auf den Hilfe-Seiten Ihres Browsers.

Dokumentkonventionen

Benutzerdefinierte Ansichten

HTMLund JSX Support