Ajoutez des messages interactifs Amazon Lex pour les clients dans le chat

Les messages interactifs sont des messages enrichis qui présentent une invite et des options d’affichage préconfigurées que le client peut choisir. Ces messages sont alimentés par Amazon Lex et configurés via Amazon Lex à l'aide d'une AWS Lambda fonction.

Limites de validation

Les limites des champs de chaîne (par exemple, titre, sous-titre, etc.) devraient être appliquées par le client (c’est-à-dire une interface personnalisée ou le widget de communication hébergé). L'SendMessageAPI vérifie uniquement que la taille totale de la chaîne est inférieure à 20 Ko.

Toutes les autres limites de champs doivent être respectées pour que le message soit correctement envoyé.

Modèles d’affichage de messages

Amazon Connect fournit les modèles d'affichage de messages suivants. Utilisez-les pour fournir des informations aux clients lors d'un chat :

Ces modèles définissent le mode de rendu des informations et les informations qui apparaissent dans l'interface de discussion. Lorsque des messages interactifs sont envoyés par chat, les flux vérifient que le format du message suit l’un de ces modèles.

Modèle de sélecteur de liste

Utilisez le modèle de sélecteur de liste pour présenter au client une liste de six choix maximum. Chaque choix peut comporter sa propre image.

Les images suivantes montrent deux exemples de la manière dont le modèle de sélecteur de liste affiche les informations dans un chat.

Le code suivant est le modèle de sélecteur de liste que vous pouvez utiliser dans votre fonction Lambda. Remarques :

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

Limites du sélecteur de liste

Le tableau suivant répertorie les limites pour chacun des éléments du sélecteur de liste, si vous choisissez de créer votre propre fonction Lambda à partir de zéro. Les paramètres obligatoires sont affichés en gras.

Pour envoyer un nombre illimité d’options, implémentez des boutons d’action dans votre application. Pour plus d’informations, consultez 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')                                       
                                    

Modèle de sélecteur de temps

Le modèle de sélecteur d’heure est utile pour permettre aux clients de planifier des rendez-vous. Vous pouvez fournir jusqu’à 40 créneaux horaires au client dans un chat.

Les images suivantes montrent deux exemples de la manière dont le modèle de sélecteur de temps affiche les informations dans un chat.

L'image suivante montre le sélecteur de temps avec une image

Le code suivant est le modèle de sélecteur de temps que vous pouvez utiliser dans votre fonction Lambda. Remarques :

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

Limites du sélecteur de temps

Le tableau suivant répertorie les limites de tous les éléments d’un sélecteur de temps. Utilisez ces informations si vous choisissez de créer votre propre fonction Lambda à partir de zéro. Les paramètres obligatoires sont affichés en gras.

Modèle de panneau

En utilisant le modèle de panneau, vous pouvez présenter au client jusqu’à 10 choix pour une question. Toutefois, vous pouvez inclure une seule image, au lieu d’une image pour chaque choix.

L’image suivante montre un exemple de la façon dont le modèle de panneau affiche les informations dans un chat. Il montre une image en haut du message et, sous l’image, une invite qui demande Comment puis-je vous aider ? Appuyez pour sélectionner une option. Sous cette invite, trois options sont affichées pour le client : Vérifier les options de libre-service, Parler à un agent, Mettre fin à la conversation.

Le code suivant est le modèle de panneau que vous pouvez utiliser dans votre fonction Lambda. Remarques :

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

Limites du panneau

Le tableau suivant répertorie les limites pour chacun des éléments du panneau, si vous choisissez de créer votre propre fonction Lambda à partir de zéro. Les paramètres obligatoires sont affichés en gras.

Pour envoyer un nombre illimité d’options, implémentez des boutons d’action dans votre application. Pour plus d’informations, consultez Implementation of action buttons in interactive message list picker/panel.

Modèle de réponse rapide

Utilisez des messages de réponse rapide pour obtenir des réponses simples de la part des clients et les soumettre aux clients dans une liste intégrée. Vous pouvez proposer aux clients jusqu’à cinq options dans un message de réponse rapide. Les images ne sont pas prises en charge pour les réponses rapides.

L’image suivante montre un exemple de la façon dont le modèle de réponse rapide affiche des informations dans un chat.

Le code suivant est le modèle de réponse rapide que vous pouvez utiliser dans votre fonction Lambda.

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

Limites de réponse rapide

Le tableau suivant répertorie les limites pour tous les éléments de réponse rapide. Utilisez ces informations si vous choisissez de créer votre propre fonction Lambda à partir de zéro. Les paramètres obligatoires sont affichés en gras.

Modèle de carrousel

Utilisez des carrousels pour présenter jusqu’à 5 sélecteurs de listes ou panneaux aux clients dans un même message. À l’instar du sélecteur de liste et du sélecteur de temps, vous pouvez ajouter d’autres options au carrousel à l’aide de la fonctionnalité SHOW_MORE.

