Message components
Last updated
Was this helpful?
Last updated
Was this helpful?
To design your conversational flow, you can use multiple components like text messages, buttons and carousels. Depending on the channel you publish the bot to (Facebook Messenger, web, Slack, Telegram, ...), these will be rendered slightly differently.
Text messages are the simplest components. Most channels will show them as 'text bubbles'.
Buttons are a useful way to guide the conversation by giving the user a limited set of options. You can add a maximum of three buttons to a message.
For each button, you need to define a next dialog state. Optionally, you can add key-value combinations to a button. These will set variables depending on which button the user has clicked. These variables can then later be used to route dialog states, do an API call or render specific text.
You can link a button to an external URL.
This button will initiate a call if the user is working on a mobile device.
Using the Media template you can make the bot send files to your users.
All typical image file types, such as jpg, png and gif are supported.
Videos are available in the emulator, web widget and Facebook channel. The following video formats are supported:
mp4
ogv
webm
A nice addition to the Facebook Messenger channel is that people can share the video with friends by clicking the button on the right side of the video:
The audio widget is available in the emulator, the web widget and Facebook Messenger. The only supported audio format is MP3.
File attachments are available in the emulator, web widget and Facebook Messenger. Currently, only pdf files are allowed.
Quick replies behave similarly to buttons. They are rendered horizontally next to each other in a scrollable container. This means you add as many quick replies as you see necessary.
For each quick reply, you need to define a next dialog state. Optionally, you can add key-value combinations. These will set variables depending on which button the user has clicked. These variables can then later be used to route dialog states, do an API call or render specific text.
Quick replies only support next dialog states, no links to external websites. You can use a button for that.
Optionally, you can add an icon to a quick reply by specifying its URL.
This button will save your location to a defined variable. Define the language for all location related data.
Carousels are a way to visualize options with images. Each option can have up to three buttons with separate actions, but that is not required. These buttons are the same buttons as in a button template with the same properties like payloads an URL, with the addition of an extra share button.
The share button opens a share dialog in Facebook Messenger enabling people to share message bubbles with friends. A message bubble is a carousel card.
When a new user receives the bubble he can share it again with other friends by tapping the same share button. When tapping a postback button the user is send to the start page of the bot.
You can only use share button in generic templates (carousels) items and only items with maximum one url will be shared by Facebook. It is not possible to change the button title: Facebook Messenger will translate the button to the user his preferred language profile setting.
The List Template is a template that allows you to present a set of items vertically.
Each item may render a button which can be used as a call-to-action (postback). You can also provide a URL to be opened when an item is tapped.
Each list template message can also have up to 1 global button which will be rendered below the item list.
Lists can be rendered in two different ways: Large and Compact.
The first way renders the first item with a cover image with text overlaid. This is good to making the first item appear prominently above the other items.
The second way renders each item identically and is useful for presenting a list of items where no item is shown prominently.
Use the file upload template to let users upload a file directly from their device to the bot.
Configuring the File Upload as shown above will result in an Upload button in the conversation:
If the upload failed because there was a problem with the connection, or the file the user chose was above 10 MB, the bot will go to the "failed upload" bot dialog.
Facebook has renamed Carousel to Generic Template. You can read about their guidelines for Generic Templates .
The URL where the uploaded file is stored can be found under the {uploadedFileUrl} variable in the session of the user. You can reuse this variable to show the file the user uploaded, by using the template. Alternatively, you can retrieve the URL with an to store the files on your servers.
