With a Conversation Flow Project on Botmock you can visually plan the conversation flow or interactions between your bot and the user with a simple drag and drop editor. You can map out all possible conversation paths and then create Previews for each path separately; allowing you to show different interaction scenarios. This will speed up prototyping and development of your bot by providing a dynamic flow-chart like interface with the relations among all the pieces - laid out on a single canvas.
Sign in or Sign up:
Sign in into you Botmock account. If you don't have an account, you can sign up for a FREE 15-day trial with Botmock here. It will only take a few minutes and you will be all set.
1. Creating your first project
When you first sign, you will see a screen like this:
This is you main Project dashboard. From here you can create, edit and organize your projects into folders.
Click the CREATE NEW PROJECT button to start your first project. You will be presented with a screen to choose your project type:
Click the CREATE NEW FLOW button. On the following screen, enter a project name and select a platform. Let's name our bot 'Shop Bot' and select Facebook Messenger as the targeted platform.
Click the CREATE PROJECT to begin editing your conversation flow!
2. Interface Basics
The main editor interface is very simple:
1. Project menu
Here you can accomplish project/flow-board related tasks like create a Preview, Export the conversation flow, change the bot name and avatar etc.
Messages are the main component of your conversation flow. Each message represent a bot or user dialogue, action or input/output. You can select from a range of message types like simple Text, Buttons, Carousel, Web View, Images etc.
A connection is an action the user takes to go to the next message. You can specify 'no-action required' or 'custom'. It's a good practice to label a connection so anyone looking at the conversation flow can understand what's happening between the messages.
4. Keyboard shortcuts
Shows a list of keyboard shortcuts you can use to speedup your editing. For example: Shift + click on message - to select multiple messages.
5. Toggle pan/scroll
Click this to toggle between pan and edit mode.
6. Zoom control
Use the + and - buttons to increase/decrease zoom.
Creating a Facebook Messenger bot
For this exercise, let's assume we have a store in Facebook. Our bot 'Shop Bot' allows a user to view deals, track orders, return items or speak to a customer care agent. We will create two conversation flows. One to show current promotions/deals and another to track an order. First, let's setup the bot.
Setting up the board:
First, we will assign our bot an avatar. Click the Settings button on the top Project menu. The Board Settings window will pop up:
We will name it 'Shop Bot' and leave the Reply Frequency as default. For the avatar we choose our logo. Click SAVE CHANGES to finish. After the saving is done, you will be returned to the main screen.
Edit the connection:
Click on the Blue connection (between the two messages) where it says 'Click to edit'. The Edit Connection window will pop up:
Select 'Custom action' and enter 'Welcome message' on the text field below. Click SAVE to rename the connection.
Edit the welcome message and set message delay:
Double click the 'Get Started Text' or the Edit Message button on the 2nd message. The Edit Message window will appear:
Type the first welcome message the user will see. Adjust the slider under the 'SHOW NEXT MESSAGE AFTER' to set a delay for the message to show. Click SAVE to save the message.
Give some options to the user:
Click the + button next to the 2nd message you just edited to add a new message:
A Select Message Type window will appear:
Select BUTTON to create a new button type message. On the message edit screen type 'Here are some options you can choose:' in the Text field. Click the +ADD button to add three buttons with the labels: 'Show deals', 'Find a store', 'Track an order':
You can rearrange the buttons up and down by clicking the Up/Down arrows; delete a button by clicking the X button. Click SAVE to save the message. Your screen now should look like this:
Note that, we are not going to edit the second Connection as there is no action necessary. The bot will show the welcome message and then after the set delay, show the options message automatically. A Connection that has no action associated with it will show an asterisk'*' symbol.
Creating a conversation flow for showing some deals
For this first conversation flow, we will have the user select 'Show deals' and then show some deals on a Carousel type message.
Add a message. Select User Reply for the message type. And type 'Select deals' in the text box. Your screen should look like this now:
We are now going to add two deals to show to the user. One for Clothing and another for Accessories. We will need two sets of images to shows these two deals. Here are two sample images we are going to use for this tutorial:
Image 1: for Clothing deals:
Image 2: for Accessories deals:
Now, add another message next to the User Reply message. This time choose the 'Carousel/Card' for the message type. As the EDIT MESSAGE windows pops up,
Click the bigger +ADD button near the bottom to add the 2nd deal. Populate both the deals' details like this:
Click SAVE to save the message. At this point, your screen should look like this:
That's your first conversation flow for showing some deals to a customer. You can, of course, add other messages to make the dialogue longer or more conversational.
Creating a conversation flow for tracking an order
For the second conversation flow, the bot will help the user with tracking a shipment. To begin, open the previously created project 'Shop Bot'.
Add another window next to the 3rd (Options) message by clicking the small + button. Select 'User Reply' for the message type. Put 'Track an order' in the text field. Save the message.
Add a message next to the previous message. Select 'Button' for the message type. Enter some text and a button to guide the user inputting the order no:
For example, you can say 'Please enter the order no. or press the button below if you don't have it.' Or something similar.
We can also edit the Connection line to give it a meaningful label. For example, 'Ask for order# for user'.
Add another User Reply type message to the previous message. Enter an order no. for the text display to show the user has entered an order no. For example, '123-ABCD34'.
Now, we want to do two things. 1. thank the user for enter the order no. 2. show them that it's processing the request. For the first part, we can just add a Text message and display the thank you text. For the 2nd part, we are going to use a message type called 'Typing' to simulate thinking/processing by the bot. Here's what it should look for entering the order no. by the user to the processing message:
You can set a longer delay on the Typing message to simulate the processing more realistic. Let's also assign this message a different color to highlight it. For this, click the small down arrow button at the corner of the message and select a Red color:
The last message we are going to add is to show that the bot found the order and give some update on it's delivery. Add a Text message like this:
You can of course, break down the last message into two parts: one to show the tracking result, another to show options for next steps.
You can also click and hold + new message button and drag it to connect it with an existing message to go back to a certain point in the flow. For example, after showing the Tracking result you can take the flow back to the Option message:
Creating previews for the conversation flows
Now that you have created the conversation flows, how do you see how the bot will look like in it's native platform? Or, how do you create a video demo of it?
You can do all that with the Preview option.
Click the Preview button on the top Project menu. From the window that pops up, select CREATE NEW PREVIEW and give it a name, say, 'Deal preview'.
The flow editor will automatically highlight the messages in sequence for the flow. When there are two or more branching (for example on the 3rd Options message), it will highlight the next possible routes, Click on a message to select it for the flow Preview. In this case, we are creating a preview for the deal conversation flow, so we will select the message like this:
Once done selecting the messages, click Save Preview on the top menu to save it:
The preview will be saved and you will see a list of all saved previews:
You can Run the preview, Download it as a video or Export it as a Mockup project from here. You can also Rename or Delete it.
You can as many previews as you want. For the second conversation flow (Tracking an order), follow the same steps but select the 'Track an order' message after selecting the 3rd message.
That's it! You should be now able to create a Facebook Messenger bot quite easily. For inspiration, you can check out the projects in the Tutorials available under your Team's menu.