Le GIF suivant montre un exemple de la façon dont le modèle de carrousel affiche des informations dans un chat. Les clients font défiler le carrousel d’images à l’aide des flèches gauche et droite.

L’image suivante montre deux liens hypertexte En savoir plus, qui sont des exemples d’éléments de liens hypertexte du sélecteur de carrousel.

Le code suivant est le modèle de carrousel que vous pouvez utiliser dans votre fonction Lambda.

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

Pour les utilisateurs du widget de communication hébergé :

Limites de carrousel

Le tableau suivant répertorie les limites de tous les éléments de carrousel. Utilisez ces informations si vous choisissez de créer votre propre fonction Lambda à partir de zéro. Les paramètres obligatoires sont affichés en gras.

Modèle de formulaire Apple

Une entreprise peut envoyer un message interactif sous forme de formulaire à ses clients finaux par le biais d'un seul message contenant plusieurs pages de données demandées. Lorsque le message est reçu sur l'appareil Apple d'un client final, celui-ci peut ouvrir le formulaire et parcourir les pages, en fournissant une réponse pour chaque page, avant de soumettre toutes les réponses à la fin du formulaire.

Par exemple, les entreprises peuvent utiliser les formulaires Apple à diverses fins, notamment pour le tri des flux, les enquêtes auprès des clients et la création de comptes/inscriptions.

Les types de pages pris en charge sont les suivants :

Le code suivant est un exemple de modèle de formulaires Apple que vous pouvez utiliser dans votre Lambda.

Exemple de formulaire de sondage simple :

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

Limites relatives aux formulaires Apple

InteractiveMessage

InteractiveMessageData

AppleFormContent

AppleFormSplashPage

AppleFormPage

AppleFormDatePickerPage

AppleFormDatePickerPages'étend AppleFormPage

AppleFormListPickerPage

AppleFormListPickerPages'étend AppleFormPage

AppleFormListPickerPageItem

AppleFormListPickerPageItems'étend AppleFormPage

AppleFormWheelPickerPage

AppleFormWheelPickerPages'étend AppleFormPage

AppleFormWheelPickerPageItem

AppleFormWheelPickerPageItems'étend AppleFormPage

AppleFormInputPage

AppleFormInputPages'étend AppleFormPage

Modèle Apple Pay

Utilisez le modèle Apple Pay pour proposer aux clients un moyen simple et sécurisé d'acheter des biens et des services par le biais d'Apple Messages for Business avec Apple Pay.

Le code suivant est le modèle Apple Pay que vous pouvez utiliser dans votre Lambda :

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

Limites d'Apple Pay

Modèle d'application iMessage

Utilisez le modèle iMessage Apps pour présenter au client votre application iMessage personnalisée.

Le code suivant est un exemple de modèle d'application iMessage que vous pouvez utiliser dans votre fonction Lambda. 

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

Limites de l'application iMessage

WhatsApp liste

Vous utilisez le modèle de WhatsApp liste dans WhatsApp les chats pour fournir aux clients une liste d'options.

L'exemple suivant montre une liste d'options pour un service bancaire.

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

L'image suivante montre un écran typique avant et après l'ouverture d'une liste par un client.

WhatsApp limites d'options

WhatsApp bouton de réponse

Vous pouvez utiliser le modèle de bouton de WhatsApp réponse pour présenter une liste d'options en ligne aux clients.

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

L'image suivante illustre une expérience utilisateur typique.

WhatsApp limites du bouton de réponse

Le modèle de WhatsApp réponse présente les limites suivantes.

Mise en forme enrichie des titres et sous-titres

Vous pouvez ajouter une mise en forme enrichie aux titres et aux sous-titres de vos messages de chat. Par exemple, vous pouvez ajouter des liens, une mise en italique, une mise en gras, des listes numérotées et des listes à puces. Vous pouvez utiliser Markdown pour mettre en forme votre texte.

L’illustration suivante d’une boîte de chat montre un exemple de sélecteur de liste avec une mise en forme enrichie dans le titre et le sous-titre.

Comment mettre en forme du texte avec Markdown

Vous pouvez écrire les chaînes de titre et de sous-titre dans un format multiligne ou sur une seule ligne avec des caractères `\r\n` de saut de ligne.

L’exemple suivant montre comment mettre en forme du texte en italique et en gras avec Markdown :

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

L’exemple suivant montre comment mettre en forme du texte sous forme de code avec Markdown :

This is `<code />`

Comment mettre en forme des liens avec Markdown

Pour créer un lien, utilisez la syntaxe suivante :

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

Les exemples suivants montrent deux manières d’ajouter des liens avec Markdown :

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

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