Add interactive messages to chat - Amazon Connect

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, contact 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