Date Picker Message

Date picker messages allow the user to choose a date from a graphical calendar interface within the chat window which is then saved to an attribute for further use.

When to use date picker messages

Date picker messages simplify the process of inputting dates in a consistent format. This can often be challenging if you need to constrain the range of dates you would like to accept as input, or if you are serving an international user base with differing date formats.

Users are prompted with a clickable input box.

When clicked, a calendar appears

After selecting a date it is entered into the input box for the user's confirmation.

How to create a date picker message

Via the custom message in Message Editor

Navigate to the Message Editor and create a Custom Message. Copy the XML snippet at the bottom of this page into the black box and your chat message will appear in the Preview panel.

Fill in the template with the properties of your particular message and when you are happy with it make sure to save your message and test it in the Test Preview chat window.

Saving a message: Always remember to hit 'Save Message' before closing or navigating away from the edit screen.

If you change your mind and select a different message type after generating the XML code, the new message code will be appended in the same window so make sure to delete the old message code.

Properties

<text> is the title that appears at the top of the calendar. This could be Select Appointment or as simple as Date for example.

<callback> As with button messages, the callback parameter defines the user intent that is triggered when the user clicks the submit button. This should route the user to the next step in the conversation.

<submit_text> defines the text that appears on the button that advances the conversation.

To indicate range, use either <no_past_dates> and <no_future_dates> or <min_date> and <max_date> :

• <no_past_dates> and <no_future_dates> take boolean values and narrow the scope of dates that are displayed to the user in the calendar. These allow you to constrain the range relative to "today".

• <min_date> and <max_date> define the scope of available dates the user can select. The input format is YYYY-MM-DD ie. the 30th October 2019 would be 2019-10-30. The <max_date> is the last/most recent date the user can select.

<attribute_name> defines the attribute to which the chosen date is stored.

XML Snippet

Remember to use only one of the options to indicate range.

<date-message>
  <text>Date Text</text>
  <callback>date_callback</callback>
  <submit_text>Date Submit Text</submit_text>
  <no_past_dates>true</no_past_dates>
  <no_future_dates>false</no_future_dates>
  <max_date>today</max_date>
  <min_date>20200101</min_date>
  <attribute_name>date_attribute_name</attribute_name>
</date-message>

Interaction with other message types

Date picker messages should come last in in your authored messages as the <submit_text> button advances the conversation. They can be combined with text, image and audio messages (seen in this example).