Estimated reading time: 10 minutes
How are you feeling after using our template from part 1? It's as easy as pie, right? After seeing a complete chatbot from part 1, are you ready to build your own chatbot without coding? This tutorial will help you use some simple blocks to start creating a conversation flow for "My Happiness Restaurant" as you see in part 1.
This BotStar tutorial contains plenty of screenshots and easy-to-follow step-by-step instructions on how to create a chatbot.
Activity: To start this lesson, I design an activity is to teach you how to build a simple chatbot to order foods and drinks.
By the end of this lesson, you’ll:
Before you build your chatbot, keep in mind these questions:
What is the purpose of your chatbot? - For example, design a Food ordering chat bot for "My Happiness Restaurant" to help customers order foods and drinks
What is your business usecase? - For example, Food and beverage industry
What do people usually ask when they message your Facebook page? - For example, users may ask some questions about: Menu, open time, location, order...
Which data do you want to gather? - For example: email address, phone, delivery address,...
Besides, it is recommended that you can sketch a simple chatbot flow on paper to get an overview of your chatbot as shown in picture below
In case you don't want to sketch on paper, I suggest that you can use some online tools to design a sketch for chatbot such as Sketch, Microsoft Visio, etc.
Build a simple chatbot using Flow Editor
Intro to Regular Blocks
Let's take a quick tour in BotStar and start with Flow Editor which is where you'll be spending the majority of your time. This is also where you can build and add content to your chatbot.
Flow Editor contains a huge amount of knowledge, but in this lesson, I just show you how to create a simple chatbot using Regular Blocks. Other Advanced Blocks or Actions will be taught in the next lessons.
I'll introduce you some Regular Blocks to create a simple bot:
Text - set up a text only message and send to the end-user.
Horizontal List - display a string of cards that can be swiped horizontally (max. 10 cards). This block is suitable for displaying catalog of products or services that emphasize big thumbnail images.
Vertical List - display a list of items vertically (max. 4 items). This block is suitable for displaying catalog of products or services that emphasize more on all items getting displayed at once.
Button List - display buttons that are stacked together (3 buttons max). This block is suitable for simple navigating purpose such as go to next block, open webview, make a phone call, log in with Facebook, log out from service.
Video - send a playable video embedded in a single message. This block allows the bot operator to use link URL from Internet to insert video, upload a video from computer or load video from a field of the mapped CMS entity.
Image - like the Video Block, Image block also allows the bot operator to use link URL, load image from CMS entity and upload from computer to send a clickable picture in a single message to the end-user.
File - attach a file in a single message by uploading, using a link URL. User can click on the link to download.
Audio - send a playable audio in a single message. User can click on to play audio. Audio can be uploaded from computer or inserted from a link URL.
Let's build a simple chatbot with Regular Blocks!
Design a simple chatbot
After you create a simple bot and publish it on Messenger, here is an expected result after creating a simple chatbot to order foods and drinks for "My Happiness Restaurant":
The following steps will guide you to design a chatbot flow:
Drag and drop a Text block into Flow Editor to welcome customers.
You can choose a user's first name to make a little more personalized! Also, you can add emojis to make your message engaging. BotStar does not have a built-in emoji feature, but you can easily add emojis by pressing Control + Command + Spacebar on a Mac. If you're on a PC, copy and paste from online emoji sites.
You can go to Build > Global Variables to add Global Variables and use these variables when designing a chatbot flow.
Drag and drop an Image block to add an image or upload an animated gif. To make it easier for users to read your message, we'll add in a two-second typing time delay
Add a Horizontal List or Vertical List to create a Menu for foods and drinks.
You can click on each elements such as image, text to customize as you want. You may change the image and write the description about foods.
To add more items on Horizontal List, just click on Add New button to add more items
Note: You can create a CMS entity to group all of the items to manage and update easily. Keep learning our Mini Course, you'll learn about CMS in the next lesson. It really helps to keep things a little more organized!
Create Text blocks and Button List blocks to ask customer information to deliver foods to the right person, right time and right place after they ordered foods.
You can use Text Block or Button List Block to collect user's inquiries. Other than directing users to another block, a button can also open a website, provide users with a quick and easy way to share your bot. You can open a Webview to choose date and time for food delivery.
You may use Text Blocks to ask about customer information such as email address, phone number, delivery address,...You can enable "Capture User Response" to save user's response.
To allow users to interact with your bot, you can add buttons or quick replies with using connectors to redirect users to another block.
Click on Preview button to test your simple chatbot before publishing
Set up the Greeting & Welcome Message
The Greeting Text is used to describe your business or welcome your users! This message will be shown to first-time users. Here’s my greeting text on my welcome screen for "My Happiness Restaurant":
To set up a greeting text, go to Configuration > Behaviors > Greeting, type in First-Time Greeting Message and click on Save button.
Note: You are limited to 160 characters for the greeting text
Set up a fallback block when chatbot cannot respond
What happends if you chatbot cannot understand users' demand? In this case, you need to set up a default block to automatically reply when bot cannot respond. For example, when you type anything like "I'm joking", bot doesn't understand the meaning of this sentence, so bot will show the default message that you've set up already. Here's expected result after setting up a fallback block:
To set up a fallback block, in the Flow Editor, you can create a default block to show users a message whenever bot doesn't understand and cannot satisfy users' demand. It is highly recommended that you may use "Random Text" to avoid being boring to users.
After that, go to Configuration > Behaviors, enable Auto fallback when bot cannot respond, choose Default Block
Note: Are you afraid of a stupid bot? Don't worry! You can learn how to train your chatbot to become smarter in part 10 with using BotStar Training. Just keep learning and enjoy the course!
Avoid dead-end conversation
Dead-end is the point of a conversation which there is nothing else to talk about.
To avoid dead-end for a conversation, go to Configuration > Behaviors > Enable Assist user navigating upon dead-end message, design a Quick Reply and choose a Fallback Block. You can choose a block to navigate a conversation, for example, choose a block "Main Menu" to navigate users to Main Menu and continue the conversation.
Here's the result after setting up to avoid dead-end conversation:
Create a bot menu
The bot menu is a “slide-up menu” that is located at the bottom of your Messenger Bot. Here's what it looks like on Facebook Messenger.
I'll show you where you can create a Bot Menu, which appears at the bottom of the Messenger screen. Click on "Bot Menu" symbol, then use connectors to connect to other blocks (Foods, Drinks, Main Menu) to navigate the conversation. To get rid of the branding in the Bot Menu, you'll need to upgrade to Grow Plan or Pro Plan.
Is it so simple to build a basic chatbot, right? In the next lesson, you'll learn how to use CMS (Content Management System) and Module to optimize your chatbot flow.