Adicionar mensagens interativas do Amazon Lex para clientes no chat

As mensagens interativas são mensagens avançadas que apresentam opções de exibição rápidas e pré-configuradas para o cliente escolher. Essas mensagens são fornecidas pelo Amazon Lex e configuradas por meio do Amazon Lex usando uma AWS Lambda função.

Limites de validação

Espera-se que os limites do campo de string (por exemplo, título, subtítulo etc.) sejam aplicados pelo cliente (ou seja, uma interface personalizada ou o widget de comunicação hospedado). A SendMessageAPI verifica somente se o tamanho total da string é menor que 20 KB.

Todos os outros limites de campo devem ser seguidos para que a mensagem seja enviada com sucesso.

Modelos de exibição de mensagens

O Amazon Connect fornece os seguintes modelos de exibição de mensagens. Use-os para renderizar informações aos clientes em um bate-papo:

Esses modelos definem como as informações são renderizadas e quais informações são exibidas na interface de bate-papo. Quando mensagens interativas são enviadas pelo chat, os fluxos confirmam que o formato da mensagem segue um desses modelos.

Modelo de seletor de listas

Use o modelo de seletor de listas para apresentar ao cliente uma lista de até seis opções. Cada opção pode ter sua própria imagem.

As imagens a seguir mostram dois exemplos de como o modelo do seletor de listas renderiza informações em um chat.

O código a seguir é o modelo de seletor de listas que você pode usar no Lambda. Observe o seguinte:

