Flow Builder

​

What is this?

The Flow Builder is where you design the screens of a WhatsApp Flow. It opens when you click a flow’s row (or its Edit icon) on the Flows page, and right after you create or clone a flow. The builder has three columns and shows the flow exactly as a customer sees it in WhatsApp — click any element in the preview to edit it. [SCREENSHOT: flows-builder-overview — The Flow Builder with the Add content palette on the left, the phone-style screen preview with arrows in the middle, the Screen settings panel and Save button on the right, and the Add content bar under the canvas]

​

What can I do here?

• Add content to a screen by clicking it in the palette, dragging it onto the preview, or using the quick-add bar
• Select an element in the preview to edit it, move it up or down, duplicate it, or delete it
• Drag elements in the preview to reorder them
• Add, delete, reorder, rename, and move between screens
• Edit each screen’s title and its Button
• Map each answer to a contact custom field
• Show If and Switch content depending on earlier answers — see Logic: If and Switch
• Load options from your own server or Google Calendar — see Dynamic options and endpoints
• Switch to the JSON view to see the flow as it will be sent to WhatsApp
• Save the flow

​

How to use it

​

Add content to a screen

The Add content palette lists everything you can put on a screen, in groups you can collapse by clicking the group name: Text, Text answer, Selection, Media, Links and lists, and Logic. Type in Search content to filter by name or description; matching groups open automatically and Nothing matches your search. appears if nothing fits. [SCREENSHOT: flows-builder-palette — The Add content palette with the search box and the Text, Text answer, Selection, Media, Links and lists, and Logic groups] There are three ways to add an element:

• Click it in the palette — it is added at the end of the current screen and selected.
• Drag it from the palette onto the preview. A line shows where it will land; drop it there.
• Use the Add content: bar under the preview for the three most common choices: Short answer, Paragraph, and Single choice.

Hovering a palette item shows a short description, and the hint at the bottom of the left column shows the description of the element you have selected (or “Click content to add it to the current screen.”). Every screen has one Button at the bottom. You don’t add it from the palette — it is always there. See The Button. A flow can have up to 100 screens — adding more shows “WhatsApp allows up to 100 screens in one flow.” A screen holds up to 50 components. When the limit is reached the palette items are disabled, the palette says “This screen has reached WhatsApp’s 50-component limit.”, and a Component limit reached message appears if you try to add more. A screen can also hold only one Upload element. For every element’s settings and limits, see Flow content and settings.

​

Edit, move, and delete elements

Click an element in the preview to select it. A highlight appears and its settings open in the right-hand panel.

• A small toolbar above the selected element has Move up, Move down, Duplicate, and Delete.
• The same Delete component and Duplicate component icons are in the settings panel header.
• Drag an element up or down in the preview to reorder it.
• Duplicating gives the copy a new, unique Field name automatically.

The Button always stays at the bottom of the screen and can’t be moved.

​

Work with screens

[SCREENSHOT: flows-builder-screen-pager — The screen preview with the previous and next arrows on each side, the Add screen and Delete screen buttons at the top right, and “Screen 1 of 2” under the screen title]

• Move between screens with the round Previous screen and Next screen arrows on either side of the preview. The title area of the screen shows Screen 1 of 2 (your position).
• Add screen — the green + button above the preview adds a new screen at the end. New screens are named Screen 2, Screen 3, and so on. A flow can have up to 100 screens (“WhatsApp allows up to 100 screens in one flow.”).
• Delete screen — the red trash button next to + removes the current screen. It appears only when the flow has more than one screen. There is no confirmation, and you can’t delete the only screen.
• Reorder screens — click the ⋮ menu at the right of the screen’s header and choose Move screen left or Move screen right.
• Edit the screen — click the screen’s title (or the X at its left) to open Screen settings.

The last screen is the final screen. Its button submits the flow. Every other screen’s button moves on to the next screen. The builder keeps this in order automatically when you add, delete, or reorder screens — the button’s label switches between Next and Submit to match if you haven’t changed it.

​

Screen settings

Click the screen header to open Screen settings (“One page of the flow. Select an element in the preview to edit it.”). [SCREENSHOT: flows-builder-screen-settings — The Screen settings panel with Screen title, the Final screen / Middle screen card, and the Advanced section]

