Visual Workflow Builder

The visual builder is a canvas-based editor where you drag step nodes, connect them with edges, and see the entire flow at a glance. It is the best tool for building complex workflows with branching logic.

The visual builder is available on desktop screens (1024px and wider). On smaller screens, use the wizard builder instead.

Opening the Canvas

There are three main ways to open the visual builder:

1. From New Automation, click Open Visual Builder to create a draft workflow shell and go straight to the canvas.
2. From a template card, click Build Visually to clone the template directly into the canvas editor.
3. From an existing workflow detail page, click Visual Builder in the action bar.

Layout

The canvas has three panels:

• Left: Step Palette -- a collapsible sidebar listing all available step types, organized by category. You can search by name.
• Center: Canvas -- the main work area where nodes live. Scroll to pan, pinch or use controls to zoom. A dot grid helps with alignment.
• Right: Config Panel -- appears when you select a node. Shows the configuration form for that step type.

A toolbar at the top shows the workflow name, zoom controls, Auto Arrange, Fit Workflow, Reset View, a minimap toggle, and action buttons for saving, testing, and activating.

When a workflow opens with missing or bad saved positions, CE Pro now auto-arranges the graph into a readable layered layout instead of stacking every step in a pile.

Adding Nodes

Drag a step type from the palette onto the canvas. The node appears where you drop it with a default configuration.

Each node type has a distinct visual style:

• Trigger (blue border) -- the starting point. There is always exactly one trigger node.
• Send SMS (green border) -- message preview shown on the node
• Send Email (purple border) -- subject line shown on the node
• Delay (amber border) -- shows the wait duration
• Condition (orange border) -- has two output handles: TRUE (green) and FALSE (red)
• Award XP (yellow border) -- shows XP amount
• Other actions (gray border) -- shows a summary of the action

Call-based steps are fully available in the palette too. Make Call and Leave Voicemail use the same teal call-node styling so phone actions are easy to spot in larger workflows.

Connecting Nodes

Click an output handle and drag to an input handle to create an edge that defines the flow.

For condition nodes, there are two output handles at the bottom of the node:

• TRUE (left branch, green) -- connects to the path taken when the condition passes
• FALSE (right branch, red) -- connects to the path taken when the condition fails

Edges from condition nodes are automatically labeled TRUE or FALSE so the branch logic stays readable on larger workflows.

Configuring Nodes

Click any node to select it. The config panel opens on the right with fields specific to that step type.

All nodes have a Label field for a descriptive name. Beyond that, each type has its own form:

• Send SMS: Message template textarea with merge field toolbar, character count, and SMS segment counter
• Send Email: Subject and body fields with merge field toolbar
• Delay: Duration number and unit selector (seconds, minutes, hours, days)
• Condition: Field picker, operator, and value
• Update Status: Entity and new status dropdowns
• Add/Remove Tag: Tag name input
• Webhook: URL, HTTP method

Changes auto-save with a short debounce. The toolbar now shows clear canvas save states:

• Unsaved changes
• Saving...
• Saved
• Save failed

Canvas Controls

• Zoom in/out -- toolbar buttons or scroll wheel
• Auto Arrange -- rebuilds the graph into a readable layered layout
• Fit Workflow -- zooms to fit all nodes
• Reset View -- returns the viewport to the default centered canvas view
• Minimap -- toggle in toolbar to show a miniature overview in the corner
• Snap to grid -- nodes snap to a 16px grid for clean alignment
• Delete node -- select a node and press Delete/Backspace, or use the node's context menu

Saving and Activating

The canvas saves as you work:

• Node positions auto-save after you move them.
• Step labels and step settings auto-save after a short debounce when you edit them in the config panel.
• New connections, disconnections, and branch-path edits are saved as soon as you make them.
• The canvas viewport is saved separately, so returning to the workflow brings you back to the same zoom/pan state.

Use the Save button in the toolbar when you want to force a fresh graph save before leaving the page.

To activate the workflow directly from the canvas, click the status toggle button. Draft workflows can be activated; active workflows can be paused.

Switching Between Builders

You can switch between the wizard and visual builder at any time. Both editors work on the same underlying workflow data. Changes made in one are reflected in the other.

• From the canvas toolbar, click Wizard to open the step-by-step editor
• From the wizard, click Open Visual Builder before you finish the workflow, or open the saved workflow later and click Visual Builder

If a save fails, the toolbar now keeps the error visible instead of pretending the canvas is already saved. Newly dropped nodes and branch connections also now persist through the same UUID-safe graph contract used by the rest of the workflow editor.