Interaction Types


title: Introduction

weight: 3

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>