Interaction Node

This node allows for mark-up language to be entered that expects input , specifically to add features into your flow which can be displayed in messenger.

When users interact with the timeline elements set up in these nodes, input events are set to the bot in msg.payload.user.interaction based on how they interacted and a relative value will be placed into msg.payload.user.message.

When using this node if a user types a message instead of interacting with the available options the node will always output on the bottom port. The message the user typed will be available to the next node at msg.payload.user.message

Timeline Elements

Broadcast message

When a broadcast message is used in the markupInteraction node with the property interactionType=event, Outputs will be generated using the Options in the broadcast, or closes the broadcast.

Example Markup

For the following markup

<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="First Option" id="1" />
       <Option title="Second Option" id="2" />
  </BroadcastMsg>
</TimelineMessage>

Output Context

When user closes the BroadcastMsg

{
  "payload": {
    "user": {
      "message": "broadcastMessageClosed1",
      "interaction": {
        "id": "broadcastMessageClosed",
        "title":"broadcastMessageClosed"
      }
    }
  }
}

When a user selects an option

{
  "payload": {
    "user": {
      "message": "1",
      "interaction": {
        "id": "1",
        "title":"First Option"
      }
    }
  }
}

Button Prompts

Example Markup

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

Output Context

{
  "payload": {
    "user": {
      "message": "0",
      "interaction": {
        "id": "0",
        "label":"Option One",
        "title":"Option One"
      }
    }
  }
}

Option Card

Example Markup

<TimelineMessage>
<OptionCard interactionType="event">
    <Option title="Option One" id="0"/>
    <Option title="Option Two" id="1"/>
    <Option title="Option Three" id="2"/>
</OptionCard>
</TimelineMessage>

Output Context

{
  "payload": {
    "user": {
      "message": "0",
      "interaction": {
        "id": "0",
        "title":"Option One",
        "timestamp": "Wednesday, July 3rd 2019 01:00:00 am"
      }
    }
  }
}

Example Markup

<TimelineMessage>
  <Dropdown value="3" title="Select an appropriate option" description="When would you like to set it?" confirmButtonText="Select" interactionType="event">
    <DropdownItem id="1" title="Option 1" />
    <DropdownItem id="2" title="Option 2" />
    <DropdownItem id="3" title="Option 3" />
  </Dropdown>
</TimelineMessage>

{
  "payload": {
    "user": {
      "message": "1",
      "interaction": {
        "id": "1",
        "title":"Option 1",
        "timestamp": "Wednesday, July 3rd 2019 01:00:00 am"
      }
    }
  }
}

FileUpload

Example Markup

<TimelineMessage>
    <FileUpload
    promptText="Could you post a picture of the other vehicle?"
    promptButtonText="Upload Picture"
    retryButtonText="Replace"
    confirmButtonText="Complete"
    confirmationText="All set!"
    interactionType="event">
        <UploadItem fileType="image/\*" name="vehicle"/>
    </FileUpload>
</TimelineMessage>

Output Context

Single file upload

{
  "payload": {
    "user": {
      "message": "http://url.of.file",
      "interaction": {
        "files": ["http://url.of.file"]
      }
    }
  }
}

Multi-file upload

{
  "payload": {
    "user": {
      "message": "http://url.of.first.file",
      "interaction": {
        "files": ["http://url.of.first.file", "http://url.of.second.file"]
      }
    }
  }
}

List

Example Markup

<TimelineMessage>
    <List type="disc" selectable="true" preventRetries="true" interactionType="event" >
      <Item title="Item one" id="1"/>
      <Item title="Item two" id="2" />
      <Item title="Item three" id="3" />
    </List>
</TimelineMessage>

Output Context

For non multi-select lists

{
  "payload": {
    "user": {
      "message": "1",
      "interaction": {
        "id": "1",
        "title":"Item one"
      }
    }
  }
}

For multi select lists, message will be the id of the first item selected

{
  "payload": {
    "user": {
      "message": "1",
      "interaction": {
        "selectedValues": [
          {
            "id": "1",
            "title": "Option one is here"
          },
          {
            "id": "2",
            "title": "Option two is here"
          }
        ]
      }
    }
  }
}

SecureFileUpload V2

Example Markup

Single file upload markup sample

<TimelineMessage>
    <SecureFileUpload
    promptText="Could you post a picture of the front of your drivers license?"
    promptButtonText="Upload Picture"
    retryButtonText="Replace"
    confirmButtonText="Complete"
    confirmationText="All set!"
    interactionType="event"
    version="2"
    preventRetries="true">
        <UploadItem fileType="image/\*" name="drivers-license-front"/>
    </SecureFileUpload>
</TimelineMessage>

Output Context

