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