{
   "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 do seletor de listas

A tabela a seguir lista os limites de cada um dos elementos do seletor de listas, caso você opte por criar seu próprio Lambda do zero. Os parâmetros obrigatórios estão em negrito.

Para enviar opções ilimitadas, implemente botões de ação em seu aplicativo. Para obter mais informações, consulte Implementação de botões de ação no seletor de listas/painel interativo de mensagens.

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

Modelo de seletor de horário

O modelo de seletor de horário é útil para permitir que os clientes agendem compromissos. Você pode fornecer até 40 intervalos de tempo para o cliente em um chat.

As imagens a seguir mostram dois exemplos de como o modelo do seletor de horário renderiza informações em um chat.

A imagem a seguir mostra o seletor de horário com uma imagem

O código a seguir é o modelo de seletor de horário que você pode usar no Lambda. Observe o seguinte:

{
   "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 do seletor de horário

A tabela a seguir lista os limites de cada um dos elementos do seletor de horário. Use essas informações se você optar por criar seu próprio Lambda do zero. Os parâmetros obrigatórios estão em negrito.

Modelo de painel

Ao usar o modelo de painel, você pode apresentar ao cliente até 10 opções em uma pergunta. No entanto, você pode incluir somente uma imagem, em vez de uma imagem em cada opção.

A imagem a seguir mostra um exemplo de como o modelo de painel renderiza informações em um chat. Mostra uma imagem na parte superior da mensagem e, abaixo da imagem, mostra um prompt que pergunta Como posso ajudar? Toque para selecionar a opção. No prompt, três opções são exibidas para o cliente: Verificar as opções de autoatendimento, Falar com um atendente e Encerrar o chat.

O código a seguir é o modelo de painel que você pode usar no Lambda. Observe o seguinte:

{
   "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 do painel

A tabela a seguir lista os limites de cada um dos elementos do painel, caso você opte por criar seu próprio Lambda do zero. Os parâmetros obrigatórios estão em negrito.

Para enviar opções ilimitadas, implemente botões de ação em seu aplicativo. Para obter mais informações, consulte Implementação de botões de ação no seletor de listas/painel interativo de mensagens.

Modelo de resposta rápida

Use mensagens de resposta rápida para obter respostas simples dos clientes e enviá-las para os clientes em uma lista em linha. Você pode apresentar aos clientes até 5 opções em uma mensagem de resposta rápida. Não há suporte para imagens para respostas rápidas.

A imagem a seguir mostra um exemplo de como o modelo de resposta rápida renderiza informações em um chat.

O código a seguir é o modelo de resposta rápida que você pode usar no 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 resposta rápida

A tabela a seguir lista os limites de cada um dos elementos da resposta rápida. Use essas informações se você optar por criar seu próprio Lambda do zero. Os parâmetros obrigatórios estão em negrito.

Modelo de carrossel

Use carrosséis para exibir até 5 seletores de listas ou painéis para os clientes em uma única mensagem. Semelhante ao seletor de listas e ao seletor de horário, você pode adicionar mais opções ao carrossel usando o recurso SHOW_MORE.

O GIF a seguir mostra um exemplo de como o modelo de carrossel renderiza informações em um chat. Os clientes percorrem o carrossel de imagens usando as setas esquerda e direita.

A imagem a seguir mostra dois hiperlinks Saiba mais, que são exemplos de elementos de hiperlink do seletor de carrossel.

O código a seguir é o modelo de carrossel que você pode usar no 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 usuários do widget de comunicação hospedado:

Limites de carrossel

A tabela a seguir lista os limites de cada um dos elementos do carrossel. Use essas informações se você optar por criar seu próprio Lambda do zero. Os parâmetros obrigatórios estão em negrito.

Modelo de formulário da Apple

Uma empresa pode enviar um formulário de mensagem interativa para os clientes finais por meio de uma única mensagem que contenha várias páginas de entradas solicitadas. Quando a mensagem é recebida no dispositivo Apple de um cliente final, ele pode abrir o formulário e navegar pelas páginas, fornecendo uma resposta para cada página, antes de enviar todas as respostas no final do formulário.

Por exemplo, as empresas podem usar os formulários da Apple para várias finalidades, incluindo fluxos de triagem, pesquisas com clientes e criação/inscrições de contas.

Os tipos de páginas compatíveis são:

O código a seguir é um exemplo de um modelo de formulários da Apple que você pode usar no Lambda.

Exemplo de formulário de pesquisa simples:

{
  "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 de formulário da Apple

InteractiveMessage

InteractiveMessageData

AppleFormContent

AppleFormSplashPage

AppleFormPage

AppleFormDatePickerPage

AppleFormDatePickerPageestende AppleFormPage

AppleFormListPickerPage

AppleFormListPickerPageestende AppleFormPage

AppleFormListPickerPageItem

AppleFormListPickerPageItemestende AppleFormPage

AppleFormWheelPickerPage

AppleFormWheelPickerPageestende AppleFormPage

AppleFormWheelPickerPageItem

AppleFormWheelPickerPageItemestende AppleFormPage

AppleFormInputPage

AppleFormInputPageestende AppleFormPage

Modelo do Apple Pay

Use o modelo do Apple Pay para fornecer uma maneira fácil e segura para os clientes comprarem bens e serviços por meio do Apple Messages for Business com o Apple Pay.

O seguinte código é o modelo do Apple Pay que você pode usar no 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 do Apple Pay

Modelo do aplicativo iMessage

Use o modelo de aplicativos iMessage para apresentar ao cliente seu aplicativo iMessage personalizado.

O código a seguir é um exemplo de modelo de aplicativo iMessage que você pode usar em sua função 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 do aplicativo iMessage

WhatsApp lista

Você usa o modelo WhatsApp de lista em WhatsApp bate-papos para fornecer aos clientes uma lista de opções.

O exemplo a seguir mostra uma lista de opções para um serviço bancário.

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

A imagem a seguir mostra uma tela típica antes e depois de um cliente abrir uma lista.

WhatsApp limites de opções

WhatsApp botão de resposta

Você pode usar o modelo de botão de WhatsApp resposta para apresentar uma lista de opções em linha para os 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"
            }
          }
        ]
      }
    }
  }
}

A imagem a seguir mostra uma experiência típica do usuário.

WhatsApp limites do botão de resposta

O modelo de WhatsApp resposta tem os seguintes limites.

Formatação rich text para títulos e subtítulos

Você pode adicionar formatação avançada a títulos e subtítulos das mensagens de chat. Por exemplo, você pode adicionar links, itálico, negrito, listas numeradas e listas com marcadores. Use markdown para formatar o texto.

A imagem a seguir de uma caixa de chat mostra um exemplo de seletor de listas com formatação avançada no título e no subtítulo.

Como formatar texto com markdown

Você pode escrever strings de título e subtítulo em um formato de várias linhas ou em uma única linha com caracteres de quebra de linha `\r\n`.

O exemplo a seguir mostra como formatar texto em itálico e negrito com markdown:

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

O exemplo a seguir mostra como formatar texto como código com markdown:

This is `<code />`

Como formatar texto com markdown

Para criar um link, use a sintaxe a seguir:

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

Os exemplos a seguir mostram duas maneiras de adicionar links com o markdown:

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

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