Clarity Webchat

In addition to the text, button, quick replies, image, and carousel responses which are configurable via the Clai admin screens, there is also the ability to define a Custom Response that can contain a custom defined payload. These custom payload responses would typically be generated dynamically by custom actions but can also be statically entered into the custom response in conversation builder.

This section describes the custom response templates that the webchat can support.

Charts

Using a custom payload you can display charts in the Clai webchat.

Bar Chart example in webchat

The Clai webchat ships with the chartjs library embedded. Chartjs supports the following chart types:

Line Chart
Bar Chart
Doughnut and Pie Charts
Polar Area Chart

The Clai webchat custom response template uses the chartjs data format wrapped in a custom attachment wrapper as show below:

custom:
  attachment:
    type: chart
    payload:
      data:
        datasets:
          - backgroundColor:
              - 'rgba(0,63,92,0.65)'
              - 'rgba(255,166,0,0.65)'
              - 'rgba(249,93,106,0.65)'
            borderColor:
              - 'rgba(0,63,92, 1)'
              - 'rgba(255,166,0, 1)'
              - 'rgba(249,93,106, 1)'
            borderWidth: '0'
            data:
              - '990000'
              - '220080'
              - '1322400'
            label: Project-wise Budget
        labels:
          - 'PG1000: Online Web Portal Program'
          - 'PR2012: Financial Process Audit'
          - 'PR2013: Cloud Computing Enhancements'
      payload_value:
        - label: 'PG1000: Online Web Portal Program'
          id: '5001080'
        - label: 'PR2012: Financial Process Audit'
          id: '5002057'
        - label: 'PR2013: Cloud Computing Enhancements'
          id: '5002058'
      text: 'Monthly Budget '
      typeChart: bar
      options:
        indexAxis: 'y'
        scales:
          x:
            beginAtZero: 'true'

The key elements within custom/attachment are as follows:

Element	Value
type	`chart`
payload/data	the content of the payload is formatted as per the chartjs data requirement but should include the typeChart, payload_Value and datasets elements.

Tables

Tables can be displayed in Clai webchat using a custom response.

Table example in webchat

To display a table use the following example attachment data in the custom response.

table:
  limitrow: 5
  headings:
    - Resource
    - Timeperiod
    - Hours
  data:
        - - text: Arpel, Ian
            payload_type: text
          - text: 3 May, 2021
            payload_type: text
          - text: 30
            payload_type: text
        - - text: Arpel, Ian
            payload_type: text
          - text: 10 May, 2021
            payload_type: text
          - text: 37.5
            payload_type: text
        - - text: Arpel, Ian
            payload_type: text
          - text: 17 May, 2021
            payload_type: text
          - text: 37.5
            payload_type: text
        - - text: Arpel, Ian
            payload_type: text
          - text: 24 May, 2021
            payload_type: text
          - text: 37.5
            payload_type: text
        - - text: Arpel, Ian
            payload_type: text
          - text: 31 May, 2021
            payload_type: text
          - text: 30
            payload_type: text
        - - text: Arpel, Ian
            payload_type: text
          - text: 6 June, 2021
            payload_type: text
          - text: 30
            payload_type: text
  stylehead: 'border:1px solid silver;padding:8px;background:#fff;color:#000'
  stylebody: 'border:1px solid silver;padding:8px;color:blue'

The key elements within custom/attachment are as follows:

Element	Value
type	`table`
payload/limitrow	the number of rows to show without the displaying the `show more` button.
payload/headings	Defines the heading column text.
payload/data	an entry for each row of data.

For the payload data rows each row can be defined as follows.

Element	Value
payload_type	`text` \| `url` \| `url_self` \| `payload`
text	The text to display on screen.
payload	The destination url or intent. Not required where the payload_type is `text`.

where the payload_type actions are as follows:

text displays text in the table
url displays as link in the window that will open a new tab at the url in the browser
url_self displays as link in the window that will redirect to the url in the current underlying window
payload displays as link in the windows that will trigger an intent in the rasa server

Like & Dislike

The Like & Dislike response payload enables the webchat to display thumbs up and thumbs down buttons that can then have associated intents to initiate. This is used to build a story in Clai admin to support obtaining feedback from users.

The video shows an example of how this can be used.

The response payload required is as follows:

custom:
  attachment:
    type: likedislike
    payload:
      quick_replies:
        - payload: like_intent
          title: like
        - payload: dislike_intent
          title: dislike

The key elements within custom/attachment are as follows:

Element	Value
type	`likedislike`
payload	uses the quick_replies response format

Video

Using the video custom response allows for the embedding of YouTube, vimeo and mp4 videos within the Clai webchat window.

Video example in webchat

To can display a Youtube video as follows:

video: {
tag: "Single sign on for clarity",
url: "https://www.youtube.com/embed/ezBanf_mBlI?controls=1&fs=1",
type: "video"
}

Alternatively if you want to link to an mp4 or m4v file on your website then you can set the payload type to mp4

video: {
url: "https://YOURWEBSITE/videos/video.mp4",
type: "mp4"
}

The key elements within custom/attachment are as follows:

Element	Value	Notes
type	`video` \| `mp4`	For streaming content use `video`; for non-streaming content use `mp4`
payload/src	The url to the video	If a relative link is used it will …

URL Redirect

The url_redirect custom response will automatically redirect the current page displayed in the current Window.

URL Redirect example in webchat

This example was generated using the following custom response.

custom:
  attachment:
    type: url_redirect
    payload:
      payload_type: url_self
      text: You have been redirect to the link
      payload: 'https://CLARITY/pmb/#/project/5002048/details'

The key elements within custom/attachment are as follows:

Element	Value
type	`url_redirect`
payload/type	`url_self`
payload/text	User defined text to display in response window after redirect.
payload/payload	the destination URL.

URL Link

The url_link custom response is similar to the url_redirect response but presents a button to the user to click to action the redirection.

Example of url link in webchat

This example was generated using the following custom response.

custom:
  text: Demonstration of the url link
  buttons:
    - type: self_url
      content_type: text
      title: Clai Docs
      url: 'https://clai-docs.pemari.com'

The key elements within custom are as follows:

Element	Value
text	The text to display prior to the buttons
buttons	Uses the button response/display type.