Introduction

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.

TimelineMessage

  • 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:

<TimelineMessage>
  <TextMsg>Hello</TextMsg>
</TimelineMessage>

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

<TimelineMessage minimumDisplayTime="1.5">
  <TextMsg>Hello</TextMsg>
</TimelineMessage>

You can send multiple timeline elements in one message

<TimelineMessage>
  <TextMsg>Hello</TextMsg>
  <TextMsg>Second Message</TextMsg>
</TimelineMessage>

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

<TimelineMessage>
  <BroadcastMsg
     title="Warning"
     body="This fund will be discontinued next month. We'll be moving you to another fund."
     style="warning"
     interactionType="event">
       <Option title="Select alternative fund" id="1234" />
  </BroadcastMsg>
</TimelineMessage>

Example Buttons using markup interactions

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

Example Detail View using markup interactions

<TimelineMessage>
  <DetailView
    title="ServisBOT"
    description="Check out our bots"
    url="https://servisbot.com"
    interactionType="event"
  />
</TimelineMessage>

Example Dropdown using markup interactions

<TimelineMessage>
  <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" />
  </Dropdown>
</TimelineMessage>

Example File Upload using events

<TimelineMessage>
    <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"/>
    </FileUpload>
</TimelineMessage>

Example List using events

<TimelineMessage>
  <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"/>
  </List>
</TimelineMessage>

Example Map using markup interactions

<TimelineMessage>
  <StaticMap
    title="Please confirm your location"
    interactionType="event"
  />
</TimelineMessage>

Example Suggested Prompts using markup interactions

<TimelineMessage>
    <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" />
    </SuggestionPrompt>
  </TimelineMessage>

Example Star Rating using markup interactions

<TimelineMessage>
  <StarRating
    title="Can you please rate our service today?"
    maxValue="5"
    preventRetries="true"
    interactionType="event"
  />
</TimelineMessage>