This documentation is organized into three major sections, providing you with all the information you need to understand and effectively use Flow Builder. The sections include:
1. How to create a new bot using Flow Builder
Learn how to kickstart your Conversational App project, from initial setup to building the conversation flow.
2. Flow Builder structure overview
Gain a comprehensive understanding of Flow Builder’s structure by exploring the main interface, identifying key elements, and learning their functions.
3. Build a Conversational App
Discover how to design and build a Conversational App using Flow Builder. This section dives deep into the features and elements, guiding you on how to configure them to create seamless conversations with ease.
Flow Builder tool is located on the Hubtype Dashboard, so the first thing you have to do to create a new Conversational App is to log into your account and then access the bots section. Once there, you will find a screen with all your bots, if you have already created some, and a button (+NEW BOT) to create a new one.
Once you click on the (+NEW BOT) button, a pop up will appear where you can choose to create a new bot using Flow Builder or with Code.
In this case, to create a new bot with Flow Builder you will need to choose the Flow Builder option on the left and then click on next.
A pop up will appear informing you that to start a new project with Flow Builder you have to contact support@hubtype.com so they can activate Flow Builder on your account. You can contact them by clicking the (CONTACT US) button and a new tab will be opened with an email addressed to support from your account.
We know that this is not the ideal user experience and it’s something that we are working on to allow you to be autonomous, stay tuned!
Once support has activated Flow Builder for your account, to be able to edit a bot with Flow Builder, return to the bot section again and click on the bot you want to start or continue building.
Once you click on it, a new screen will appear with the bot details and in the top right you will find a button (Edit in Flow Builde), click on it to access Flow Builder.
It may take a few seconds to load, during which a Loading screen will appear.
Once the flow has loaded, you will arrive at the Flow Builder screen and you can start building or editing 🥳
Now that you’ve accessed the Flow Builder screen for the first time, it’s time to familiarize yourself with its various elements and their functions. If you’re already acquainted with these, feel free to skip ahead to the Build a Conversational App section, where you’ll find in-depth guidance on each feature and its possible configurations.
The main Flow Builder screen is organized into seven key areas:
The bar at the top of the screen provides access to several important actions:
Located on the top right corner. It’s used to navigate through different flows and create new ones.
When a Conversational App is created it will include two flows:
This flows can not be deleted as they are key for the conversational experience.
Located on the right of the conversational flow list. It can be used to search for specific content in the flow.
The vertical panel located on the left hand side of the screen. It contains all the content that you can drag and drop to the flow board to build your Conversational App.
Covers almost the entire screen and has a grey background with white dots. This is where you’ll build your conversational experience, beginning with the Conversation Start. In the bottom-right corner, you’ll find a navigation menu that allows you to zoom in and out, view the entire flow, and undo or redo your recent changes. Some flows include notes that provide guidance on their purpose, when to use them, and best practices for defining them.
The vertical panel located on the right hand side of the screen when you have selected content in the flow. It contains all the configurations that you can add to the selected content. You can see the specific configurations for each content in the Build a Conversational App section.
Now that you’re familiar with what Flow Builder is, how to access it, and its core structure, it’s time to start building your conversational experience. In this section, you’ll learn how to use, connect, and configure various elements to create a seamless and engaging conversation flow.
This section will guide you through:
When you open Flow Builder for the first time, you will be located on the “Main” flow with the starting point where you will have to start building your conversational experience. Take into account that the message connected to the “Conversation start” will be the first message that will be shown when the end-user starts a conversation with your Conversational App.
You will also find a note explaining the conversational model. When a user submits a query, our conversational model processes it through a sequence of steps: first, it identifies Keywords, then checks for Smart Intents, followed by Intents, and finally consults the Knowledge Base. If none of these steps return a result, the fallback message is triggered.
If you open the conversational flow list, you will see that the Fallback flow is also created and if you access to it, you will see that the Fallback component is already included.
Learn more about what the Fallback content is and how to configure it in the "Build a Conversational App" section.
Creating new contents is super easy, you just have to decide which content from the build panel you want to include in your Conversational App, click on it, and drag & drop it onto the board. Once you drop the content into the flow, it will be added to the board. It will appear in purple colour which means that you have it selected, and the edit panel will be opened so that you can configure this content.
To learn more about the configuration of each content you can jump into the Contents section.
To select any content, click on it, it will turn purple and the edit panel will be opened. If you want to select several contents, you have to press the shift key on your keyboard, then click on the board and drag your mouse over as many contents as you want to select.
Once you have added contents to your Conversational App, you may want to connect them to design the conversational flow. To do this, we will use connections, so let’s see how to use them.
You will see that each content has purple triangles attached to it, on both the left and right. These triangles are the points where the contents can be connected to each other.
Each content will have several triangles that you can connect with other contents:
To connect contents from a content or button target, click on the target, drag & drop it onto the source and a connection will be created.
To delete the connections, select the connection you want to remove by clicking on it. Then a button with a trash icon will appear, click on it and the connection will be deleted.
Once you have added the contents you want to the conversational flow board, you will be able to edit and configure them in the edit panel that appears on the right of the screen when you select them.
In this section you will learn what is each content and how to edit them. You will also be able to see how each of them will be displayed in different channels (Web chat & WhatsApp).
Common information that applies to all contents
What is Fallback?
The fallback message allows you to set the behaviour that the Conversational App will follow in case the end-user asks something that it doesn’t know how to answer.
You can set one or two answers to the questions that the Conversational App can not answer. This allows you to set a unique message that will be repeated every time the bot does not understand something, or you can set two different paths:
Messages are the contents that you can use to build the conversational experience. You can add as many as you want, then edit and connect them in order to create the desired conversation.
What is Text?
The text message is the content you should use when you want to add text into the conversational flow.
How to edit the Text
On the Text content you can edit:
How the Text content is displayed in each channel
What are Text buttons?
In the Text content you can add buttons to show the end-user different options that, once clicked, will each follow different paths.
How to edit the Text buttons
On the Text buttons you can edit:
☝️ Important information: Quick reply buttons are available on web chat, Facebook, Twitter & Telegram. On WhatsApp all kinds of buttons will be displayed as buttons.
How the Text buttons are displayed in each channel
What is a Carousel?
A carousel is a type of content in which you can include several elements next to one another. They can include elements such as: an image, title, subtitle, description and/or button. The user will be able to navigate through the elements by sliding right and/or left. They can be used to display a list of products, features, or any other type of information you choose.
☝️ Important information: Carousel content is only supported on web chat channels.
How to edit a Carousel
You can add as many elements as you desire to the carousel content, and in each one you can edit:
How the Carousel content is displayed in each channel
What is Image?
Image content allows you to add images to the conversational flow.
How to edit Image
In the Image content you can edit:
How the Image content is displayed in each channel
What is Video?
Video content allows you to add videos to the conversational flow.
How to edit Video
In the Video content you can edit:
☝️ Important information: To add a video from a streaming platform such as Youtube or Vimeo, you have to use the Text content. Add text content to the flow and paste the video link into the Message text input.
How the Video content is displayed in each channel
WhatsApp has its own components that give you the ability to make the user interact with the Conversational App easily. You have to take into account that this kind of content is only available on WhatsApp and on other channels they will be displayed in a different way.
What are Button list?
Button list allows you to include a menu of up to 10 options. These options can be grouped by a maximum of sections. This type of message offers a simpler and more consistent way for users to make a selection when interacting with the conversational app.
How to edit Button list
In the Button list you can edit:
How is the List messages displayed in each channel
Actions are contents that you can use to trigger some action during your conversational expereince.
What is Agent handoff?
Agent handoff content allows you to transfer the user to a human agent in a specific queue. You can use it in moments where the Conversational App is not capable of solving user queries.
How to edit the Agent handoff
In the Agent handoff content you can edit:
What is Go to flow action?
Go to flow action allows you to connect a specific path of a conversational flow to another flow. It also allows you to jump from one flow to another in one click.
How to edit Go to flow action
In the Go to flow action you can choose the flow you want to connect with. You just have to open the drop-down menu and select the desired flow.
If you don’t have it created yet, you can do it from the drop-down as well, clicking on the Add flow button.
Once you click on it, a modal will appear that will allow you to set the name of the new flow and add it to your conversational experience.
What is Bot action?
Bot action allows you to set a payload with specific parameters that will trigger some bot logic during the conversational flow.
How to edit Bot action
In the Bot action you can edit:
Condition content allows you to set different paths that the end-user will follow during the conversation. You may be interested in setting different paths depending on the queue status or the channel that the end-user is interacting with.
What is Queue status condition?
Queue status condition allows you to set different paths depending on whether the queue that you’ve selected is opened or closed. This way you can set up two different paths for the user to follow, for example:
How to edit Queue status condition
In the Queue status condition you can edit:
What is Channel condition?
The Channel condition allows you to set different paths depending on the channel. Whether it's because you want to define different actions depending on the channel or, for example, create a different flow for channels that allow components that others don't. You will see that by default the WhatsApp channel is set to follow a different path. This is because it has its own components that can not be used in other channels, so you will need to define different paths depending on the channel.
How to edit the Channel condition
In the Channel status condition you can edit:
What is Country condition?
The Country condition allows you to set different paths depending on the country from which the end user contacts you. This way you can manage differences in content that is in the same language, but it’s different depending on the country (e.g: return policies or costs).
How to edit the Country condition
In the Country status condition you can edit:
What is Custom condition?
The Country condition allows you to set different paths depending on the country from which the end user contacts you. This way you can manage differences in content that is in the same language, but it’s different depending on the country (e.g: return policies or costs).
How to edit the Custom condition
In the Custom status condition you can edit:
Input content allows you to understand and manage user inputs. This means that you can set intents or keywords which, when asked by the user via text, the Conversational App will be able to answer.
What are Keywords?
You can use Keywords to set a list of words that when included in a user's question, will cause the content connected to that Keyword to be displayed.
How to edit the Keywords
In the Keywords you can edit:
What are Smart Intents?
Smart Intents will allow you to identify the user intention. You just have to provide a brief and precise description of the intention you wish to detect and the AI will automatically recognize it whenever the user types any related content.
How to edit the Smart Intents
In the Smart Intents you can edit:
What are Intents?
An intent is the action, goal, or response that the customer wants to accomplish. Using an intent component, you can set an intent that you want the Conversational App to answer when the user asks a certain question.
How to edit the Intents
Before you can start editing the intents, you have to create a new AI Model in the Models section. Once you have a model created, you can set it to this Conversational App in two different ways:
Once you have selected an AI Model, the edit panel will change and you will see everything that is editable:
You can add the variables you have defined on the conversational app code to the text messages. The contents where you can add variables are:
Once you add one of these contents to the flow board and you have selected them, you will see that on the bottom of the “Message text” input, is an “Add variable button”.
To create new variables you have to click on the “Add variable” button and a dropdown will appear. There you will see a text input and a “Create” button. To add a new variable, type the name of it and click on create.
Open the “Add variable” dropdown and select the variable you want to add to the message.
You can delete contents in two different ways:
To move contents you have to select the ones you want to move, click on them and drag and drop them in your chosen position.
You can navigate through the conversational flow in different ways. Let’s look at them one by one so you can choose the one that suits you best.
Click on the board flow, in a space where you don’t have any contents, and then drag the flow in the direction you want to move.
The quick navigation buttons are included in the connections between elements. When you select a content, you will see that on each of the connections a round button with arrows will appear, which when clicked, will direct you to the next or previous connected content.
When you access Flow Builder you will see a small menu in the bottom right of the screen. Using this menu you can navigate through the flow and visulize the whole flow easily.
This menu has 5 buttons:
You have the ability to search specific text that you have included in the flow contents. To do so, you have to click on the search box and type the word you want to search. Once you've typed your search term, the first content which includes this text will be highlighted and zoomed in. If there is more than one content with your search term, the number of contents will appear along with navigation buttons so that you can look through all the contents which include your search term.
Flow Builder has the ability to add an Intent Model to your Conversational App. To do so, you first have to create a new model in the models section of the Hubtype Dashboard. Once you have created your model and you want to include it in your Conversational App, you have to click on the button AI Settings on the top-bar and then on Intent models.
Once you click on it, a pop-up will appear that will allow you to select the Intent Model you want to set.
With an AI Model set up, you can use the Intents content to allow users to ask questions to your Conversational App via text message.
Flow Builder stores all versions you have published to allow you to go back to a previous version in case you make changes you want to reverse. To recover a previous version, you have to click on version history which is located on the top bar.
Once you click on it, a menu will appear with all the previous versions that you have published with the date, hour and name of who published it.
To recover one of them, click on your chosen version and wait while a loading screen appears. The version will then be visible so that you can review if it is the version you wanted or not. A banner will appear on the bottom of the screen with the information about the version and the option to restore it or cancel the action.
If you click on cancel, you will return to the last version you have published, and if you click on restore a pop-up will appear to confirm that you want to restore it.
Once you click on the restore version button it will be loaded and you can continue working on your conversational flow. Bear in mind that this version won’t be included in the version history menu until you publish it.
Flow Builder allows you to have a conversational flow in different languages, you can include new languages, remove them and switch from one to another in an easy way.
Click on the language that appears on the top bar and a dropdown with the languages already added will appear. To add a new one you have to click on the “Add or remove languages” button and a pop up with a language list will appear.
To add new languages, check the ones on the list that you want to add to the conversational flow. Once you select it, you have two options, create it empty (none option) or with another language as a reference:
To remove languages, uncheck the ones on the list that you want to remove and then click on the “Add / remove languages” button. Take into account that it is not possible to remove the language you are currently on.
To switch between languages click on the language on the top bar, select the language you desire on the dropdown list and it will be loaded.
As you create or edit your flows in the Flow Builder, every change is saved automatically in real-time. No need to worry about losing your progress, just focus on building and we’ll handle the rest. Any time your work is saved you’ll see a confirmation message at the top bar next to the Preview button.
If there are any errors with your conversational flow during the save, any content with errors will be highlighted with an orange icon, making it easier to spot issues. An additional orange icon will also appear as a button next to the save button, indicating that there are errors in the flow.
To open the errors list, click the error button in the top bar and they will be displayed. If any errors are due to missing Content IDs, you can easily generate them using AI.
Planning to close your flow before it’s saved? No worries! We’ll ensure your latest changes are saved before closing. And if you prefer manual saves, you can still use the Command+S shortcut to save your work whenever you like.
To publish your Conversational App to production, click the “Publish” button. However, the button will remain disabled until all errors in the conversational flow are resolved.
You can exit Flow Builder in different ways:
