Flows
Flow Editor
Using the visual flow editor
The flow editor is a powerful drag-and-drop canvas built on React Flow where you build automation workflows by connecting cards.
Interface Overview
| Area | Purpose |
|---|---|
| Header | Back button, flow title, version selector, Edit/Preview toggle, save status, settings, publish |
| Canvas | Main area for placing and connecting cards |
| Card Panel | Left sidebar with draggable card types by category |
| Settings Panel | Right sidebar for configuring the selected card |
| Toolbar | Bottom-center controls for pan/select modes, zoom, undo/redo |
Building a Flow
- Start with a trigger — Every flow begins with a trigger node that defines when the flow starts.
- Add cards — Drag cards from the left panel onto the canvas.
- Connect cards — Draw connections from output ports to input ports.
- Configure — Click each card to open its settings in the right panel.
- Use variables — Insert dynamic values with
{{variableName}}syntax. - Publish — Click the publish button to make the flow live.
Header Bar
| Element | Description |
|---|---|
| Back button | Return to the flows list |
| Flow title | Displays the flow name (editable in Settings only) |
| Version selector | Dropdown listing all versions and the current draft — switch between them to preview or restore (see Version History) |
| Edit / Preview | Toggle between editing mode and read-only preview of a version snapshot |
| Save status | Shows save state (auto-save with 500ms debounce) |
| Settings | Open flow settings (title, description, timeout, strict mode, integrations) |
| Publish / Unpublish | Activate or deactivate the flow — publishes the current draft as a new version |
Card Panel (Left Sidebar)
The left sidebar lists all available card types, searchable and organized by category:
| Category | Cards |
|---|---|
| Core | Text, Question, WhatsApp (Template / List / Catalog / Product / Products), Media (Media / Audio / Document), Buttons (Button / Media Button / Audio Button / Document Button), Note |
| AI | AI Agent (AI Text / AI Classification / AI TTS / AI Agent) |
| Tools | HTTP Request, Assign Operator |
| Logic | Condition, Sub-flow |
| Data | Update Contact, CRM (HubSpot / Salesforce / BigQuery) |
Some entries are dropdowns that expand to reveal sub-cards (e.g. WhatsApp, Media, Buttons, AI Agent, CRM). The WhatsApp dropdown dynamically shows only integrations connected to the workspace.
Drag a card from the panel onto the canvas to add it. You can also search by name and use arrow keys to navigate.
Tips
- Helper lines appear when aligning cards for a clean layout.
- Clipboard — Select cards and use
Cmd+C/Cmd+Vto duplicate. - Keyboard shortcuts —
Deleteto remove,Cmd+Zto undo,Cmd+Shift+Zto redo. - Auto-save — Your flow saves automatically as you work (500ms debounce).
- Non-copyable nodes: Triggers and Ghost Cards cannot be copied.