VISUAL BUILDER

A better way of

building chatbots

The brand-new Visual Builder is finally here. It got a fresh look and comes with the extra improvements you asked for. Explore the new interface and build even more powerful chatbot Stories.

What's new

The basics

Start Point

Giving you more control over the building process was one of the reasons for the redesign. To make that happen, we decided to replace the Welcome interaction with the new Start point block. This new element can’t be edited, and it functions as a trigger point. You can use it to configure the beginning of your chatbot conversation the way you want by adding a Bot response or any action.

Interactions

We’ve split the previous Interaction block into separate User input and Bot response blocks. This change makes it much easier to configure individual blocks. What’s more, you don’t have to open the Interaction block to see what’s inside it anymore. All the steps are visible on the interface at first glance.

User Input

lets you collect user responses. In this block, you need to define what types of user messages will trigger the following bot’s response.

Bot Response

contains a message your chatbot sends to the user.

Fallback

We replaced the previous Fallback interaction with the new Fallback block. Just like Start point, Fallback is a trigger point that can't be edited. It can activate a bot response or any action you want. In this way, you can develop your chatbot scenario after Fallback, too.

Dark mode

Some people are early birds, and others prefer to burn the midnight oil. Having both of these groups in mind, we developed and added a dark mode to our chatbot builder. Switch between the modes to reduce eye strain or simply enjoy your preferred version.

Managing blocks

Blocks

Together with the interface redesign, we’ve improved our drag-and-drop editor. So now, managing the blocks is even easier than before. Just drag any block from the main menu and drop it in the place where you want to add it.

We’ve also added an extra option that enables you to add a new block directly from the tree. Just click on the plus icon that appears next to a block and choose a new element from the menu.

Groups

To better organize your story, you can now combine blocks into groups. This is especially helpful when you create a complex scenario with many paths. Grouping helps you to make your story more compact and easier to look at.

Context menu

We’ve introduced the new context menu that facilitates managing blocks. To open it, keep the cursor on the block and click the right mouse button. The menu allows you to:

Click the right mouse button!

edit a block

delete a single block or the whole branch

move a single block or a whole branch

collapse a given branch

open the Testing tool

Image upload

We knew that adding images to stories wasn’t ideal in ChatBot. So, we changed that, too. The new builder comes with the simple upload feature you asked for. Just drag and drop images to rich messages to embed images into your story. No links required!

Actions

After the redesign, actions are placed in a separate section in the main menu. You no longer need to open a given interaction to see what action it contains. What’s more, since actions take the form of a separate block, they are clearly visible on the conversation tree.

Success and Failure blocks for Actions

We know that the previous builder made it difficult to dynamically react to the failure and success of Question, LiveChat transfer, and Webhook actions. To solve this, we’ve added new Failure and Success blocks for these actions. You can now easily configure them.

A/B Test

The brand-new A/B Test feature lets you try out up to five different chatbot flows at once. It helps to quickly verify which of your bot responses performs the best. This way, you can improve your copy and content over time and create more engaging stories.

Filters

Filters enable your bot to display different replies to users based on specific criteria. Like before, the new Visual Builder lets you add them within a Bot response block. During the redesign, we added an extra Filteroption to the blocks menu. This way, you can add a Filter block to your scenario separately. Then, you can easily configure it or locate it on the conversation tree. What’s more, you can use this new block to assign a particular filter to the whole group, too.

Additionally, the previous Filter option included the AND condition only. So, for example, if you wanted to filter multiple URL addresses, you had to duplicate responses and add separate filters to each of them. To simplify this, we’ve added a new OR condition to the Filter option that lets you filter many URL addresses at once.

Search tool

Finding a specific interaction on a complex story could take ages. We sped up this process, too! The new Search tool lets you find specific blocks on the tree in a snap. Now, you just need to type the block’s name or any part of its content in the search bar, and the search item will be lit up in blue on the interface.

Navigation mode

Depending on your equipment and preferences, you can now choose whether you want to use a mouse or a trackpad in navigation mode.

Testing tool

Testing is an inherent part of the building process. It can be a bit time-consuming, though. To make this process faster, we turned our old Built-in chat into a new Testing tool.

It allows you to:

Turn on debug mode to see all the steps your chatbot is going through.

Turn off the typing indicator to speed up the testing process.

Follow steps on the tree so that you can easily locate a particular interaction on the tree.

On top of that, you can test your scenario from any moment in the story. To do so, you need to mark the chosen interaction on the tree, click the right mouse button, and choose Start testing from here. This will open the Testing tool and let you focus only on these elements that need to be verified.

What's new

The basics
- Start point
- Interactions
- Fallback
- Dark mode
Managing blocks
- Blocks
- Groups
- Context menu
- Image upload
Actions
- Success and Failure blocks
- A/B Test
Filters
Navigation
- Search tool
- Navigation mode
Testing

Shortcuts

Dashboard

CMD + F / CTRL + F - open the Search tool
CMD + [+] / CTRL + [+] - zoom in
CMD + [-] / CTRL + [-] - zoom out
ESC - close the window

User input

TAB - move to the next element in the Keywords & User says section

Blocks

ESC / CMD + S / CTRL + S - save changes and close
CMD + Z / CTRL + Z - undo changes
CMD + SHIFT + Z / CTRL + SHIFT + Z /CMD + Y / CTRL + Y - redo changes - redo changes

Selection list

↑ - move up
↓ - move down
ENTER - confirm changes
ESC - close the list

Happy building section - left background

Happy building!

The Visual Builder’s redesign paved the way for improving existing features and creating new ones. We know that the changes we’re introducing are great, but also that changes might be difficult to adjust to at first. To make this transition as smooth as possible, we prepared a short onboarding video and Help Center materials that will help you get to know the new interface. Just to let you know, we’re still working on new features that will make the building process even easier.

Darek Zabrzeński | Head of ChatBot

Let’s see Visual Builder in action

Would you like to share your

feedback on the new Visual Builder?

Write to us at support@chatbot.com. We’d love to hear it!

VISUAL BUILDER

A better way of building chatbots

The basics

Start Point

Interactions

Fallback

Dark mode

Managing blocks

Blocks

Groups

Context menu

Image upload

Actions

Success and Failure blocks for Actions

A/B Test

Filters

Navigation

Search tool

Navigation mode

Testing tool

Shortcuts

Would you like to share your feedback on the new Visual Builder?

Discover our text| products

A better way of

building chatbots

Would you like to share your

feedback on the new Visual Builder?