Skip to main content

Flow Builder Guide

The Flow Builder is the visual drag-and-drop interface within the App Builder where you design call flows by placing and connecting applets on a canvas. This guide covers all the features and techniques for building effective call flows.

Flow Builder Interface​

Canvas Navigation​

ActionMouseKeyboard
PanClick and drag on empty canvasArrow keys
Zoom inScroll wheel upCtrl/Cmd + +
Zoom outScroll wheel downCtrl/Cmd + -
Fit to screenDouble-click empty canvasCtrl/Cmd + 0
Select appletClick on appletTab to cycle through applets
Multi-selectShift + click, or drag selection boxCtrl/Cmd + A (select all)
DeleteSelect + Delete keyBackspace
Undo--Ctrl/Cmd + Z
Redo--Ctrl/Cmd + Shift + Z

Canvas Layout​

┌──────────────────────────────────────────────────────────────┐
│  Toolbar: [Save] [Validate] [Undo] [Redo] [Zoom] [Settings] │
├───────────┬──────────────────────────────────┬───────────────┤
│           │                                   │               │
│  Applet   │        Flow Canvas                │  Properties   │
│  Palette  │                                   │  Panel        │
│           │   ┌────────┐    ┌────────┐        │               │
│  Greeting │   │Greeting│───►│  IVR   │───►    │  [Config      │
│  IVR      │   └────────┘    └────────┘        │   fields      │
│  Connect  │                                   │   for          │
│  Passthru │                                   │   selected     │
│  SMS      │                                   │   applet]      │
│  Transfer │                                   │               │
│  ...      │                                   │               │
│           │                                   │               │
├───────────┴──────────────────────────────────┴───────────────┤
│  Status Bar: ✓ Flow valid | 5 applets | Last saved 2 min ago │
└──────────────────────────────────────────────────────────────┘

Placing Applets​

Drag from Palette​

  1. In the Applet Palette (left sidebar), find the applet you need
  2. Click and hold the applet
  3. Drag it onto the canvas
  4. Release to place it at the desired position

Applet Indicators​

Each applet on the canvas displays:

ElementMeaning
Applet iconVisual identifier for the applet type
Applet nameThe configured name (e.g., "Welcome Greeting")
Input connector (top/left circle)Where incoming flow connects
Output connector(s) (bottom/right circle)Where outgoing flow connects
Status indicatorGreen (configured), Yellow (incomplete), Red (error)

Connecting Applets​

Creating Connections​

  1. Hover over the source applet to reveal output connectors
  2. Click and drag from an output connector
  3. Drag the connection line to the target applet's input connector
  4. Release to create the connection

Connection Types​

Connection TypeAppletsDescription
SequentialMost appletsSingle output to single input; flow proceeds in order
BranchingIVR, PassthruMultiple outputs, each leading to a different path
FallbackConnect, PassthruSecondary output for error/timeout conditions

Removing Connections​

  1. Click on the connection line to select it
  2. Press Delete or Backspace
  3. The connection is removed; both applets remain on the canvas

Branching Logic​

IVR Branching​

The IVR applet creates branches based on caller DTMF input:

             ┌────────────────► [Sales Connect]     (Press 1)
             │
[IVR Menu] ──┼────────────────► [Support Connect]   (Press 2)
             │
             ├────────────────► [Billing Connect]    (Press 3)
             │
             └────────────────► [Replay IVR]         (No input / invalid)

Each IVR option corresponds to a separate output connector. Connect each to the appropriate next applet.

Passthru Branching​

The Passthru applet branches based on the HTTP response:

                 ┌──────────────► [VIP Agent]    (HTTP 200 + VIP flag)
                 │
[Passthru] ──────┼──────────────► [Regular Queue] (HTTP 200 + regular flag)
                 │
                 └──────────────► [Default Queue]  (HTTP error / timeout)

Time-Based Branching​

Create business-hours routing using the Passthru applet:

  1. Add a Passthru applet at the start of the flow
  2. Configure it to call your server endpoint that returns the current time status
  3. Branch to "Business Hours" flow (e.g., Connect to agents) or "After Hours" flow (e.g., Voicemail)

Configuring Applets​

Configuration Workflow​

  1. Click an applet on the canvas to select it
  2. The Properties Panel opens on the right
  3. Fill in the required fields (marked with an asterisk)
  4. Optionally configure advanced settings
  5. Click Apply to save the applet configuration

Common Configuration Fields​

FieldFound InDescription
Applet NameAll appletsCustom label for identification on the canvas
Audio FileGreeting, IVRAudio to play (upload, record, or TTS)
Phone NumberConnectNumber or group to route calls to
URLPassthruHTTP endpoint to call during the flow
TimeoutConnect, IVRSeconds to wait before moving to next step
RetriesIVR, PassthruNumber of retry attempts on failure

Flow Validation​

Automatic Validation​

The Flow Builder continuously validates your flow and shows issues in the status bar:

SeverityIconDescription
ErrorRed circleMust be fixed before saving (e.g., disconnected applet, missing required field)
WarningYellow triangleShould be reviewed (e.g., dead-end path, unusually long timeout)
InfoBlue circleSuggestions for improvement (e.g., consider adding a greeting)

Common Validation Errors​

ErrorCauseFix
"Disconnected applet"Applet not connected to any flow pathConnect it or remove it from the canvas
"Missing required field"A required configuration field is emptyClick the applet and fill in the missing field
"Dead-end path"A branch does not terminate with Hangup or ConnectAdd a Hangup applet at the end of the path
"Circular reference"Flow creates an infinite loopBreak the loop by redirecting the connection
"No entry point"No applet is marked as the first stepEnsure the first applet has no incoming connections

Advanced Flow Patterns​

Sequential Flow​

The simplest pattern -- applets execute one after another:

Greeting ──► Connect ──► Hangup

Caller selects options via DTMF:

Greeting ──► IVR ──► (1) Connect Sales
                  ──► (2) Connect Support
                  ──► (3) Greeting (account info)
                  ──► (*) Replay IVR

Dynamic Routing with HTTP​

Use Passthru to make routing decisions based on external data:

Greeting ──► Passthru (check CRM) ──► (VIP) Connect to VIP agent
                                   ──► (Regular) Connect to queue
                                   ──► (Error) Connect to default

Multi-Level IVR​

Nested IVR menus for complex menu trees:

Greeting ──► IVR Level 1 ──► (1) IVR Level 2 (Sales) ──► (1) Connect Sales India
                                                       ──► (2) Connect Sales APAC
                          ──► (2) IVR Level 2 (Support) ──► (1) Connect Tech Support
                                                         ──► (2) Connect Billing
                          ──► (0) Connect Operator

Fallback with Voicemail​

Handle cases where agents are unavailable:

Greeting ──► Connect Agent ──► (answered) [call proceeds]
                            ──► (busy/no-answer) Greeting ("Please leave a message")
                                                 ──► Voicemail ──► Email Notify ──► Hangup

Best Practices​

  1. Keep flows readable -- Arrange applets left-to-right or top-to-bottom for visual clarity
  2. Name your applets -- Use descriptive names like "Welcome Greeting" instead of "Greeting 1"
  3. Limit IVR depth -- Maximum 2 -- 3 levels of IVR menus to avoid caller frustration
  4. Always handle errors -- Every branching applet should have a fallback/default path
  5. Test all branches -- Walk through every possible path during testing
  6. Use the mini-map -- For large flows, enable the mini-map to navigate quickly
  7. Save frequently -- The builder supports auto-save, but manual saves create version checkpoints