BotStar Chatbot For Dummies #1 – Design Chatbot Conversation With BotStar Visual Flow Editor
This is the Flow Editor. Here you can visually manipulate every piece of your bot. In the center of the site is the canvas where you create the conversation flow between bot and users. At the beginning of the flow, there’s a black round named “Entry Point”. Whenever a user clicks on “Get started” in the chat box, the convo starts from this entry point. As you can see, except for the entry point, your bot content structure consists of “blocks”. They contain text, pictures, and buttons. Bot sends blocks to users or setup actions on behalf of the bot operator. Blocks help you organize the structure of bot even though they are invisible to the users. To create a block, you can go to Library panel on the left, choose a block, then drag-and-drop it to the canvas. Or you can stretch out the connector of a block, release it and select a block from the dropdown list. There are different types of blocks: Regular blocks, advanced blocks, actions, and utility blocks. On the dropdown menu of a block, you can choose to test the block, duplicate it, hide preview or delete it. When you delete a block or an element, the “UNDO” option will appear for 60 seconds, click it if you want to reverse the action. You can also delete a block by click “Delete This Block” button on the Properties panel. In Flow Editor, basically, we can select blocks, move them around or edit the content right on the page. Here, Iet’s try editing the name of the block, from “Hi” to “Hello”. You can see the change in real time. Next, turn on quick reply on block and set it as Static. (Quick Reply is the button that offers the user options to respond promptly for next step). Then click on a quick reply which has just shown up to change the text. Here let’s type in “Main Menu” for this quick reply. You can create a connection between this quick reply and other blocks. And as you can see, block and its elements have different properties. Now let’s click on the text element and edit it to see what happens. While editing this, you can insert variables into text. (Variables are used to define and store values, there are 2 types of variables: Global and Local variables) They can be managed in the Variables panel on the left of the screen. In this bot, there are 2 Global variables: “PizzaRestaurant” and “City”. You’ve already known about the first panel on the right used to modify a block, now we’ll discover three panels left. This is the Trigger panel. It lets you control and manage what will trigger this block. A block can be triggered via different sources such as another block, a global keyword, a training phrase or external triggers: – Global triggers are conditions you set up to prompt a block no matter where you are in the conversation flow. – Block triggers are triggers created by a preceding block or by elements of other blocks. – External triggers are triggers created by 3rd-party-system. As can be seen, the “Promotion” block is now having no trigger, try to create a global trigger and see how it works. Here, you set up a condition, for example, user’s response – contain – promotion. After that, click Preview to see how the global trigger will look like. It’s a quick way to interact with your chatbot as if it was fully published. Let’s try to type in “promotion”. The designated block shows up, it means the global trigger is successfully set up. Okay, now you can check the Outgoing connections panel, this section provides an overview of outgoing connections from this block. It can be seen that this block is not connected to any other blocks. If you create a connector to a new block or an existing block, this new connection will be listed. Lastly, the Outline panel gives you an overview of blocks that appear in the Flow Editor. Clicking on the name of one block or its element listed in the Outline panel, you’ll immediately be directed to it. On the upper ribbon of the canvas, we have a toolbar. If your bot is multilingual, you can easily switch between languages using Change Editing language button. Next to it is the Toggle Block Transparency button which makes a block transparent, it helps you easily manage layers of blocks. You can see the underlying block. We can also enable the bot menu using the Toggle Menu Visibility. This bot menu is displayed in the bottom left corner of the chat box. Click again to turn off, this menu will disappear from the canvas. The last three buttons help you quickly increase or decrease everything on the screen to get a better view of your bot flow. And that’s a quick overview of areas we can access in the Flow Editor. See you in the next videos.