Adición de mensajes interactivos de Amazon Lex para los clientes en el chat

Los mensajes interactivos son mensajes enriquecidos que presentan un mensaje y opciones de visualización preconfiguradas para que el cliente elija. Estos mensajes funcionan con Amazon Lex y se configuran mediante Amazon Lex mediante una AWS Lambda función.

Límites de validación

Se espera que los límites de los campos de cadena (por ejemplo, título, subtítulo, etc.) los aplique el cliente (es decir, una interfaz personalizada o el widget de comunicaciones alojado). La SendMessageAPI solo comprueba que el tamaño total de la cadena sea inferior a 20 KB.

Deben respetarse todos los demás límites de los campos para que el mensaje se envíe correctamente.

Plantillas de visualización de mensajes

Amazon Connect proporciona las siguientes plantillas de visualización de mensajes. Úselas para ofrecer información a los clientes en un chat:

Estas plantillas definen cómo se representa la información y qué información aparece en la interfaz del chat. Cuando se envían mensajes interactivos a través del chat, los flujos validan que el formato del mensaje sigue una de estas plantillas.

Plantilla de selector de lista

Utilice la plantilla del selector de lista para presentar al cliente una lista de hasta seis opciones. Cada opción puede tener su propia imagen.

En las siguientes imágenes se muestran dos ejemplos de cómo la plantilla del selector de lista muestra la información en un chat.

El siguiente código es la plantilla del selector de lista que puede utilizar en su Lambda. Tenga en cuenta lo siguiente:

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

Límites del selector de lista

En la tabla siguiente se enumeran los límites de cada uno de los elementos del selector de lista, por si decide crear su propia Lambda desde cero. Los parámetros obligatorios aparecen en negrita.

Para enviar opciones ilimitadas, implemente botones de acción en su aplicación. Para obtener más información, consulte Implementación de botones de acción en el selector de lista o panel de mensajes interactivo.

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

Plantilla de selector de tiempo

La plantilla de selector de tiempo es útil para que los clientes puedan programar citas. Puede proporcionar hasta 40 intervalos de tiempo al cliente en un chat.

En las siguientes imágenes se muestran dos ejemplos de cómo la plantilla del selector de tiempo muestra la información en un chat.

En la siguiente imagen se muestra el selector de tiempo con una imagen

El siguiente código es la plantilla del selector de tiempo que puede utilizar en su Lambda. Tenga en cuenta lo siguiente:

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

Límites del selector de tiempo

En la tabla siguiente se enumeran los límites de cada uno de los elementos del selector de tiempo. Utilice esta información si elige crear su propia Lambda desde cero. Los parámetros obligatorios aparecen en negrita.

Plantilla de panel

Mediante la plantilla de panel, puede presentar al cliente hasta diez opciones en una misma pregunta. No obstante, puede incluir solo una imagen, en lugar de una imagen con cada elección.

En la siguiente imagen se muestra un ejemplo de cómo la plantilla de panel muestra la información en un chat. Muestra una imagen en la parte superior del mensaje, y debajo de la imagen muestra un mensaje que pregunta ¿En qué puedo ayudarlo? Pulse para seleccionar la opción. Bajo el mensaje se muestran tres opciones al cliente: Comprobar las opciones de autoservicio, Hablar con un agente, Finalizar el chat.

El siguiente código es la plantilla de panel que puede utilizar en su Lambda. Tenga en cuenta lo siguiente:

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

Límites de panel

En la tabla siguiente se enumeran los límites de cada uno de los elementos del panel, por si decide crear su propia Lambda desde cero. Los parámetros obligatorios aparecen en negrita.

Para enviar opciones ilimitadas, implemente botones de acción en su aplicación. Para obtener más información, consulte Implementación de botones de acción en el selector de lista o panel de mensajes interactivo.

Plantilla de respuesta rápida

Utilice mensajes de respuesta rápida para obtener respuestas sencillas de los clientes y para enviarles mensajes en una lista en línea. En las respuestas rápidas no se admiten imágenes.

En la siguiente imagen se muestra un ejemplo de cómo la plantilla de respuesta rápida muestra la información en un chat.

El siguiente código es la plantilla de respuesta rápida que puede utilizar en su 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"
                }
            ]
        }
    }
}

Límites de respuesta rápida

En la tabla siguiente se enumeran los límites de cada uno de los elementos de la respuesta rápida. Utilice esta información si elige crear su propia Lambda desde cero. Los parámetros obligatorios aparecen en negrita.

Plantilla de carrusel

Utilice carruseles para mostrar hasta cinco selectores de lista o paneles a los clientes en un solo mensaje. Al igual que con el selector de lista y el selector de tiempo, puede agregar más opciones al carrusel mediante la característica SHOW_MORE.

