Flow Builder
The Flow Builder is where you design your WhatsApp Flow — add screens, drag in components, configure properties, and preview the result. It provides a visual, drag-and-drop interface so you can build flows without writing any code.
2. Add 2-3 screens with different components
3. Capture the full builder showing the screen list, component canvas, and preview panel
Save to:
static/img/screenshots/developer-tools/whatsapp-flows/flow-builder/flow-builder-overview.pngBuilder layout
The flow builder has three main areas:
| Area | Position | Purpose |
|---|---|---|
| Screen list | Left panel | Lists all screens. Add, select, delete, and reorder screens. |
| Component canvas | Center | Shows the selected screen's components. Add, configure, reorder, and remove components. |
| Preview | Right panel | Live preview of how the screen looks on a customer's phone. |
At the top of the builder you'll find the header bar with:
- Flow name and category
- Flow mode button — Toggle between Simple Flow and Smart Flow (see Flow mode below)
- Save / Update button
- Import JSON and Export JSON buttons
- Send Test button
- Publish button (for draft flows)
Flow settings
When you create a new flow (or edit an existing draft), you first configure the flow settings.
2. Fill in the flow name, select a category, and add a description
3. Fill in the flow details
4. Capture the settings panel
Save to:
static/img/screenshots/developer-tools/whatsapp-flows/flow-builder/flow-settings.png| Field | Required | Description |
|---|---|---|
| Flow Name | Yes | A descriptive name — max 255 characters |
| Category | Yes | Select from: Lead Generation, Appointment Booking, Survey, Sign Up, Sign In, Contact Us, Customer Support, Other |
| Description | No | Optional description — max 1,000 characters |
Sensitive fields
You can mark specific form fields as sensitive so their values are masked in flow logs and analytics. This is useful for fields that collect personal or confidential data like passwords, national IDs, or financial information.
In the flow settings, add field names to the Sensitive Fields list. When a customer submits the flow, these field values appear as *** in the response logs instead of the actual values.
Sensitive fields require WhatsApp Flow JSON version 5.1 or later.
Flow mode
Every flow operates in one of two modes, controlled by the flow mode button in the builder header:
| Mode | Description |
|---|---|
| Simple Flow | Static content only — all data is hard-coded in the flow. No server communication. |
| Smart Flow | API-connected — your flow communicates with your server in real time via Data Exchange. Enables dynamic data, server-side validation, and real-time processing. |
Click the flow mode button to toggle between modes. When you switch to Smart Flow:
- An Endpoint URI is auto-generated for your flow (read-only — managed by EzPulze)
- Footer actions gain the Data Exchange and Update Data options
- You can configure screen data fields and initial payload
Smart Flow mode is also auto-enabled when you configure an External API data source on any component.
Managing screens
A flow consists of one or more screens. Each screen is a page that the customer sees — like a step in a multi-step wizard.
Adding a screen
Click the + Add Screen button in the left panel. A new screen is added with a default ID.
Screen properties
| Property | Description |
|---|---|
| Screen ID | Unique identifier — max 255 characters. The first screen defaults to "WELCOME". |
| Title | Screen title displayed at the top — max 255 characters |
| Terminal | If enabled, this is the last screen. The footer shows a "Complete" action instead of "Navigate". Terminal screens are auto-detected based on footer configuration. |
| Refresh on back | If enabled, refreshes data when the customer navigates back to this screen |
Deleting a screen
Click the delete icon next to a screen in the left panel. You cannot delete the last remaining screen.
Selecting a screen
Click on any screen in the left panel to view and edit its components in the center canvas.
Adding components
Click the + Add Component button on the canvas to open the component menu. Components are organized into five categories:
| Category | Components |
|---|---|
| Text | Heading, Subheading, Body, Caption, Rich Text |
| Media | Image, Embedded Link |
| Navigation | Navigation List |
| Text Answer | Text Input, Text Area, Date Picker, Calendar Picker |
| Selection | Radio Buttons, Checkbox Group, Dropdown, Chips Selector, Opt-In |
Click a component to add it to the current screen. The Footer component is automatically added to every screen and cannot be removed.
For a complete guide to every component and its properties, see Components.
Drag-and-drop reordering
Reorder components on a screen by dragging them using the handle icon (⋮⋮) on the left side of each component. Drop the component at the desired position.
The Footer component is always pinned to the bottom and cannot be reordered.
Configuring components
Click on any component to open its properties panel on the right side of the canvas.
2. Capture the properties panel on the right showing all configuration options
Save to:
static/img/screenshots/developer-tools/whatsapp-flows/flow-builder/component-properties.pngCommon properties
Most input components share these properties:
| Property | Description |
|---|---|
| Name | Field identifier used in the response data — max 255 characters |
| Label | Text displayed above the field |
| Required | Whether the customer must fill in this field before proceeding |
| Helper Text | Hint text displayed below the field |
| Error Message | Custom message shown when validation fails |
| Initial Value | Pre-filled default value |
Character counters appear on fields with character limits. When you reach 90% of the limit, the counter turns orange as a warning.
Conditional visibility
You can show or hide a component based on a condition. This is useful when a component should only appear depending on the customer's previous input or data from your server.
In the component properties, set the Visible when field to an expression like:
${data.showAddress}— show only when theshowAddressdata field is true${form.contactMethod}— show based on a form field value
When the condition evaluates to a falsy value, the component is hidden from the customer.
Conditional enable/disable
Similar to visibility, you can enable or disable a component based on a condition. A disabled component appears on the screen but is greyed out and cannot be interacted with.
Set the Enabled when field to an expression:
${data.canEdit}— enable only when the server says editing is allowed${form.agreeToTerms}— enable the submit button only after the customer checks the terms checkbox
Footer component
Every screen has a Footer component that is automatically added and cannot be deleted or reordered. The footer contains the main action button for the screen.
Footer properties
| Property | Description |
|---|---|
| Label | Button text — max 35 characters |
| Left Caption | Small text to the left of the button — max 15 characters |
| Center Caption | Small text centered below the button — max 15 characters |
| Right Caption | Small text to the right of the button — max 15 characters |
| Enabled when | Expression to conditionally enable/disable the button |
Footer actions
| Action | Description |
|---|---|
| Navigate | Move to the next screen in the flow |
| Complete | End the flow and submit all collected data |
| Data Exchange | Send the current screen's data to your server and receive dynamic content for the next screen (requires Smart Flow mode) |
| Update Data | Send data to your server and update the current screen without navigating (v7.1+) |
2. Open the action type dropdown to show all four options
3. Capture the configuration panel
Save to:
static/img/screenshots/developer-tools/whatsapp-flows/flow-builder/footer-actions.pngFooter payload
For Navigate, Data Exchange, and Update Data actions, you can configure a payload — a JSON object that is sent along with the action. Use ${form.fieldName} references to include the customer's input values.
Example payload:
{
"name": "${form.full_name}",
"email": "${form.email}",
"selected_service": "${form.service_type}"
}
When the customer taps the button, the references are replaced with the actual values the customer entered. See Dynamic Data — Global references for the full reference syntax.
Screen data fields
When using Smart Flow mode, each screen can have data fields — dynamic data that your server populates at runtime. These are different from form fields (which the customer fills in).
You can add data fields in the screen configuration panel. Data fields use the ${data.fieldName} syntax and can be referenced in component properties like labels, initial values, visibility conditions, and more.
See Dynamic Data — Screen data fields for details.
Global reference picker
When configuring component properties that accept dynamic values (labels, initial values, helper text, visibility conditions, payloads), you can use the Global Reference Picker dialog.
Click the reference icon next to a property field to open the picker. It shows a tree view of all available references, organized by source:
| Source | Syntax | Description |
|---|---|---|
| Form fields | ${form.fieldName} | Values entered by the customer on the current screen |
| Screen data | ${data.fieldName} | Data fields populated by your server or initial payload |
| Cross-screen data | ${screen.SCREEN_ID.form.fieldName} | Values from a different screen |
| Navigation list items | ${item.id}, ${item.title}, ${item.description} | Properties of the selected navigation list item |
You can search and filter references in the picker, then click to insert the reference into the property field.
See Dynamic Data — Global references for a complete guide.
Expression builder
For conditional properties (Visible when, Enabled when), you can use the Expression Builder dialog. Click the build icon next to the condition field to open it.
The expression builder helps you visually construct conditions by:
- Selecting a reference (e.g.,
${form.country}) - Choosing an operator (equals, not equals, contains, etc.)
- Setting the comparison value
This is easier than typing expressions manually, especially for complex conditions.
Preview
The right panel shows a live preview of how the current screen looks on a customer's phone.
2. Capture the preview showing the mobile mockup with components
Save to:
static/img/screenshots/developer-tools/whatsapp-flows/flow-builder/flow-preview.pngNormal mode
In normal mode, the preview updates as you make changes to the selected screen. You can see how components look, but you cannot interact with them.
Interactive mode
Switch to Interactive mode to simulate the full flow experience:
- Fill in fields — Type in inputs, select options, pick dates
- Tap footer buttons — Navigate between screens as a customer would
- Navigation history — Use the back button to go to previous screens
- Complete the flow — See what happens when the customer taps "Complete"
Interactive mode is the best way to test your flow's navigation and screen transitions before publishing.
Import and export
Importing a flow
- Click Import JSON in the flow builder header
- A Monaco code editor opens where you can paste your flow JSON
- Paste or type the JSON
- Click Import
- The flow structure is validated and loaded into the builder
- A success message confirms how many screens were imported
Exporting a flow
- Click Export JSON in the flow builder header
- A Monaco code editor opens showing the full flow JSON
- Click Copy to Clipboard to copy the JSON
This is useful for:
- Backing up flow designs before publishing
- Sharing flows between EzPulze accounts
- Version control in your development workflow
Saving your work
Click Save (for new flows) or Update (for existing drafts) to save your changes. The flow is validated and stored — any validation errors are shown as alerts so you can fix them.
Only Draft flows can be saved. Published and deprecated flows are read-only.