Single file upload markup interaction sample

{
  "payload": {
    "user": {
      "message": "Passed",
      "interaction": {
        "version": 2,
        "status": "Passed",
        "numberOfDocuments": 1,
        "numberOfDocumentsPassed": 1,
        "numberOfDocumentsFailed": 0,
        "passedDocuments": ["drivers-license-front"],
        "failedDocuments": [],
        "documents": {
          "drivers-license-front": {
            "notification": "SB:::FileProcessorPipelinePassed:::29cbdf4f-8163-473e-9d44-488ab889fd70",
            "status": "Passed",
            "stage": "FileProcessorPipeline",
            "docId": "29cbdf4f-8163-473e-9d44-488ab889fd70",
            "metadata": {
              "contentLength": 106858,
              "contentType": "image/jpeg",
              "submissionDetails": {
                "submissionId": "7d3bbf4a-03e4-4ed6-8837-8d5653701292",
                "fileIndex": 0,
                "fileCount": 1
              },
              "fileExtension": "jpg"
            },
            "pipelineResults": {
              "validation": {
                "status": "Passed",
                "contentLengthCheck": {
                  "status": "Passed"
                },
                "fileTypeCheck": {
                  "status": "Passed"
                },
                "validationWebhookCheck": {
                  "webhookResponse": {
                    "statusCode": 200,
                    "documentStatus": "ACCEPTED"
                  }
                }
              },
              "processing": {
                "status": "Passed",
                "documentValidCheck": {
                  "status": "Passed"
                },
                "deliveryWebhookCheck": {
                  "webhookResponse": {
                    "statusCode": 200,
                    "documentStatus": "ACCEPTED"
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}

SecureFileUpload V2 Notes

  • To start using version 2 of the SecureFileUpload node please contact ServisBOT, to enable version 2 for your organization.

In both of the markup interaction samples above you can consider the following:

  • status - The possible values are Passed or Failed, if any document has a status of Failed then the top level status will be Failed.
    • The status key can be found in multiple places within the markup interaction and the possible values are always Passed or Failed.
  • passedDocument - The names of the documents that passed. The names are taken from the UploadItem markup name attribute, and will be sorted alphabetically.
  • failedDocuments - The names of the documents that failed. The names are taken from the UploadItem markup name attribute, and will be sorted alphabetically.
  • documents - An object containing the details of each document that was uploaded, the top level keys are named after the UploadItem markup name attribute.
    • pipelineResults - Contains the results of the steps in the pipeline
      • validation - Contains the details on the validation results in the pipeline
        • validationWebhookCheck - Details about the response of the validation webhook call, this is optional and may not be present.
          • statusCode - A valid HTTP status code
          • documentStatus - The document status returned by the webhook, possible values are ACCEPTED, INVALID, EXPIRED, UNKNOWN
      • processing - Contains the details on the processing results in the pipeline (OCR extraction, delivery webhook rules)
        • deliveryWebhookCheck - Details about the response of the delivery webhook call, this is optional and may not be present
          • statusCode - A valid HTTP status code
          • documentStatus - The document status returned by the webhook, possible values are ACCEPTED, INVALID, EXPIRED, UNKNOWN

SecureFileUpload V2 Ports

  • Top Port: The file was successfully processed and is considered a valid file according to the organization’s configuration.
  • Middle Port: The file was processed and was not considered a valid file according to the organization’s configuration.
  • Bottom Port: The user typed a message and did not interact with the markup, or there was an error.

The markup interaction samples above contain fields which may not always be present, as the pipeline results are dependent on an organization’s configuration, always access the keys with caution.

Star Rating

Example Markup

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

Output Context

{
  "payload": {
    "user": {
      "message": "5 out of 5",
      "interaction": {
        "count": 5,
        "max": 5,
        "title":"5 out of 5"
      }
    }
  }
}

Static Map

Example Markup

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

Output Context

When user accepts location

{
  "payload": {
    "user": {
      "message": "52, 52",
      "interaction": {
        "lat": 52.00,
        "lng": 52.00
      }
    }
  }
}

When user denies location

{
  "payload": {
    "user": {
      "message": "Location denied",
      "interaction": {
        "title": "Location denied"
      }
    }
  }
}

Suggestion Prompt

Example Markup

<TimelineMessage>
  <SuggestionPrompt interactionType="event">
    <Option title="30 x 30" id="0" />
    <Option title="32 x 32" id="1" />
    <Option title="33 x 32" id="2" />
    <Option title="34 x 34" id="3" />
    <Option title="35 x 34" id="4" />
    <Option title="v36 x 36" id="5" />
    <Option title="v37 x 35" id="6" />
    <Option title="v38 x 36" id="7" />
  </SuggestionPrompt>
</TimelineMessage>

{
  "payload": {
    "user": {
      "message": "30 x 30",
      "interaction": {
        "id": "0",
        "title": "30 x 30"
      }
    }
  }
}

Calendar

Expect the following interactions to go out of the following ports

Top Port: User selected a date from the calendar Bottom port: Errors, and Utterances

Example Markup

<TimelineMessage>
  <Calendar title="When would you like to set it?"
    dateTime="1562112000000"
  maxDate="1562457600000"
  epochFormat="true"
  interactionType="event"
  minDate="1562112000000"/>
</TimelineMessage>

Output Context

{
  "payload": {
    "user": {
      "message": "1562112000000",
      "interaction": {
        "epochFormat": 1562112000000,
        "relative": "2 days ago",
        "timestamp": "Wednesday, July 3rd 2019"
      }
    }
  }
}

DateTime

Expect the following interactions to go out of the following ports

Top Port: User selected a date from the date time Bottom port: Errors, and Utterances

Example Markup

<TimelineMessage>
  <DateTime
  title="When would you like to set it?"
  stage="confirmation" dateTime="1557246600000"
  timeFormat="12h"
  interactionType="event"/>
</TimelineMessage>

Output Context

{
  "payload": {
    "user": {
      "message": "1562112000000",
      "interaction": {
        "epochFormat": 1562112000000,
        "relative": "2 days ago",
        "timestamp": "Wednesday, July 3rd 2019 01:00:00 am"
      }
    }
  }
}

Time

Expect the following interactions to go out of the following ports

Top Port: User selected a time from the time element Bottom port: Errors, and Utterances

Example Markup

<TimelineMessage>
   <Time
   title="When would you like to set it?"
   dateTime="1557246600000"
   timeFormat="12h"
   interactionType="event"/>
</TimelineMessage>

Output Context

{
  "payload": {
    "user": {
      "message": "1562112000000",
      "interaction": {
        "epochFormat": 1562112000000,
        "relative": "2 hours ago",
        "timestamp": "Wednesday, July 3rd 2019 01:00:00 am"
      }
    }
  }
}

TextMsg

There is only a single port and the message with come out that port

Example Markup

<TimelineMessage>
  <TextMsg>Send me a message</TextMsg>
</TimelineMessage>

Output Context

{
  "payload": {
    "user": {
      "message": "hello",
      "interaction": {
        "message": "hello"
      }
    }
  }
}

LongForm

Expect the following interactions to go out of the following ports

Top Port: User provides feedback Middle Port: User cancels feedback Bottom Port: Errors, and Utterances

Example Markup

<TimelineMessage>
  <LongForm
  placeholder="Please leave feedback"
  interactionType="event"/>
</TimelineMessage>

Output Context

User provides feedback

{
  "payload": {
    "user": {
      "message": "submitted",
      "interaction": {
        "type": "submitted",
        "value": "Some feed back here",
        "timestamp": "Wednesday, July 3rd 2019 01:00:00 am"
      }
    }
  }
}

Output Context on Cancel

User provides feedback

{
  "payload": {
    "user": {
      "message": "cancelled",
      "interaction": {
        "type": "cancelled",
        "timestamp": "Wednesday, July 3rd 2019 01:00:00 am"
      }
    }
  }
}

CSAT

Expect the following interactions to go out of the following ports

Top Port: User provides feedback and star rating Middle Port: Does not provide feedback and start rating Bottom Port: Errors, and Utterances

Example Markup

<TimelineMessage>  
    <CSAT
        title="How would you rate this interaction?"
        interactionType="event"
    />
</TimelineMessage>

Output Context

User provides feedback and star rating

{
  "payload": {
    "user": {
      "message": "5 out of 5",
      "interaction": {
        "rating": true,
        "count": 5,
        "max": 5,
        "comment": true,
        "value": "Some feed back here",
        "timestamp": 1562112000000
      }
    }
  }
}

User provides feedback and no star rating

{
  "payload": {
    "user": {
      "message": "No rating given",
      "interaction": {
        "rating": false,
        "max": 5,
        "comment": true,
        "value": "Some feed back here",
        "timestamp": 1562112000000
      }
    }
  }
}

User provides star rating and no feedback

{
  "payload": {
    "user": {
      "message": "5 out of 5",
      "interaction": {
        "rating": true,
        "count": 5,
        "max": 5,
        "comment": false,
        "timestamp": 1562112000000
      }
    }
  }
}

User provides no star rating and no feedback

{
  "payload": {
    "user": {
      "message": "No feedback given",
      "interaction": {
        "rating": false,
        "comment": false,
        "timestamp": 1562112000000
      }
    }
  }
}