Let’s have a look at the Bot Flow Builder.
Parts of the Bot Flow Builder
1). Editor Screen – This is where your will place your components and do your flow set-up.
2). Dock Menu – You can create components using the Dock Menu by dragging the component from the Dock menu and dropping it on the Editor Screen.
3). Components – This is the building block of your flow. Each component have an “Input” and “Output” sockets. You can connect each components from one another by connecting compatible input and output sockets.
4). Control Buttons – This part contains 4 buttons for the primary operation of the flow builder. You can save, arrange, send a test and finally, you can maximize and minimize the editor screen window.
The Dock Menu
You can move around the dock menu by dragging it. You can also minimize and maximize it by double-clicking.
Creating a Component
You can create a component using the Dock Menu by dragging your chosen component then dropping it on the editor screen.
You can also create a component by RIGHT-CLICKING anywhere on the editor screen, then the Context Menu will show. Once the context menu appears, simply click on your chosen component and it will be created on the editor screen.
Component Status Types
There are three statuses of Components:
Configured – Means that the component has a value and is configured. (colored green)
No Value – Means that the component is disconnected from the Reference component link-tree, but it has no value. (colored blue)
Disconnected – This component may have or have not a value, but it is disconnected from the Reference component link-tree.
Configuring a Component
You can configure a component, all you have to do is to DOUBLE CLICK the component and a pop-up form will show up for the configuration.
Component Connections
The example below shows that you cannot connect incompatible sockets.
On the example below, you can only connect sockets if they are compatible. Ex: Text to Buttons connection.
Connection Profile:
Text:
- Input (FromStep): Reference, NewMessageSet, Text, Carousel, FacebookMedia, Image, Video, File, Delay
- Output (NextStep): Text, Carousel, FacebookMedia, Image, Video, File, Delay, CarouselItem
- Output (Buttons): QuickReply, Buttons
Carousel:
- Input (FromStep): Reference, NewMessageSet, Text, Carousel, FacebookMedia, Image, Video, File, Delay
- Output (NextStep): Text, Carousel, FacebookMedia, Image, Video, File, Delay, CarouselItem
- Output (CarouselItem): CarouselItem
- Output (QuickReply): QuickReply
CarouselItem:
- Input (FromStep): Reference, NewMessageSet, Text, Carousel, FacebookMedia, Image, Video, File, Delay
- Output (Buttons): QuickReply, Button
FacebookMedia:
- Input (FromStep): Reference, NewMessageSet, Text, Carousel, FacebookMedia, Image, Video, File, Delay
- Output (NextStep): Text, Carousel, FacebookMedia, Image, Video, File, Delay, CarouselItem
- Output (Buttons): QuickReply, Buttons
Image:
- Input (FromStep): Reference, NewMessageSet, Text, Carousel, FacebookMedia, Image, Video, File, Delay
- Output (NextStep): Text, Carousel, FacebookMedia, Image, Video, File, Delay, CarouselItem
Video:
- Input (FromStep): Reference, NewMessageSet, Text, Carousel, FacebookMedia, Image, Video, File, Delay
- Output (NextStep): Text, Carousel, FacebookMedia, Image, Video, File, Delay, CarouselItem
File:
- Input (FromStep): Reference, NewMessageSet, Text, Carousel, FacebookMedia, Image, Video, File, Delay
- Output (NextStep): Text, Carousel, FacebookMedia, Image, Video, File, Delay, CarouselItem
QuickReply:
- Input (FromStep): Text, Carousel, CarouselItem, FacebookMedia
- Output (NewMessageSet): Reference, NewMessageSet
Buttons:
- Input (FromStep): Text, Carousel, CarouselItem, FacebookMedia
- Output (NewMessageSet): Reference, NewMessageSet
NewMessageSet:
- Input (Buttons): QuickReply, Button
- Input (Triggers): Triggers
- Output (NextStep): Text, Carousel, FacebookMedia, Image, Video, File, Delay, CarouselItem
- Output (Labels): Labels
Reference:
- Input (Buttons): QuickReply, Button
- Input (Triggers): Triggers
- Output (NextStep): Text, Carousel, FacebookMedia, Image, Video, File, Delay, CarouselItem
Delays:
- Input(FromStep): Reference, NewMessageSet, Text, Carousel, FacebookMedia, Image, Video, File, Delay, CarouselItem
- Output (NextStep): Text, Carousel, FacebookMedia, Image, Video, File, Delay, CarouselItem
Labels:
- Input(NewMessageSet): NewMessageSet
Triggers:
- Output (NewMessageSet): Reference, NewMessageSet
Saving the Flow
You will not be able to save the flow if one or more for your components is disconnected or does not have a value. The components which are not ready are highlighted by a glowing red border.
If all of the flow’s components are colored GREEN, then it means that all components are configured. Flow will only be ready for saving if all components have been configured.
Using the Preview
You can also review the values of your components by HOVERING over each of them. A preview snippet will appear whenever you hover over your component – and inside that preview snippet is the value of the your component.
