Skip to content

Visual Flow Editor

The visual editor lets you build conversation flows by arranging and connecting blocks on a canvas. This drag-and-drop interface makes it easy to see your entire conversation at a glance and make changes quickly.

Opening the Visual Editor

  1. Go to Conversations in the left menu
  2. Click Create Flow for a new flow, or click the Edit (pencil icon) on an existing flow
  3. The visual editor opens in full-screen mode

Visual editor overview

Understanding the Interface

The Canvas

The main area where you build your flow. This is where you'll see all your steps as boxes (nodes) connected by lines.

The Toolbar

At the top of the editor, you'll find:

  • Save - Save your changes
  • Auto-layout - Automatically arrange nodes neatly
  • Zoom controls - Zoom in/out or fit to screen
  • Add Step - Create a new step
  • Back to List - Return to the flows list

Node Colors

Different types of steps have different colors:

Color Step Type
Blue Start/Intro step
Green Regular message step
Yellow Question/Choice step
Orange External action step
Red/Pink End step

Zooming

  • Scroll wheel - Zoom in and out
  • Zoom buttons - Click + or - in the toolbar
  • Fit to screen - Click the fit button to see all nodes

Panning

  • Click and drag on empty canvas space to move around
  • Useful for large flows that don't fit on screen

Selecting Nodes

  • Click a node to select it
  • Selected nodes show a highlighted border
  • Click empty space to deselect

Working with Steps (Nodes)

Adding a New Step

  1. Click + Step in the toolbar
  2. A new node appears on the canvas
  3. Click the node to configure it

Moving Steps

  1. Click and hold on a step
  2. Drag it to a new position
  3. Release to drop it

The flow logic (connections) stays the same—only the visual position changes.

Editing a Step

  1. Click on any step to select it
  2. A panel opens showing step details
  3. Edit the step name, message, and options
  4. Changes save when you click away or press Save

Deleting a Step

  1. Select the step you want to delete
  2. Click the delete/trash icon
  3. Confirm the deletion

Warning

Deleting a step also removes all connections to and from that step. Make sure to reconnect any orphaned steps.

Working with Connections

Connections show how the conversation flows from one step to another.

Creating a Connection

  1. Hover over a step to see connection points
  2. Click and drag from the output point (usually bottom or right)
  3. Drop on the input point of the target step (usually top or left)
  4. A line appears connecting the two steps

Editing a Connection

  1. Click on a connection line
  2. A panel opens to configure conditions
  3. Set when this path should be taken

Deleting a Connection

  1. Click on the connection line to select it
  2. Press delete or click the remove option
  3. The line disappears

Conditional Connections

When a step has multiple possible next steps (like after a choice), you can set conditions:

  • "If visitor chooses Option A" → Go to Step X
  • "If visitor chooses Option B" → Go to Step Y
  • "Default" → Go to Step Z (fallback)

Auto-Layout

If your flow looks messy, use auto-layout:

  1. Click the Auto-layout button in the toolbar
  2. Nodes rearrange automatically
  3. Connections stay the same

This is especially helpful after adding many steps or making big changes.

Saving Your Work

Manual Save

Click the Save button in the toolbar at any time.

Exiting the Editor

Click Back to List to return to the flows page. You'll be prompted to save if you have unsaved changes.

Tips for Using the Visual Editor

Keep It Organized

  • Put related steps near each other
  • Use auto-layout when things get messy
  • Leave space between nodes for readability

Work Top to Bottom

Most flows work best organized from top (start) to bottom (end):

[Start]
   ↓
[Question]
   ↓
[Collect Info]
   ↓
[End]

Name Steps Clearly

Give each step a descriptive name:

  • ✅ "Ask for email"
  • ✅ "Show service options"
  • ❌ "Step 3"
  • ❌ "Next"

Test as You Build

Don't wait until the flow is complete:

  1. Build a few steps
  2. Save and test
  3. Continue building
  4. Test again

Common Tasks

Create a Simple Linear Flow

  1. Start with the intro step (created automatically)
  2. Add Step 1: Your first message
  3. Connect intro → Step 1
  4. Add Step 2: Your next message
  5. Connect Step 1 → Step 2
  6. Continue until you reach the end step

Create a Branching Flow

  1. Add a choice step with multiple options
  2. Add different steps for each branch
  3. Connect the choice to each branch based on the option
  4. Branches can merge back together at a later step

Add an End Point

  1. Every flow needs at least one end step
  2. Connect your final steps to the end
  3. The end step delivers a closing message

Troubleshooting

Changes not saving

  • Check your internet connection
  • Try clicking Save manually
  • Refresh the page and check if changes appear

Connections won't create

  • Make sure you're dragging from output to input points
  • Verify both steps exist and are visible
  • Try zooming in for more precision

Flow looks cluttered

  • Use auto-layout
  • Delete unused steps
  • Increase zoom and spread nodes apart

Can't find a step

  • Use Fit to Screen to see all nodes
  • Zoom out to get a full view
  • Check if the step was accidentally deleted

Next Steps