En el siguiente GIF se muestra un ejemplo de cómo la plantilla de carrusel muestra la información en un chat. Los clientes se desplazan por el carrusel de imágenes con las flechas izquierda y derecha.

En la siguiente imagen se muestran dos hipervínculos Más información, que son ejemplos de elementos de hipervínculo del selector de carrusel.

El siguiente código es la plantilla de carrusel que puede utilizar en su 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"
                }
              ]
            }
          }
        }
      ]
    }
  }
}

Para los usuarios de widgets de comunicaciones alojados:

Límites de carrusel

En la tabla siguiente se enumeran los límites de cada uno de los elementos del carrusel. Utilice esta información si elige crear su propia Lambda desde cero. Los parámetros obligatorios aparecen en negrita.

Plantilla de formulario de Apple

Una empresa puede enviar un formulario de mensaje interactivo a sus clientes finales mediante un único mensaje que contenga varias páginas con los datos solicitados. Cuando el mensaje se recibe en el dispositivo Apple del cliente final, este puede abrir el formulario y navegar por las páginas, proporcionando una respuesta para cada página, antes de enviar todas las respuestas al final del formulario.

Por ejemplo, las empresas pueden utilizar los formularios de Apple para diversos fines, como los flujos de clasificación, las encuestas a los clientes y la creación o registro de cuentas.

Los dos tipos de páginas compatibles son:

El siguiente código es un ejemplo de una plantilla de formularios de Apple que puede utilizar en su Lambda.

Ejemplo de formulario de encuesta sencillo:

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

Límites de formularios de Apple

InteractiveMessage

InteractiveMessageData

AppleFormContent

AppleFormSplashPage

AppleFormPage

AppleFormDatePickerPage

AppleFormDatePickerPagese extiende AppleFormPage

AppleFormListPickerPage

AppleFormListPickerPagese extiende AppleFormPage

AppleFormListPickerPageItem

AppleFormListPickerPageItemse extiende AppleFormPage

AppleFormWheelPickerPage

AppleFormWheelPickerPagese extiende AppleFormPage

AppleFormWheelPickerPageItem

AppleFormWheelPickerPageItemse extiende AppleFormPage

AppleFormInputPage

AppleFormInputPagese extiende AppleFormPage

Plantilla de Apple Pay

Utilice la plantilla de Apple Pay para ofrecer a los clientes una forma fácil y segura de comprar productos y servicios a través de Apple Messages for Business con Apple Pay.

El siguiente código es la plantilla de Apple Pay que puede utilizar en su 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"
    }
  }
}
        

Límites de Apple Pay

Plantilla de la aplicación iMessage

Utilice la plantilla de iMessage para presentar al cliente la aplicación de iMessage que ha desarrollado.

El siguiente código es un ejemplo de una plantilla de la aplicación iMessage que puede utilizar en su función de 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",
       }
   }
}

Límites de la aplicación iMessage

WhatsApp lista

La plantilla de WhatsApp lista se utiliza en WhatsApp los chats para ofrecer a los clientes una lista de opciones.

En el siguiente ejemplo, se muestra una lista de opciones para un servicio bancario.

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

En la siguiente imagen, se muestra una pantalla típica antes y después de que un cliente abra una lista.

WhatsApp límites de opciones

WhatsApp botón de respuesta

Puedes usar la plantilla del botón de WhatsApp respuesta para presentar una lista de opciones en línea para los clientes.

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

En la siguiente imagen, se muestra una experiencia de usuario típica.

WhatsApp límites del botón de respuesta

La plantilla de WhatsApp respuesta tiene los siguientes límites.

Formato enriquecido en títulos y subtítulos

Puede agregar un formato enriquecido a los títulos y subtítulos de sus mensajes de chat. Por ejemplo, puede agregar enlaces, cursiva, negrita, listas numeradas y listas con viñetas. Puede usar markdown para dar formato al texto.

En la siguiente imagen de un cuadro de chat se muestra un ejemplo de selector de lista con formato enriquecido en el título y el subtítulo.

Cómo dar formato al texto con Markdown

Puede escribir cadenas de títulos y subtítulos en formato de varias líneas o en una sola línea con caracteres de salto de línea `\r\n`.

En el siguiente ejemplo se muestra cómo dar formato al texto en cursiva y negrita con Markdown:

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

En el siguiente ejemplo se muestra cómo dar formato al texto como código con Markdown:

This is `<code />`

Cómo dar formato a los enlaces con Markdown

Para crear un enlace, utilice la siguiente sintaxis:

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

En los siguientes ejemplos se muestran dos formas de agregar enlaces con Markdown:

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

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