In this blog article, you will be introduced to the element in the Visual Flow Builder, be familiar and understand how it works to help to build your desired messenger bot.
- Trigger element
- Text element
- Image element
- Audio element
- Video element
- File element
- Button element
- Generic template element
- Carousel element
- Carousel single element
- Facebook media element
- Ecommerce element
- User input flow element
- Quick reply element
- New sequence element
- New postback element
- OTN element
- Action button element
Trigger element
The trigger element takes text data as keywords to start the messenger bot – you can add multiple keywords on the configure panel. This element is required to place at the beginning of the flow to trigger the bot to start when the user types in the keywords in the messenger.
Text element
The text element takes text data and prompts text messages or text reply to the users. You may insert the first name or the last name of the user into a text format, the element will capture the user’s information, allowing the bot to sound professional. You can activate the Typing on Display button and set the Delay in reply time to show the text message.
Image element
The image element takes image data, you are required to upload an image from your computer. It supports multiple image formats such as JPG, PNG and GIF.
Audio element
The audio element takes an audio file, you are required to upload an audio file from your computer. It supports multiple audio file formats such as AMR, MP3 and WAVE.
Video element
The video element takes a video file, you are required to upload a video file from your computer. It supports various video file formats such as MP4, FLV and WMV.
File element
The file element takes different types of documents, you are required to upload a file from your computer. It supports various file formats such as DOC, PDF, TXT, PPT, PPTX, XLS and XLSX.
Button element
The button element work as a button in the messenger bot. Double-click on the button element, you will see two fields – Button text and Button type on the right panel. You may create a name for the button in the Button text and select a Button type from the drop-down menu as shown below:
New postback button
When the new postback button is selected, a new postback element will appear in the editor connecting the button element.
Double-click on the new postback element to configure.
Postback button
When the postback button is selected, you are required to choose a page from the postback id. Click on the postback id field and the drop-down menu of predefined postback will appear and choose a postback id listed from it.
Web URL button
When the web URL button is selected, an additional field is provided to put the URL link so when a user clicks on the button, the user will be redirected to the page of the URL provided. Same as Webview (Full) and Webview (Compact) button.
Webview (Full) button
Webview (Compact) button
User birthday button
Create a user birthday button and change the text accordingly.
User email button
Create a user email button and change the text accordingly.
User phone button
Create a user phone button and change the text accordingly.
User location button
Create a user location button and change the text accordingly.
Call us button
When the call us button is selected, proceed to put the company contact number in the mobile/phone field so when the user press the button it will automatically call the number that you have input.
Unsubcribe button
Create a unsubscribe button for user to unsubscribe services or messages.
Resubscribe button
Similarly, when creating a resubscribe button for user to resubscribe services or messages.
Chat with human button
When the chat with human button is selected, the user have the option to talk with a human for enquiries.
Chat with robot button
Likewise, when the chat with robot button is selected, the user can start talking to the bot again.
Generic template element
The generic template element allows you to create a template, you are required to add an image, an URL, a title and a subtitle. Drag the generic template element from the dock menu and drop it on the editor, the template will be attached with a button element. Double-click and add the data for both elements on the right panel. Besides the button element, you may add a quick reply element to the output socket called Quick replies.
Carousel element
The carousel element only works as the parent of carousel single element, it does not receive data. Drag and drop the carousel element, it will be attached to three carousel single elements with three-button elements connecting to each carousel single element. Double-click on the carousel single element and the button element, add data accordingly on the right panel.
Carousel single element
You may also add more carousel single elements to the carousel element. The carousel single element acts like a generic template, you are required to add an image, a link, a title and a subtitle. The carousel single element is the subset of the carousel element and that means it could only be connected to the carousel element.
Facebook media element
The Facebook media element will display a media posted on your Facebook page. Drag and drop the Facebook media element into the editor, add the link to any image or video post of your page and the user will see the media post in the messenger chatbot instantly.
Ecommerce element
The e-commerce element allows you to make a carousel generic reply to the products of your e-commerce store. First, you need to select an e-commerce store you have created from the dropdown menu, then you have to select products to make a carousel or generic replies of these products. Lastly, you are required to add text data for the buy now button. That’s it, you will create a nice carousel or generic reply of the products in the e-commerce store that you have chosen.
User input flow element
The element allows you to add user input flow to your bot easily. Select a predefined campaign for user input flow in the drop-down menu. You are required to create a campaign first before the selection of the predefined campaign. Please read the article to know how to create a campaign for User Input Flow.
Quick reply element
The quick reply element will show auto-reply messages to the users. You are required to connect the quick reply element with the elements that have an output socket called Quick replies. There are a few quick reply type that you can select from the dropdown menu – New postback, postback, phone and email.
If you have selected a new postback, a button text field will appear. Fill up the field and click ok. A new postback element will instantly appear in the editor connecting the quick reply element. Double-click on the new postback element and fill up the details accordingly in the right panel as circled. In the dropdown menu, you will see a list of new sequences and other sequences that you may have created earlier. When you select a new sequence, a new sequence element connecting three sequences single element and three new postback element will appear. To create the sequence, please follow the instruction in the sequence element section on how to create a sequence message.Â
New sequence element
The new sequence element will allow you to create a conditional flow of messages. Double-click the element on the editor and input the details in the right panel. The bot can be performed in different ways based on the user type.
New postback element
The new postback element is used to create campaigns for sequence messages. The element is placed before the new sequence and is connected to it. You may start a bot with a new postback element. Double-click a new postback element to configure by choosing a title, a label and a predefined sequence from the dropdown menu. To start a bot with a new postback, you are required to connect the trigger element with the new postback as shown below.
OTN element
The OTN element shows users a one time notification. You are required to give a title and select a predefined OTN postback ID from the dropdown menu.
Action button element
Beside trigger element, you can start a bot flow with an action button element. In this case, you have to connect the action button element to the action button socket of the start bot flow element. You are required to select one of the actions listed in the dropdown menu.
