Add interactive messages to 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.
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
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.
-
One image shows three buttons, each one with the name of a fruit in text: apple, orange, banana.
-
The second image shows a picture of a store and then under it, three buttons, each one with the name, image, and price of the fruit.

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 completereplyMessage
is optional.
{ "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.
To send unlimited options, implement action buttons in your application. For more
information, see Implementation of action buttons in interactive message list
picker/panel
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 |
400 |
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. To send unlimited elements, use the action buttons feature. |
|
subtitle | No | 0 |
400 |
||
imageType | No | 0 |
50 |
Must be "URL" |
|
imageData | No | 0 |
200 |
Must be a valid publicly accessible URL |
|
imageDescription | No | 0 |
50 |
||
referenceId | No |
|
String. Only required for action button feature. |
||
listId | No |
|
String. Only required for action button feature. |
||
preIndex | No |
|
Number. Only required for action button feature. |
||
nextIndex | No |
|
Number. Only required for action button feature. |
||
elements |
title | Yes | 1 |
400 |
|
subtitle | No | 0 |
400 |
||
imageType | No | 0 |
50 |
Must be "URL" |
|
imageData | No | 0 |
200 |
Must be a valid publicly accessible URL |
|
imageDescription | No | 0 |
50 |
Cannot exist without an image |
|
actionDetail | No |
|
|
Only required for action button feature. Must be "PREVIOUS_OPTIONS" or "SHOW_MORE". |
|
replyMessage |
title | Yes | 1 |
400 |
|
subtitle | No | 0 |
400 |
||
imageType | No | 0 |
50 |
Must be "URL" |
|
imageData | No | 0 |
200 |
Must be a valid publicly accessible URL |
|
imageDescription | No | 0 |
50 |
Cannot exist without an image |
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.
-
One image shows one date, and under it, one time slot.
-
The second image shows one date, and under it, two time slots.

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 completereplyMessage
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-40 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 |
400 |
Should be description for promptless templates |
subtitle | No | 0 |
400 |
||
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 |
40 |
This is an array of timeslots. Maximum of 40 elements in the array. |
|
location |
longitude | Yes | -180 |
180 |
Must be double |
latitude | Yes | -90 |
90 |
Must be double |
|
title | Yes | 1 |
400 |
||
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 |
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:
-
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, completereplyMessage
is optional.
{ "templateType":"Panel", (mandatory) "version":"1.0", (mandatory) "data":{ (mandatory) "replyMessage":{ "title":"Thanks for selecting!", (mandatory) "subtitle":"Option selected", }, "content":{ (mandatory) "title":"How can I help you?", (mandatory) "subtitle":"Tap to select option", "imageType":"URL", "imageData":"https://interactive-msg.s3-us-west-2.amazonaws.com/company.jpg", "imageDescription":"Select an option", "elements":[ (mandatory, 1-10 items) { "title":"Check self-service options", (mandatory) }, { "title":"Talk to an agent", (mandatory) }, { "title":"End chat", (mandatory) } ] } } }
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
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 | ||||
content |
title | Yes | 1 |
400 |
Should be a description for promptless templates |
subtitle | No | 0 |
400 |
||
elements | Yes | 1 item |
10 items |
This is an array of elements. Maximum 10 elements in the array. |
|
imageType | No | 0 |
50 |
Must be "URL" |
|
imageData | No | 0 |
200 |
Must be a valid publicly accessible URL |
|
imageDescription | No | 0 |
50 |
Cannot exist without an image |
|
referenceId | No |
|
String. Only required for action button feature. |
||
listId | No |
|
String. Only required for action button feature. |
||
preIndex | No |
|
Number. Only required for action button feature. |
||
nextIndex | No |
|
Number. Only required for action button feature. |
||
elements |
title | Yes | 1 |
400 |
|
actionDetail | No |
|
|
Only required for action button feature. Must be "PREVIOUS_OPTIONS" or "SHOW_MORE". |
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
The following image of a chat box shows an example list picker with rich formatting in the title and subtitle.
-
The title How can we help? aws.amazon.com is bold and contains a link.
-
The subtitle contains italics and bold text, a bulleted list, and a numbered list. It also shows a plain link, text link, and sample code.
-
The bottom of the chat box shows three list picker elements.

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.
-
Multi-line format: The following code sample shows how to author lists in markdown in a multi-line format.
const MultiLinePickerSubtitle = `This is some *emphasized text* and some **strongly emphasized text** This is a bulleted list (multiline): * item 1 * item 2 * item 3 This is a numbered list: 1. item 1 2. item 2 3. item 3 Questions? Visit https://plainlink.com/faq [This is a link](https://aws.amazon.com) This is \`
\` ` const PickerTemplate = { templateType: "ListPicker|Panel", version: "1.0", data: { content: { title: "How can we help?", subtitle: MultiLinePickerSubtitle, elements: [ /* ... */ ] } } }
-
Single line format: The following example shows how to author a subtitle in a single line by using
`\r\n`
line break characters.const SingleLinePickerSubtitle = "This is some *emphasized text* and some **strongly emphasized text**\r\nThis is a bulleted list:\n* item 1\n* item 2\n* item 3\n\nThis is a numbered list:\n1. item 1\n2. item 2\n3. item 3\n\nQuestions? Visit https://plainlink.com/faq\r\n[This is a link](https://aws.amazon.com)\r\nThis is `<code/>`"; const PickerTemplate = { templateType: "ListPicker|Panel", version: "1.0", data: { content: { title: "How can we help?", subtitle: SingleLinePickerSubtitle, elements: [ /* ... */ ] } } }
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)
You can also set the target attribute of a link by using rehype syntax (default is
`target="_blank"`
). For example:
[plain
text](https://example.com)<!--rehype:target=_self-->