​

The Button

Every screen has a green button at the bottom of the preview. Click it to edit it. If the screen has none yet, one is created. The settings are: If a screen has no button when you save, one is added for you (Next on a middle screen, Submit on the final screen).

​

Preview, name, and JSON

The top of the middle column shows the flow’s name (Untitled flow if it has none), how many screens it has (for example 2 screens), and, once it has fields to map, how many answers are mapped (for example 1 of 3 answers mapped). To preview the flow in WhatsApp itself, go back to the Flows list and click Preview on the row. Click JSON at the top right to switch the canvas to the flow’s JSON — the exact flow that will be sent to WhatsApp when you save. Click JSON again to return to the screen view. The JSON view is read-only. [SCREENSHOT: flows-builder-json-view — The canvas switched to the JSON view with the JSON button highlighted]

​

Map answers to custom fields

Every element that collects an answer has a Response tagging section at the bottom of its settings with a Map to custom field picker. Choose the contact custom field the answer should be saved into, or No mapping. Use the refresh control in the picker to reload your custom fields after creating a new one. [SCREENSHOT: flows-builder-component-settings — The settings panel for a Short answer element showing Label, Field name, Required, Input type, Min chars, Max chars, Validation pattern, Helper text, and the Response tagging section] Elements you can map: Short answer, Paragraph, Date picker, Calendar, Single choice, Multiple choice, Dropdown, Chips, Navigation list, Opt-in, and Upload.

​

Save the flow

Click Save at the bottom of the right-hand panel. The button shows Saving… while it works.

1. The builder first checks the flow against WhatsApp’s rules. If anything is wrong, a Could not save message appears listing the first three problems. Fix them and click Save again to see any remaining ones.
2. If the checks pass, the flow is sent to WhatsApp, which runs its own validation. A Flow Saved message confirms it and you return to the Flows list after a moment. If WhatsApp rejects it, a Save Failed message shows WhatsApp’s explanation.

The X in the right-hand panel header closes the builder and returns to the Flows list. There is no “unsaved changes” prompt, so click Save first if you want to keep your work.

​

Locked published flows

When a flow is PUBLISHED, the builder opens with a Structure locked badge at the top (hover it: “Published flow structure is locked. You can still map fields in this view.”). You can still look around, move between screens, and select elements, but you can’t add, move, delete, or change content, screens, or settings. [SCREENSHOT: flows-builder-locked — The builder for a published flow with the Structure locked badge and a Save mapping button] What you can still do is change Map to custom field for each answer, then click Save mapping. To change the screens themselves, go to the Flows list and use Clone to make a draft copy, edit the copy, then publish it.

​

Troubleshooting / Technical Notes

After you click Save, the Could not save message lists up to three problems at a time. Messages start with the screen, for example Screen "Contact details" (screen): ..., and sometimes the element’s label or text. Some messages use WhatsApp’s technical names for settings: helper-text is Helper text, min-chars and max-chars are Min chars and Max chars, max-length is Max length, error-message is Error message, and src is the image.

• “Component limit reached.” The screen has 50 components. Remove some or put them on another screen.
• “Media upload limit reached.” “Only one media upload component is allowed per screen.” Use a separate screen for each Upload.
• “Could not save” appears but I fixed everything. Only the first three problems are shown at once. Save again to reveal the next ones.
• A save fails with WhatsApp’s own message. The Save Failed message includes WhatsApp’s error text, and where available the line and column in the flow. Fix the element it names and save again.
• “This flow is published and its screens can no longer be changed.” Create a new version: on the Flows list, Clone the flow, edit the copy, and publish it. The published flow keeps working unchanged.
• The preview shows “Image” or “This screen is empty”. An Image with no picture shows an Image placeholder; an empty screen says “This screen is empty — Add content from the list on the left, or drag it here.”
• “No active channel found.” The builder needs an active WhatsApp channel. “Please select a channel to use Flow Builder.”

​

Related docs

• Flows
• Flow content and settings
• Logic: If and Switch
• Dynamic options and endpoints
• Custom Fields
• Send messages (Send Flow)