Visual Builder & Workflow Canvas
Master the visual automation builder — add triggers, chain actions, create conditions with branching, use drag-and-drop to design workflows on the React Flow canvas.
The Visual Builder
The automation builder uses an interactive visual canvas where you connect trigger and action nodes to create your workflow. It's powered by React Flow, giving you a smooth drag-and-drop experience.
Opening the Builder
- New automation: Automations → "+ New Automation"
- Edit existing: Click the ✏️ pencil icon on an automation card
- From template: Templates page → "Use Template" (pre-populates the canvas)
Canvas Elements
The builder has these visual elements:
Node Types
| Node | Appearance | Purpose |
|---|---|---|
| Trigger | Blue-bordered card with trigger icon | Starting point — what event starts the automation |
| Action | White card with action icon | What happens — send message, assign team, etc. |
| Condition | Card with Yes/No outputs | Branching logic — splits the flow based on criteria |
| Branch Placeholder | Dashed outline card | Empty Yes or No branch, click to add actions |
| End Flow | 🏁 flag indicator | Marks the end of the automation |
Edges (Connections)
Nodes are connected by insertable edges — lines with a "+" button in the middle. Click the "+" to insert a new action between two existing steps.
Condition Branches
When you add a Check Condition node, it creates two branches:
- Yes branch (left) — actions when the condition is true
- No branch (right) — actions when the condition is false
Branches are rendered with animated dashed edges and displayed side-by-side.
Builder Toolbar
The top toolbar contains:
- Workflow name — click to edit (defaults to "Untitled Automation")
- WhatsApp template settings — name, language, category (if using a WhatsApp action)
- Save button — saves the workflow
- Activate button — saves and turns the automation on
Configuration Panels
When you click a node, a configuration panel opens on the right side of the screen. Each node type has its own panel:
- Trigger panel — select trigger type, sub-event, and delay
- Send Message panel — template text, variables, emoji picker
- Interactive Menu panel — header, body, footer, menu items
- Assign Team panel — select target team
- Send Email panel — select saved email template
- Condition panel — define the check criteria
- And more for each action type
Adding Steps
- Click the "+" button on any edge between nodes
- A popup menu appears with all available action types
- Click an action to insert it at that position
- The new node appears inline, connected to the previous and next steps
Moving & Reordering
Nodes in the main chain can be moved up or down to change the execution order. The canvas automatically rearranges and reconnects edges.
Canvas Controls
- Zoom in/out — mouse wheel or pinch gesture
- Pan — click and drag the canvas background
- Fit view — auto-fits after changes to show all nodes
- Background — dotted pattern for visual reference
Saving & Activating
- Save — persists your workflow without activating it (stays inactive)
- Save & Activate — saves and turns the automation on immediately
- Existing automations can be updated by saving over them
Testing with the Playground
Before activating, use the Playground to test your workflow. Click the ▶ Playground button in the toolbar to open a simulation panel alongside your canvas. You can send test messages and watch each step execute — without creating real tickets or using credits. See Automation Playground — Testing Your Workflows for full details.