Message Formats
Text
The Text
component also supports some basic Markdown:
Typing, Wait
Display a typing indicator for the requested time expressed in milliseconds. Obviously, Wait
is also supported (it simply does not display a typing indicator or anything for the given duration).
Image
Question, Button
If you need to retrieve a specific data when clicking on either button, use the payload
argument of the Button component:
The Assistant channel also supports single Button
components. However, as cross-channel support for single buttons is not guaranteed, we encourage you to use the standard Question component instead, with a title.
QuickReply
Quick replies are similar to Questions, where the buttons are removed from view once the user has selected one of them. In a majority of scenarios, you should prefer QuickReplies over regular questions, especially when you don't want the user to be able to scroll up and select one of the buttons after they have made a first choice. Questions should be used when a button is used as a trigger to a given flow (as configured in the bot's AI Rules).
Video, Audio
The Video component supports links to mp4 files, as well as Youtube, Vimeo and Dailymotion URLs. The Audio component supports links to mp3 files, as well as Spotify, Soundcloud and Deezer URLs.
Standard limitations apply: if the end user is not logged in to a valid spotify/deezer/soundcloud account, only 30s will be playable in the audio component.
For full control over the clip, prefer using a standard mp3 file URL.
Url
The Url
component will automatically retrieve the target's favicon if available. If a text
parameter is present, it will be used as the component's title.
Carousel, Card
A Carousel
is essentially a collection of Card
elements A single Card
will display as a Carousel
of 1 element. Each Card
can have a maximum of 2 Button
elements.
The cards themselves can be made clickable by adding an optional default_action
Url() parameter:
The carousel can also automatically navigate horizontaly by adding the optional autoplay
parameter (which defaults to false
):
Calendar
This component will display a rich calendar in the webapp. By default, when passed with no argument, a simple single-date datepicker will appear:
Optional parameters allow to set a min_date
and/or max_date
(by unix timestamp, in milliseconds) or an input_mode
to accept single
(the default) multiple
or range
inputs by the user:
The event
value of a Calendar input will be comma-separated values of all user inputs. Also, event.input_mode
will be set to the mode of the requested calendar, so that you can differenciate between single
, multiple
and range
modes when receiving values.
Input
To gain some control over what a user can enter in a form (for example, if you need to make sure they only enter an email address or a valid number when required), you can also use the Input
component.
There are several variants of input fields: email
, text
, textarea
, number
and password
. By default, inputs are type="text"
. All parameters are optional, and the basic usage is as follows:
You can check this reference about the minlength and maxlength parameters: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/text#additional_attributes
A completely bare say Input()
component will result in a simple, empty text input.
Inputs with type="number"
can have some different parameters, just like HTML inputs (all are optional as well):
You can check this reference about the min and max parameters: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Input/number#additional_attributes.
To learn more about the inputs with type="password", read the documentation about secure inputs (hold_secure
): https://docs.csml.dev/language/standard-library/keywords#hold_secure
Radio
Display a radio buttons component:
Multiselect, Checkbox
If you want to let users select multiple options, the Multiselect()
or `Checkbox()` components are a great solution. Users will be able to select any number of options in the given list. You can force a min
and max
number of choices, or if required=true
, it means that at least one option must be selected to continue.
Both the Multiselect and Checkbox components work exactly the same, only the display will be different. Try both to find out which one suits you best!
When several options are selected, you will receive a comma-separated list of the corresponding payloads (not necessarily the button's title!), in the order they were selected by the user.
Dropdown
Like the Radio component, the Dropdown lets users pick an option from a list:
LaTeX
LaTeX is a popular language that lets you write (among other things) complex math formulas. The webapp and chatbox include KaTeX to support this language natively with a custom component:
You can find more examples of supported formats on the KaTeX documentation: https://katex.org/docs/supported.html. Please keep in mind that backslashes (\
) must be escaped properly in your code!
You can also add LaTeX inline in any standard text like by encapsulating it inside {latex}...{/latex}
tags:
Signature
You can display a simple signature field i.e to collect user consent and receive it as a png file.
Last updated