Add interactive messages to chat - Amazon Connect
List picker templateTime picker template

Add interactive messages to chat

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

Tip

For step-by-step instructions on how to add interactive messages through Amazon Lex and Lambda, see this blog: Set up interactive messages for your Amazon Connect chatbot.

Amazon Connect provides two message display templates: a list picker and a time picker. 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.

This topic provides details about these interactive message templates.

List picker template

Following are 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:

  • Bold text is a mandatory parameter.

  • In some cases, if the parent element exists in the request and it isn't mandatory/bold, but the fields in it are, then the fields are mandatory. For example, see data.replyMessage structure in the following template. If the structure exists, title is mandatory. Otherwise complete replyMessage is optional.

Important

Images should be uploaded in Amazon S3 and publicly accessible.

{
   "templateType":"ListPicker",                       (mandatory)
   "version":"1.0",                                   (mandatory)
   "data":{                                           (mandatory)
      "replyMessage":{                             
         "title":"Thanks for selecting!",             (mandatory)
         "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":{                                        (mandatory)
         *"title":"What produce would you like to buy?", (mandatory)
         "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":[                                   (mandatory, 1-6 items)
            {
               "title":"Apple",                          (mandatory)
               "subtitle":"$1.00"
               "imageType":"URL",
               "imageData":"https://interactive-message-testing.s3-us-west-2.amazonaws.com/apple_4.2kb.jpg"
            },
            {
               "title":"Orange",                         (mandatory)
               "subtitle":"$1.50"
               "imageType":"URL",                  
               "imageData":"https://interactive-message-testing.s3-us-west-2.amazonaws.com/orange_17.7kb.jpg",           
            },
             {
               "title":"Banana",                         (mandatory)
               "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.

Parent field Field Required Minimum characters Maximum characters Other requirement

templateType

Yes

Valid template type

data

Yes

version

Yes

Must be "1.0"

data

 content Yes
replyMessage No

content

 title Yes

1

100

Should be a description for promptless templates
elements Yes

1 item

6 items

This is an array of elements. Maximum 6 elements in the array.
subtitle No

0

200

imageType No

0

50

Must be "URL"
imageData No

0

200

Must be a valid public Amazon S3 URL
imageDescription No

0

50

elements

 title Yes

1

100

subtitle No

0

200

imageType No

0

50

Must be "URL"
imageData No

0

200

Must be a valid public Amazon S3 URL
imageDescription No

0

50

Cannot exist without an image

replyMessage

 title Yes

1

100

subtitle No

0

200

imageType No

0

50

Must be "URL"
imageData No

0

200

Must be a valid public Amazon S3 URL
imageDescription No

0

50

Cannot exist without an image

Time picker template

Following are two examples of how the time picker template renders information in a chat.

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

  • Bold text is a mandatory parameter.

  • In some cases, if the parent element exists in the request and it isn't mandatory/bold, but the fields in it are, then the fields are mandatory. For example, see data.replyMessage structure in the following template. If the structure exists, title is mandatory. Otherwise complete replyMessage is optional. 

{
   "templateType":"TimePicker",                                 (mandatory)
   "version":"1.0",                                             (mandatory)
   "data":{                                                     (mandatory)
      "replyMessage":{
         "title":"Thanks for selecting",                        (mandatory)
         "subtitle":"Appointment selected",
      },
      "content":{                                               (mandatory)
         "title":"Schedule appointment",                        (mandatory)
         "subtitle":"Tap to select option",
         "timeZoneOffset":-450
         "location":{
            "latitude":47.616299,                               (mandatory)
            "longitude":-122.4311,                              (mandatory)
            "title":"Oscar"                                     (mandatory)
            "radius":1,
         },
         "timeslots":[                                          (mandatory, 1-20 items)
               {
                  "date" : "2020-10-31T17:00+00:00"             (mandatory)
                  "duration": 60,                               (mandatory)
               },
               {
                  "date" : "2020-11-15T13:00+00:00"            (mandatory)
                  "duration": 60,                              (mandatory)
               },
               {
                  "date" : "2020-11-15T16:00+00:00"            (mandatory)
                  "duration": 60,                              (mandatory)
               }
            ],           
         }
      }
   }
}

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.

Parent field Field Required Minimum characters Maximum characters Other requirement

templateType

Yes

Valid template type

data

Yes

version

Yes

Must be "1.0"

data

 replyMessage No
content Yes

replyMessage

 title Yes

1

100

subtitle No

0

200

title

 Yes

1

100

Should be description for promptless templates
subtitle No

0

200

content

title

 Yes

1

100

Should be description for promptless templates
subtitle No

0

200

timezone offset No

-720

840

This is an optional field when not set. Our sample client defaults to the user's timezone. If set, this displays per the timezone entered. The field should be an integer representing the number of minutes from GMT, specifying the timezone of the event's location.
location No

timeslots Yes

1

20

This is an array of timeslots. Maximum of 20 elements in the array.

location

 longitude Yes

-180

180

Must be double

latitude Yes

-90

90

Must be double

title Yes

1

100

radius

 No

0

200

timeslots

 date Yes

Should be in ISO-8601 time format: YYYY-MM-DDTHH.MM+00.00

For example:

"2020-08-14T21:21+00.00"
duration Yes

1

3600