Welcome to lesson 2 of our Mini-course series.
As in lesson 1, we have built a simple chatbot flow.
So in this lesson, we will learn how to build a chatbot based on that flowchart.
Let's have a quick recap of the flowchart.
When customers start to chat with our chatbot, they will go across our welcome message.
Then they will be presented with a menu
with three options: Shopping, Locations, and Contact us.
In the Shopping option, they will be shown 3 categories about T-shirts, Skirts, and Dresses.
and then they will be asked to fill in the delivery information.
In the menu, if they select locations, they will see an introduction about the store:
the store's Phone number, opening hours, and directions.
if customers don't want to chat with the bot,
they can also leave a question to the staff,
and staff will contact them back as soon
as possible.
So this is the chatbot that we will be building in this lesson.
Now we will guide you on how to create a
blank bot to build our Monoco Shop flow.
First, log-in to the BotStar App to access to your account dashboard.
Click on Create a New Bot,
select Start from scratch and fill in
the requirement information.
Then click on "Create Bot" button
Inside is the Flow Editor of the blank bot
where you can start building your chatbot for Monoco Shop from scratch.
After creating a blank bot we will start
to design our bot flow.
In this part you will learn how to Drag
and drop blocks.
Organize bot flow
Set default responses
Avoid dead-end flow
and Create a bot menu
Now let's start the design by dragging
and dropping type of blocks that we need.
Just like in our chatbot flow we have
planned in the beginning,
we will build the welcome message to
greet your customers and main menu to
navigate customers to the designed flow.
Drag and drop a text block into flow editor.
Change the block's name,
and type in the welcome message.
You can insert variables to personalize your welcome message,
and create bot attribute to repeat text
like your brand name.
Drag and drop an image block.
You can insert directly an image link of
your fashion store image,
or upload the image from your computer.
Connect the two blocks by the connector
to direct users from text block to image block.
If you want to set conditions for a connector,
, click on Add condition button.
Finally, drag and drop the Buttons List to create "Main Menu".
At this point, the conversation flow can
be divided into three categories which are:
Go shopping
Find a store
and Contact Admin
Let's start building the flow for the Go shopping option on the main menu first.
In this part, we will guide you on how to showcase the clothing items using the Horizontal List.
Drag and drop Horizontal List into Flow Editor.
Upload images for each item.
Set the price and write the description
for the list of fashion items.
Then add the buttons to order them.
After the customer have chosen the
product and clicked the Buy button,
now you will need to ask for your
customer information
such as email address, phone number, delivery address etc
to deliver the fashion items in the right place at the right time.
We will guide you to ask your customers' email using Text Block and setting up Quick Response.
Drag and drop a text block into the flow editor
then click on Static
Select "Email" for a quick response if you want to detect the user email address automatically.
Next, enable Expect User Response to save the user's response.
If you want your customers to type in the correct type of response
, utilize Validation Error Message.
Continue to create other blocks to
collect user delivery information as you expect.
When you have collected customer
contacts, next you need to schedule an
appointment to deliver the fashion item.
We will show you how to make an
appointment with your customers using Webview.
Drag and drop "Button List" block.
Click on a "Button" and select "Open Webview",
choose "Date" or "Date and Time" and "Date Format"
to open Webview as a calendar to schedule an appointment.
Finally, let's build the flow for the "Find a Store" option in the main menu.
After supporting your customers to order fashion items,
now you can help them find your stores
in case they want to try and buy the
clothing items directly in your stores.
In this part, you will learn how to help your customers get directions to Monoco Shop in Google Map.
Drag & drop "Button List" block.
Click "Open Webview", select "Custom URL"
and insert Web URL to navigate customers to Monoco Fashion Store.
Test on Preview to see the result.
When clicking on the button, it will redirect your customers to Google Map
to find the Monoco fashion store.
When building a chatbot for Monoco Shop,
you can see that we have a lot of blocks everywhere in the flow.
Therefore, in this part, you will learn how to group some related blocks using Module.
For example, let's create the  "Customer Information" Module to
collect customers information.
First, drag and drop Module in Advanced Blocks into Flow Editor.
Then click on View Module, you'll jump into a Module "Customer Information".
Then start designing a chatbot flow to collect customer's information.
You have known how to create a module that contains a lot of blocks in it,
but you can even make your chatbot flow
for Monoco Fashion shop much more
flexible and dynamic using Module Outlet.
This feature gives you the ability to
connect any block inside a module with
any blocks or modules outside it.
Let's have an example.
After ordering women's fashion clothing, your customers will have two options:
The first one is receiving order via Shipping.
If your customers choose this option,
you will navigate them to other blocks
to ask for their delivery information.
The second one is buying at the store directly.
If your customers choose this option, you will redirect them to Module Location.
In these cases, use Module Outlet to exit from Module Shopping,
and connect with Module Location.
Then connect to "Module Location" to redirect your customers to get direction to your stores.
Test "Module Outlet" on Preview.
After designing a conversation flow for Monoco Shop,
in some cases, your customers do not follow this predefined flow,
so your chatbot cannot understand
customer's demand.
Then you will need to set up a default
fallback block to automatically reply to customer,
showing that bot doesn't understand the
message and continue the design flow.
In the Flow Editor, create a default fallback block.
To set up default fallback message,
go to Configuration > Behaviors,
enable Auto Fallback When Bot Cannot Respond,
and choose "Fallback Block".
Imaging after customers have ordered clothing items,
the conversation is coming to the dead-end with no responses.
Therefore, in this part, you will learn how to avoid this situation.
Go to Configuration > Behaviors
Enable Assist User Navigating Upon The Dead-end Message.
Set up a Quick Response, and choose a block "Main Menu"
to navigate your customers to Main Menu and continue the conversation.
Good job! Take a look at the result after setting up to avoid dead-end conversation.
Finally, we will guide you on how to create a bot menu,
so that customers can also have options
to change the flow or have a brief of
your bot content
anytime they want.
Here's what it looks like on Facebook Messenger
To create a Bot Menu, click on Toggle Menu Visibility symbol,
then use connectors to connect to other Blocks or Modules
to navigate the conversation.
After building a chatbot for Monoco Shop, test on Preview carefully,
and improve your chatbot before
publishing it to create a smooth chatbot conversation.
We would recommend you to re-arrange blocks
and do not let the connectors overlap to make your chatbot flow clearer.
We already have a bot flow, a website, a Facebook page.
Now all we need is to publish our Monoco Fashion bot into those channels
Let's start with publish your bot on Facebook Messenger.
Go to your chatbot and click on Publish your Bot button in the upper right corner
Click on Connect,
then select "Monoco Shop" page and click on Assign button.
Click on the Publish button to publish your chatbot on Messenger.
If you edit anything in your chatbot flow, click on Update to update the changes.
Please keep in mind that you cannot deploy more than one chatbot
on the same "Monoco Shop" Facebook page.
In case the bot has been connected to a Facebook Page,
you must Unassign before re-connecting and re-publishing your chatbot.
The next part is to publish your chatbot on the "Monoco Shop" website
using the Wix site as you have created in lesson 1.
Go to Publishing Configuration,
select Website
add at least one website to whitelisted
domains that you want to publish your chatbot.
Customize bot branding and color by strolling down to Apearance.
Fill in Custom Name
Change Theme Color
and upload an Avatar.
Then click Save and Publish your chat
bot again.
Copy the Code Snippet.
Go to your Wix website to start editing.
Head to settings in your site's dashboard
then click the Tracking and Analytics tab under advanced settings.
Click on New Tool and select Custom
from the drop-down.
Insert the code snippet into the custom
code section.
Click on Apply,
Publish again
And here's the result when you
successfully integrate BotStar with Wix.
Congratulations on completing simple
chatbot for Monoco Fashion shop.
Is it so simple to build a basic chatbot, right?
In the next lesson, you will learn how to
use CMS to optimize your conversation.
