Designing a Conversation flow with Botmock CXD Studio
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 Journeys 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.
1. Creating your first project
When you first sign, you will see a screen like this:
This is your 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 assign a project name, choose the target channel, it may be Generic Chatbot, Amazon Alexa, Google Assistant, etc. (we support 12+ channels) and then choose the language locale for your project. :
We’ve chosen Facebook Messenger as TARGET CHANNEL and English US as LANGUAGE for this project.
Click the CREATE PROJECT button.
2. Interface Basics
The main editor interface is very simple:
1. Project menu
Here you can accomplish project/flow-board related tasks like creating Intent, Entities, Journeys, Variables, Workflow, etc.
2. More Section
More Section of the Botmock CxD studio has several sections involved in it from where you can accomplish inviting the team members to the project, add comments, manage snapshots, settings of the project, API info, and manage exports.
3. Block Selector
From Block Selector in Botmock studio you can insert the actions and conversation blocks in the flow. With Block Selector you can insert User says, Bot says, Image, Quick replies, Buttons, API Block, Jump Block, etc. (Availability of different blocks vary from channel to channel)
Botmock CxD studio also offers Keyboard shortcuts to speed up your editing. For example Shift + click on message — to select multiple messages.
Build better voice apps. Get more articles & interviews from voice technology experts at voicetechpodcast.com
3. Exercise — Designing a Facebook Messenger bot
For this exercise, let’s assume we have a store on 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 set up the bot.
Setting up the board:
First, we will assign an avatar to our bot. 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.
Adding the Blocks:
Let’s start prototyping our Facebook Shop Bot by adding conversation blocks from a Block Selector, for initiating the conversation we starting with BOT SAYS block and enter the welcome message- “Hi John, How I can help you today?”.
Connectors:
Click on the connection line (between the two messages) where it says ‘Click to edit’.
The Edit Connection window will pop up:
Add CONNECTION LABEL and an INTENT (optional), adding a connection label will help teams to understand the flow.
Give some options to the user:
Select the Button block from BLOCK SELECTOR and add all the button options you want in your prototype.
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’ and SAVE:
After this, it should look something like this -
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 Says 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 block next to the User Reply block. This time choose the ‘Carousel/Card’ for the message type. As the EDIT MESSAGE window 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.
You can, of course, break down the last message into two parts: one to show the tracking result, another to show options for the 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 Options message:
Creating Journeys 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 a native platform? Or, how do you create a video demo of it?
You can do all that with the Journey option.
Click the Journeys button in the left-hand Project menu. From the window that pops up, select the + NEW JOURNEY and give it a name, say, ‘Scenario 1’.
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 Journey. In this case, we are creating a journey for the deal conversation flow, so we will select the message like this:
Once done selecting the messages, click Save Journey on the top menu to save it:
The journey will be saved and you will see a list of all saved journeys:
You can Run the Journey, Download it as a video or Export it as a Mockup project from here. You can also Rename or Delete it.
You can create as many journeys 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.
