Add Amazon Lex interactive messages for customers in chat

Interactive messages are rich messages that present a prompt and pre-configured display options for a customer to choose. These messages are powered by Amazon Lex and configured through Amazon Lex using a Lambda.

Validation limits

The string field limits (for example, title, subtitle, etc.) are expected to be enforced by the client (that is, a custom built interface or the hosted communications widget). The SendMessage API checks only that the total size of the string is less than 20KB.

All other field limits must be followed for the message to be successfully sent.

Message display templates

Amazon Connect provides the following message display templates for you to use to render information to customers in a chat:

These templates define how the information is going to render, and what information is surfaced in the chat interface. When interactive messages are sent through chat, flows validate that the message format follows one of these templates.

List picker template

Use the list picker template to present the customer with a list of up to six choices. Each choice can have its own image.

The following images show two examples of how the list picker template renders information in a chat.

The following code is the list picker template that you can use in your Lambda. Note the following:

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

List picker limits

The following table lists the limits for each of the list picker elements, should you choose to build your own Lambda from scratch. The mandatory parameters are in bold.

To send unlimited options, implement action buttons in your application. For more information, see Implementation of action buttons in interactive message list picker/panel.

Time picker template

The time picker template is useful for enabling customers to schedule appointments. You can provide up to 40 timeslots to the customer in a chat.

The following images show two examples of how the time picker template renders information in a chat.

The following image shows the time picker with an image

The following code is the time picker template that you can use in your Lambda. Note the following:

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

Time picker limits

The following table lists the limits for each of the time picker elements. Use this information if you choose to build your own Lambda from scratch. The mandatory parameters are in bold.

Panel template

By using the panel template, you can present the customer with up to 10 choices under one question. However, you can include only one image, rather than an image with each choice.

The follow image shows an example of how the panel template renders information in a chat. It shows an image at the top of the message, and under the image it shows a prompt that asks How can I help? Tap to select option. Under the prompt three options are displayed to the customer: Check self-service options, Talk to an agent, End chat.

The following code is the panel template that you can use in your Lambda. Note the following:

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

Panel limits

The following table lists the limits for each of the panel elements, should you choose to build your own Lambda from scratch. The mandatory parameters are in bold.

To send unlimited options, implement action buttons in your application. For more information, see Implementation of action buttons in interactive message list picker/panel.

Quick reply template

Use quick reply messages to get simple responses from customers and them to customers in an in-line list. You can present customers with up to 5 options in one quick reply message. Images are not supported for quick replies.

The following image shows an example of how the quick reply template renders information in a chat.

The following code is the quick reply template that you can use in your 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"
                }
            ]
        }
    }
}

Quick reply limits

The following table lists the limits for each of the quick reply elements. Use this information if you choose to build your own Lambda from scratch. The mandatory parameters are in bold.

Carousel template

Use carousels to display up to 5 list pickers or panels to customers in a single message. Similar to the list picker and time picker, you can add more options to the carousel by using the SHOW_MORE feature.

The following GIF shows an example of how the carousel template renders information in a chat. Customers scroll through the carousel of images by using the left and right arrows.

The following image shows two Learn More hyperlinks, which are examples of carousel picker hyperlink elements.

The following code is the carousel template that you can use in your 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"
                }
              ]
            }
          }
        }
      ]
    }
  }
}

For hosted communications widget users:

Carousel limits

The following table lists the limits for each of the carousel elements. Use this information if you choose to build your own Lambda from scratch. The mandatory parameters are in bold.

Apple form template

A business can send a form interactive message to their end customers through a single message, containing multiple pages of requested inputs. When the message is received on an end-customer's Apple device, they can open the form and navigate through the pages, providing a response for each page, before submitting all responses at the end of the form.

For example, businesses can use Apple forms for various purposes, including triaging flows, customer surveys, and account creation / sign-ups.

The types of pages supported are:

The following code is an example of an Apple forms template you can use in your Lambda.

Simple survey form example:

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

Apple form limits

InteractiveMessage

InteractiveMessageData

AppleFormContent

AppleFormSplashPage

AppleFormPage

AppleFormDatePickerPage

AppleFormDatePickerPage extends AppleFormPage

AppleFormListPickerPage

AppleFormListPickerPage extends AppleFormPage

AppleFormListPickerPageItem

AppleFormListPickerPageItem extends AppleFormPage

AppleFormWheelPickerPage

AppleFormWheelPickerPage extends AppleFormPage

AppleFormWheelPickerPageItem

AppleFormWheelPickerPageItem extends AppleFormPage

AppleFormInputPage

AppleFormInputPage extends AppleFormPage

Apple Pay template

Use the Apple Pay template to provide an easy and secure way for customers to buy goods and services through Apple Messages for Business with Apple Pay.

The following code is the Apple Pay template that you can use in your 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"
    }
  }
}
        

Apple Pay limits

iMessage App template

Use the iMessage Apps template to present the customer with your custom built iMessage App.

The following code is an example iMessage App template that you can use in your 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",
       }
   }
}

iMessage App limits

Rich formatting in titles and subtitles

You can add rich formatting to the titles and subtitles of your chat messages. For example, you can add links, italics, bold, numbered lists, and bulleted lists. You use markdown to format your text.

The following image of a chat box shows an example list picker with rich formatting in the title and subtitle.

How to format text with markdown

You can write title and subtitle strings in a multi-line format, or in a single line with `\r\n` line break characters.

The following example shows how format italics and bold text with markdown:

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

The following example shows how to format text as code with markdown:

This is `<code />`

How to format links with markdown

To create a link, use the following syntax:

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

The following examples show two ways you can add links with markdown:

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

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