Flow Builder

The Flow Builder is where you design your chatbot conversations. It's a visual drag-and-drop editor that lets you create, connect, and configure conversation nodes on a canvas.

📸

Screenshot: Full Flow Builder interface showing canvas with nodes and connections

flow-builder-full.png

1. Open any existing flow or create a new one
2. Capture the full builder showing the header, canvas with nodes, and the node picker sidebar
Save to: static/img/screenshots/chatbot-flows/flow-builder/flow-builder-full.png

Builder layout

The Flow Builder has these main areas:

Area	Position	What it does
Header	Top	Flow name, Save button, Version History, JSON Export, Settings
Settings Panel	Top-right	Flow name, description, and configuration
Canvas	Center	The main workspace where you design your flow
Node Picker	Left sidebar	List of available node types to drag onto the canvas
Config Panel	Right sidebar	Opens when you click a node to configure its settings

Canvas controls

Zooming

• Mouse wheel — Hold Ctrl (or Cmd on Mac) and scroll to zoom in/out
• Zoom range — 25% to 200%
• Fit to view — Double-click the canvas background to fit all nodes in view

Panning

• Click and drag on the canvas background to move around
• The canvas extends in all directions — you have unlimited space

Grid

The canvas shows a subtle grid to help you align nodes. Nodes snap to the grid for a clean layout.

Working with nodes

Adding nodes

1. In the Node Picker on the left, find the node type you want
2. Drag it onto the canvas and drop it where you want

Alternatively, you can click the + button on any existing node's output to add a connected node.

📸

Screenshot: Node Picker sidebar showing all available node types

node-picker.png

1. In the Flow Builder, look at the left sidebar
2. Capture the Node Picker showing all available node categories and types
Save to: static/img/screenshots/chatbot-flows/flow-builder/node-picker.png

Configuring nodes

1. Click on any node to select it
2. The Config Panel opens on the right side
3. Fill in the node's settings (each node type has different options)
4. Changes are applied immediately

Connecting nodes

1. Hover over a node to see its output handle (small circle on the right side)
2. Click and drag from the output handle to another node's input handle (left side)
3. A connection line appears between the two nodes

Deleting nodes and connections

• Delete a node — Click the node, then press the Delete key or click the delete icon
• Delete a connection — Click on the connection line, then press Delete

warning

Deleting a trigger node is not allowed if it's the only trigger in the flow. Every flow must have exactly one trigger node.

Version History

Every time you save the flow, a new version is automatically created. This means you can always go back to a previous version if something goes wrong.

📸

Screenshot: Version History panel showing list of saved versions

version-history.png

1. In the Flow Builder header, click the Version History button
2. Capture the version history panel showing multiple versions with dates
Save to: static/img/screenshots/chatbot-flows/flow-builder/version-history.png

Feature	Description
Auto-versioning	Each save creates a new version automatically
Version number	Versions are numbered sequentially (v1, v2, v3...)
Change summary	Optional description of what you changed (up to 500 characters)
Rollback	Activate any previous version to restore it
Created by	Shows who created each version

How to roll back to a previous version

1. Click Version History in the header
2. Browse the list of versions
3. Click on the version you want to restore
4. The canvas updates to show that version's flow
5. Click Activate to make it the live version

JSON Export

Click the Export button in the header to download the flow as a JSON file. This is useful for:

• Backing up your flow
• Sharing flow designs with your team
• Debugging flow structure

Settings

Click the Settings icon in the header to access the flow settings panel:

Setting	Description
Flow Name	Change the flow name (3–255 characters)
Description	Update the flow description (up to 1,000 characters)

Tips and best practices

• Start simple — Build a basic flow first, then add complexity
• Name your nodes — Give each node a descriptive label so the flow is easy to read
• Use the grid — Align nodes neatly for a clean, readable layout
• Save often — Every save creates a version, so you can always undo mistakes
• Test before activating — Use manual triggering to test your flow with a test contact
• Keep it linear when possible — Deep branching can get complex quickly; use Router nodes for multi-path logic