Hinzufügen von interaktiven Amazon-Lex-Nachrichten für Kunden im Chat

Interaktive Nachrichten sind umfangreiche Nachrichten, die eine Aufforderung und vorkonfigurierte Anzeigeoptionen enthalten, aus denen der Kunde wählen kann. Diese Nachrichten werden von Amazon Lex bereitgestellt und über Amazon Lex mithilfe einer AWS Lambda Funktion konfiguriert.

Gültigkeitsbeschränkungen

Es wird erwartet, dass die Grenzwerte für Zeichenfolgefelder (z. B. Titel, Untertitel usw.) vom Client durchgesetzt werden (d. h. von einer benutzerdefinierten Oberfläche oder dem gehosteten Kommunikations-Widget). Die SendMessageAPI prüft nur, ob die Gesamtgröße der Zeichenfolge weniger als 20 KB beträgt.

Alle anderen Feldgrenzen müssen eingehalten werden, damit die Nachricht erfolgreich gesendet werden kann.

Vorlagen für die Anzeige von Nachrichten

Amazon Connect bietet die folgenden Vorlagen für die Nachrichtenanzeige. Verwenden Sie sie, um Kunden in einem Chat Informationen zur Verfügung zu stellen:

Diese Vorlagen definieren, wie die Informationen gerendert werden und welche Informationen in der Chat-Oberfläche angezeigt werden. Wenn interaktive Nachrichten über den Chat gesendet werden, überprüfen Flows, ob das Nachrichtenformat einer dieser Vorlagen entspricht.

Listen-Picker-Vorlage

Verwenden Sie die Vorlage für die Listenauswahl, um dem Kunden eine Liste mit bis zu sechs Auswahlmöglichkeiten zu präsentieren. Jede Auswahl kann ein eigenes Bild haben.

Die folgenden Bilder zeigen zwei Beispiele dafür, wie die Vorlage für die Listenauswahl Informationen in einem Chat wiedergibt.

Der folgende Code ist die Listenauswahlvorlage, die Sie in Ihrem Lambda verwenden können. Beachten Sie Folgendes:

