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

1. Click the "+" button on any edge between nodes
2. A popup menu appears with all available action types
3. Click an action to insert it at that position
4. 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.