Timeline Markup can be combined with “context” from other sources and using Apache’s Velocity Template Language you can dynamically assemble an interface using a number of existing components.

Timeline Markup is strict XML. All the rules of XML apply and an XML validator will at least tell you if your markup is well formed.


  • The top level element for the Timeline
  • All Timeline Components must be contained in the TimelineMessage element

There is a 100kb limit on messages. If a message is larger than that it will not appear in the timeline. When creating a message with multiple base64 images, e.g. a carousel, ensure that the combined size of the images is under 100kb.

The parameters for a TimelineMessage are:

Name Type Default Values Description
minimumDisplayTime number 1 second between 1 and 5 the number of seconds before the next message should display

An example of the simplest TimelineMessage element is:


Timeline messages can also delay the message that comes after it by using the minimumDisplayTime:

<TimelineMessage minimumDisplayTime="1.5">

You can send multiple timeline elements in one message

  <TextMsg>Second Message</TextMsg>

Interaction Types

Selectable timeline elements can generate either utterances or markup interactions when the user selects items.

  • For utterances: interactionType='utterance' (default)
  • For markup interactions: interactionType='event'

Event Supported Elements

  • Broadcast Messages
  • Buttons
  • Detail View
  • Drop-downs
  • File Uploads
  • Lists (Selectable)
  • Maps (Get User’s Location)
  • Suggested Prompts
  • Star Ratings

Example Broadcast Message using markup interactions

     body="This fund will be discontinued next month. We'll be moving you to another fund."
       <Option title="Select alternative fund" id="1234" />

Example Buttons using markup interactions

    <ButtonPromptContainer interactionType="event">
      <ButtonPrompt label="Option One" id="1"/>
      <ButtonPrompt label="Option Two" id="2"/>

Example Detail View using markup interactions

    description="Check out our bots"

Example Dropdown using markup interactions

  <Dropdown value="3" title="When would you like to set it?" interactionType="event">
    <DropdownItem id="1" title="Option 1" />
    <DropdownItem id="2" title="Option 2" />
    <DropdownItem id="3" title="Option 3" />

Example File Upload using events

    <FileUpload promptText="Could you provide photos of the front and back of your licence?" promptButtonText="Upload Pictures" retryButtonText="Replace" confirmationText="All set!" confirmButtonText="Complete" interactionType="event">
      <UploadItem fileType="image/*" label="Front" name="LicenceFront"/>
      <UploadItem fileType="image/*" label="Back" name="LicenceBack"/>

Example List using events

  <List title="Please select a number" selectable="true" interactionType="event">
     <Item title="Option one is here" id="1"/>
     <Item title="Option two is here" id="2"/>
     <Item title="Option three is here" id="3"/>
     <Item title="Option four is here" id="4"/>

Example Map using markup interactions

    title="Please confirm your location"

Example Suggested Prompts using markup interactions

    <SuggestionPrompt interactionType="event">
      <Option title="30 x 30" id="1111" />
      <Option title="32 x 32" id="2222" />
      <Option title="33 x 32" id="3333" />
      <Option title="34 x 34" id="4444" />
      <Option title="35 x 34" id="5555" />
      <Option title="v36 x 36" id="6666" />
      <Option title="v37 x 35" id="7777" />
      <Option title="v38 x 36" id="8888" />

Example Star Rating using markup interactions

    title="Can you please rate our service today?"