{
   "templateType":"ListPicker",                       
   "version":"1.0",                                   
   "data":{                                           
      "replyMessage":{                             
         "title":"Thanks for selecting!",             
         "subtitle":"Produce selected",
         "imageType":"URL",                                
         "imageData":"https://interactive-msg.s3-us-west-2.amazonaws.com/fruit_34.3kb.jpg",                          
         "imageDescription":"Select a produce to buy"
      },
      "content":{                                       
         "title":"What produce would you like to buy?",
         "subtitle":"Tap to select option",
         "imageType":"URL",                       
         "imageData":"https://interactive-msg.s3-us-west-2.amazonaws.com/fruit_34.3kb.jpg",                  
         "imageDescription":"Select a produce to buy",
         "elements":[                                   
            {
               "title":"Apple",                          
               "subtitle":"$1.00",
               "imageType":"URL",
               "imageData":"https://interactive-message-testing.s3-us-west-2.amazonaws.com/apple_4.2kb.jpg"
            },
            {
               "title":"Orange",                         
               "subtitle":"$1.50",
               "imageType":"URL",                  
               "imageData":"https://interactive-message-testing.s3-us-west-2.amazonaws.com/orange_17.7kb.jpg",           
            },
             {
               "title":"Banana",                         
               "subtitle":"$10.00",
               "imageType":"URL",                  
               "imageData":"https://interactive-message-testing.s3-us-west-2.amazonaws.com/banana_7.9kb.jpg",            
               "imageDescription":"Banana"
            }
         ]
      }

Limits für die Auswahl auflisten

In der folgenden Tabelle sind die Grenzwerte für jedes der Listenauswahlelemente aufgeführt, falls Sie Ihr eigenes Lambda von Grund auf neu erstellen möchten. Die obligatorischen Parameter sind fett gedruckt.

Um unbegrenzt viele Optionen zu senden, implementieren Sie Aktionsschaltflächen in Ihrer Anwendung. Weitere Informationen finden Sie unter Implementation of action buttons in interactive message list picker/panel.

amazon_connect('updateSandboxAttributes', 'allow-scripts allow-same-origin allow-popups allow-downloads allow-top-navigation-by-user-activation')                                       
                                    

Vorlage für die Zeitauswahl

Die Vorlage für die Zeitauswahl ist nützlich, damit Kunden Termine planen können. Sie können dem Kunden in einem Chat bis zu 40 Zeitfenster zur Verfügung stellen.

Die folgenden Bilder zeigen zwei Beispiele dafür, wie die Vorlage für die Zeitauswahl Informationen in einem Chat wiedergibt.

Die folgende Abbildung zeigt die Zeitauswahl mit einem Bild.

Der folgende Code ist die Zeitauswahlvorlage, die Sie in Ihrem Lambda verwenden können. Beachten Sie Folgendes:

{
   "templateType":"TimePicker",                                 
   "version":"1.0",                                             
   "data":{                                                    
      "replyMessage":{
         "title":"Thanks for selecting",                        
         "subtitle":"Appointment selected",
         "imageType":"URL",                                       
         "imageData":"https://interactive-msg.s3-us-west-2.amazonaws.com/booked.jpg",
         "imageDescription":"Appointment booked"
      },
      "content":{                                               
         "title":"Schedule appointment",                       
         "subtitle":"Tap to select option",
         "imageType":"URL",                                       
         "imageData":"https://interactive-msg.s3-us-west-2.amazonaws.com/calendar.jpg",
         "imageDescription":"Appointment booked",
         "timeZoneOffset":-450,
         "location":{
            "latitude":47.616299,                               
            "longitude":-122.4311,                              
            "title":"Oscar",                                    
            "radius":1,
         },
         "timeslots":[                                          
               {
                  "date" : "2020-10-31T17:00+00:00",             
                  "duration": 60,                               
               },
               {
                  "date" : "2020-11-15T13:00+00:00",            
                  "duration": 60,                              
               },
               {
                  "date" : "2020-11-15T16:00+00:00",            
                  "duration": 60,                              
               }
            ],           
         }
      }
   }
}     

Limits für die Zeitauswahl

In der folgenden Tabelle sind die Grenzwerte für jedes der Time-Picker-Elemente aufgeführt. Verwenden Sie diese Informationen, wenn Sie Ihr eigenes Lambda von Grund auf neu erstellen möchten. Die obligatorischen Parameter sind fett gedruckt.

Panel-Vorlage

Mithilfe der Panel-Vorlage können Sie dem Kunden unter einer Frage bis zu 10 Auswahlmöglichkeiten anbieten. Sie können jedoch nur ein Bild und nicht jeder Auswahl ein Bild hinzufügen.

Die folgende Abbildung zeigt ein Beispiel dafür, wie die Panel-Vorlage Informationen in einem Chat wiedergibt. Es zeigt ein Bild oben in der Nachricht und unter dem Bild wird eine Aufforderung angezeigt, in der gefragt wird, wie kann ich helfen? Tippen Sie, um eine Option auszuwählen. Nach der Aufforderung werden dem Kunden drei Optionen angezeigt: Check self-service options, Talk to an agent, End chat.

Der folgende Code ist die Panel-Vorlage, die Sie in Ihrem Lambda verwenden können. Beachten Sie Folgendes:

{
   "templateType":"Panel",                            
   "version":"1.0",                                   
   "data":{                                          
      "replyMessage":{                             
         "title":"Thanks for selecting!",             
         "subtitle":"Option selected",
      },
      "content":{                                      
         "title":"How can I help you?",                
         "subtitle":"Tap to select option",
         "imageType":"URL",                       
         "imageData":"https://interactive-msg.s3-us-west-2.amazonaws.com/company.jpg",                  
         "imageDescription":"Select an option",
         "elements":[                                 
            {
               "title":"Check self-service options",   
            },
            {
               "title":"Talk to an agent",                     
            },
            {
               "title":"End chat",                    
            }
         ]
      }
   }
} 

Grenzwerte für das Panel

In der folgenden Tabelle sind die Grenzwerte für jedes der Panel-Elemente aufgeführt, falls Sie Ihr eigenes Lambda von Grund auf neu erstellen möchten. Die obligatorischen Parameter sind fett gedruckt.

Um unbegrenzt viele Optionen zu senden, implementieren Sie Aktionsschaltflächen in Ihrer Anwendung. Weitere Informationen finden Sie unter Implementation of action buttons in interactive message list picker/panel.

Schnellantwort-Vorlage

Verwenden Sie Schnellantwortnachrichten, um einfache Antworten von Kunden und von Ihnen an Kunden in einer Inline-Liste zu erhalten. Bilder werden für Schnellantworten nicht unterstützt.

Die Schnellantwort-Vorlage zeigt in einem Beispiel, wie die Schnellantwort-Vorlage Informationen in einem Chat wiedergibt.

Der folgende Code ist die Schnellantwortvorlage, die Sie in Ihrem Lambda verwenden können.

{
    "templateType": "QuickReply",
    "version": "1.0",
    "data": {
        "replyMessage": {
            "title": "Thanks for selecting!"
        },
        "content": {
            "title": "Which department would you like?",
            "elements": [{
                    "title": "Billing"
                },
                {
                    "title": "Cancellation"
                },
                {
                    "title": "New Service"
                }
            ]
        }
    }
}

Schnellantwort-Limits

In der folgenden Tabelle sind die Grenzwerte für jedes der Schnellantwortelemente aufgeführt. Verwenden Sie diese Informationen, wenn Sie Ihr eigenes Lambda von Grund auf neu erstellen möchten. Die obligatorischen Parameter sind fett gedruckt.

Karussell-Vorlage

Verwenden Sie Karussells, um Kunden bis zu 5 Listenauswahlfelder oder Panels in einer einzigen Nachricht anzuzeigen. Ähnlich wie bei der Listenauswahl und der Zeitauswahl können Sie dem Karussell mithilfe des SHOW_MORE-Features weitere Optionen hinzufügen.

Das folgende GIF zeigt ein Beispiel dafür, wie die Karussellvorlage Informationen in einem Chat wiedergibt. Kunden scrollen mithilfe der Pfeiltasten nach links und rechts durch das Bilderkarussell.

Die folgende Abbildung zeigt zwei Hyperlinks für Learn More, bei denen es sich um Beispiele für Hyperlink-Elemente in der Karussellauswahl handelt.

Der folgende Code ist die Karussellvorlage, die Sie in Ihrem Lambda verwenden können.

{
  "templateType": "Carousel",            
  "version": "1.0",                      
  "data": {                              
      "content": {                           
        "title": "View our popular destinations",   
        "elements": [                               
        {
          "templateIdentifier": "template0",        
          "templateType": "Panel",
          "version": "1.0",
          "data": {
            "content": {
              "title": "California",
              "subtitle": "Tap to select option",
              "elements": [
                {
                  "title": "Book flights"
                },
                {
                  "title": "Book hotels"
                },
                {
                  "title": "Talk to agent"
                }
              ]
            }
          }
        },
        {
          "templateIdentifier": "template1",   
          "templateType": "Panel",
          "version": "1.0",
          "data": {
            "content": {
              "title": "New York",
              "subtitle": "Tap to select option",
              "elements": [
                {
                  "title": "Book flights"
                },
                {
                  "title": "Book hotels"
                },
                {
                  "title": "Talk to agent"
                }
              ]
            }
          }
        }
      ]
    }
  }
}

Für Benutzer des Widgets für gehostete Kommunikation:

Karussell-Limits

Die Limits für jedes Karussellelement sind in der folgenden Tabelle aufgeführt. Verwenden Sie diese Informationen, wenn Sie Ihr eigenes Lambda von Grund auf neu erstellen möchten. Die obligatorischen Parameter sind fett gedruckt.

Apple-Formularvorlage

Ein Unternehmen kann seinen Endkunden eine interaktive Formularnachricht über eine einzelne Nachricht senden, die mehrere Seiten mit angeforderten Eingaben enthält. Wenn die Nachricht auf dem Apple-Gerät eines Endkunden eingeht, kann dieser das Formular öffnen, durch die Seiten navigieren und für jede Seite eine Antwort angeben, bevor er alle Antworten am Ende des Formulars absendet.

Beispielsweise können Unternehmen Apple-Formulare für verschiedene Zwecke wie Auswahlprozesse, Kundenbefragungen und Kontoerstellung/-registrierung verwenden.

Folgende Seitentypen werden unterstützt:

Der folgende Code ist ein Beispiel für eine Apple-Formularvorlage, die Sie in Ihrer Lambda-Funktion verwenden können.

Beispiel für ein einfaches Umfrageformular:

{
  "templateType": "AppleForm",
  "version": "1.0",
  "data": {
    "content": {
      "title": "Survey",
      "pages": [
        {
          "pageType": "DatePicker",
          "title": "Date you visited",
          "subtitle": "When did you last visit?",
          "minDate": "2024-01-02"
        },
        {
          "pageType": "ListPicker",
          "title": "Rating",
          "subtitle": "How do you rate the experience?",
          "items": [
            {
              "title": "Good",
              "imageType": "URL",
              "imageData": "https://mybucket.s3.us-west-2.amazonaws.com/good.jpg"
            },
            {
              "title": "Okay",
              "imageType": "URL",
              "imageData": "https://mybucket.s3.us-west-2.amazonaws.com/okay.jpg"
            },
            {
              "title": "Poor",
              "imageType": "URL",
              "imageData": "https://mybucket.s3.us-west-2.amazonaws.com/poor.jpg"
            }
          ]
        },
        {
          "pageType": "ListPicker",
          "title": "Dine type",
          "subtitle": "Select all dine types that apply",
          "multiSelect": true,
          "items": [
            {
              "title": "Pickup"
            },
            {
              "title": "Dine-in"
            },
            {
              "title": "Delivery"
            }
          ]
        },
        {
          "pageType": "WheelPicker",
          "title": "Visits",
          "subtitle": "How often do you visit?",
          "items": [
            {
              "title": "Often"
            }
            {
              "title": "Sometimes"
            },
            {
              "title": "Rarely"
            }
          ]
        },
        {
          "pageType": "Input",
          "title": "Additional notes",
          "subtitle": "Anything else you'd like to mention about your visit?",
          "multiLine": true
        }
      ]
    }
  }
}
        

Einschränkungen für Apple-Formulare

InteractiveMessage

InteractiveMessageData

AppleFormContent

AppleFormSplashPage

AppleFormPage

AppleFormDatePickerPage

AppleFormDatePickerPageerweitert AppleFormPage

AppleFormListPickerPage

AppleFormListPickerPageerweitert AppleFormPage

AppleFormListPickerPageItem

AppleFormListPickerPageItemerweitert AppleFormPage

AppleFormWheelPickerPage

AppleFormWheelPickerPageerweitert AppleFormPage

AppleFormWheelPickerPageItem

AppleFormWheelPickerPageItemerweitert AppleFormPage

AppleFormInputPage

AppleFormInputPagedehnt AppleFormPage

Apple-Pay-Vorlage

Verwenden Sie die Apple-Pay-Vorlage, um Kunden eine einfache und sichere Möglichkeit zu bieten, Waren und Services über Apple Messages for Business mit Apple Pay zu kaufen.

Der folgende Code ist die Apple-Pay-Vorlage, die Sie in Ihrer Lambda-Funktion verwenden können.

{
  "templateType":"ApplePay",
  "version":"1.0",
  "data":{
    "content":{
      "title":"Halibut",
      "subtitle":"$63.99 at Sam's Fish",
      "imageType":"URL",
      "imageData":"https://interactive-msg.s3-us-west-2.amazonaws.com/fish.jpg",
      "payment": {
        "endpoints": {
          "orderTrackingUrl": "https://sams.example.com/orderTrackingUrl/",
          "paymentGatewayUrl": "https://sams.example.com/paymentGateway/",
          "paymentMethodUpdateUrl": "https://sams.example.com/paymentMethodUpdate/",
          "shippingContactUpdateUrl": "https://sams.example.com/shippingContactUpdate/",
          "shippingMethodUpdateUrl": "https://sams.example.com/shippingMethodUpdate/",
          "fallbackUrl": "https://sams.example.com/paymentGateway/"
        },
        "merchantSession": {
          "epochTimestamp": 1525730094057,
          "expiresAt": 1525730094057,
          "merchantSessionIdentifier": "PSH40080EF4D6.........9NOE9FD",
          "nonce": "fe72cd0f",
          "merchantIdentifier": "merchant.com.sams.fish",
          "displayName": "Sam's Fish",
          "signature": "308006092a8.......09F0W8EGH00",
          "initiative": "messaging",
          "initiativeContext": "https://sams.example.com/paymentGateway/",
          "signedFields": [
            "merchantIdentifier",
            "merchantSessionIdentifier",
            "initiative",
            "initiativeContext",
            "displayName",
            "nonce"
          ],
        },
        "paymentRequest": {
          "applePay": {
            "merchantCapabilities": [
              "supports3DS",
              "supportsDebit",
              "supportsCredit"
            ],
            "merchantIdentifier": "merchant.com.sams.fish",
            "supportedNetworks": [
              "amex",
              "visa",
              "discover",
              "masterCard"
            ]
          },
          "countryCode": "US",
          "currencyCode": "USD",
          "lineItems": [
            {
              "amount": "59.00",
              "label": "Halibut",
              "type": "final"
            },
            {
              "amount": "4.99",
              "label": "Shipping",
              "type": "final"
            }
          ],
          "requiredBillingContactFields": [
            "postalAddress"
          ],
          "requiredShippingContactFields": [
            "postalAddress",
            "phone",
            "email",
            "name"
          ],
          "shippingMethods": [
            {
              "amount": "0.00",
              "detail": "Available within an hour",
              "identifier": "in_store_pickup",
              "label": "In-Store Pickup"
            },
            {
              "amount": "4.99",
              "detail": "5-8 Business Days",
              "identifier": "flat_rate_shipping_id_2",
              "label": "UPS Ground"
            },
            {
              "amount": "29.99",
              "detail": "1-3 Business Days",
              "identifier": "flat_rate_shipping_id_1",
              "label": "FedEx Priority Mail"
            }
          ],
          "total": {
            "amount": "63.99",
            "label": "Sam's Fish",
            "type": "final"
          },
          "supportedCountries" : [
            "US",
            "CA",
            "UK",
            "JP",
            "CN"
          ]
        }
      },
      "requestIdentifier" : "6b2ca008-1388-4261-a9df-fe04cd1c23a9"
    }
  }
}
        

Einschränkungen für Apple Pay

iMessage-App-Vorlage

Verwenden Sie die iMessage-Apps-Vorlage, um dem Kunden Ihre benutzerdefinierte iMessage-App anzuzeigen.

Der folgende Code ist ein Beispiel für eine iMessage-App-Vorlage, die Sie in Ihrer Lambda-Funktion verwenden können. 

{
   templateType: AppleCustomInteractiveMessage,
   version: "1.0",
   data: {
       content: {
           appIconUrl: "https://interactive-message-testing.s3-us-west-2.amazonaws.com/apple_4.2kb.jpg",
           appId: "123456789",
           appName: "Package Delivery",
           title: "Bubble Title CIM",
           bid: "com.apple.messages.MSMessageExtensionBalloonPlugin:{team-id}:{ext-bundle-id}",
           dataUrl: "?deliveryDate=26-01-2024&destinationName=Home&street=1infiniteloop&state=CA&city=Cupertino&country=USA&postalCode=12345&latitude=37.331686&longitude=-122.030656&isMyLocation=false&isFinalDestination=true",
           subtitle: "Bubble package",
       },
       replyMessage: {
           title: "Custom reply message title",
           subtitle: "Custom reply message subtitle",
           imageType: "URL",
           imageData: "https://interactive-msg.s3-us-west-2.amazonaws.com/fruit_34.3kb.jpg",
       }
   }
}

Limits für die iMessage-App

WhatsApp Liste

Sie verwenden die WhatsApp Listenvorlage in WhatsApp Chats, um Kunden eine Liste mit Optionen zur Verfügung zu stellen.

Das folgende Beispiel zeigt eine Liste von Optionen für eine Bankdienstleistung.

{
  "templateType": "WhatsAppInteractiveList",
  "version": "1.0",
  "data": {
    "content": {
      "title": "Which account do you need help with?",
      "body": {
        "text": "Which account do you need help with?"
      },
      "action": {
        "button": "Options",
        "sections": [
          {
            "title": "Your accounts",
            "rows": [
              {
                "id": "11111111",
                "title": "11111111",
                "description": "PERSONAL CHECKING"
              },
              {
                "id": "22223333",
                "title": "22223333",
                "description": "PERSONAL SAVINGS"
              }
            ]
          },
          {
            "title": "Other",
            "rows": [
              {
                "id": "other",
                "title": "I can't find my account"
              }
            ]
          }
        ]
      }
    }
  }
}

Die folgende Abbildung zeigt einen typischen Bildschirm vor und nach dem Öffnen einer Liste durch einen Kunden.

WhatsApp Optionen, Grenzen.

WhatsApp Schaltfläche „Antworten“

Sie können die Vorlage für WhatsApp Antwortschaltflächen verwenden, um Kunden eine Inline-Liste mit Optionen zu präsentieren.

{
  "templateType": "WhatsAppInteractiveReplyButton",
  "version": "1.0",
  "data": {
    "content": {
      "title": "What would you like to do?",
      "body": {
        "text": "What would you like to do?"
      },
      "action": {
        "buttons": [
          {
            "type": "reply",
            "reply": {
              "id": "agent",
              "title": "Continue to agent"
            }
          },
          {
            "type": "reply",
            "reply": {
              "id": "end_chat",
              "title": "End chat"
            }
          }
        ]
      }
    }
  }
}

Die folgende Abbildung zeigt eine typische Benutzererfahrung.

WhatsApp Beschränkungen für Antwortschaltflächen

Die WhatsApp Antwortvorlage hat die folgenden Beschränkungen.

Umfangreiche Formatierung von Titeln und Untertiteln

Sie können den Titeln und Untertiteln Ihrer Chat-Nachrichten umfangreiche Formatierungen hinzufügen. Sie können beispielsweise Links, kursive, fett gedruckte, nummerierte Listen und Aufzählungen hinzufügen. Sie können Markdown verwenden, um Ihren Text zu formatieren.

Die folgende Abbildung einer Chatbox zeigt ein Beispiel für eine Listenauswahl mit umfangreicher Formatierung im Titel und Untertitel.

Wie formatiert man Text mit Markdown

Sie können Titel- und Untertitelzeichenfolgen in einem mehrzeiligen Format oder in einer einzigen Zeile mit `\r\n` Zeilenumbruchzeichen schreiben.

Im folgenden Beispiel wird gezeigt, wie kursiv und fett formatierter Text mit Markdown formatiert wird:

This is some *emphasized text* and some **strongly emphasized text**

Im folgenden Beispiel wird gezeigt, wie Sie Text als Code mit Markdown formatieren:

This is `<code />`

Wie formatiert man Links mit Markdown

Verwenden Sie die folgende Syntax, um einen Link zu erstellen:

[aws](https://aws.amazon.com)

Die folgenden Beispiele zeigen zwei Möglichkeiten, wie Sie Links mit Markdown hinzufügen können:

Questions? Visit https://plainlink.com/faq

[This is a link](https://aws.amazon.com)