> For the complete documentation index, see [llms.txt](https://docs.ownchat.app/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.ownchat.app/whatsapp-channel/flow-builder.md).

# Flow builder

### **Feature Overview**

**Flow Builder** is the visual screen-building engine inside Ownchat that allows you to design structured, multi-step WhatsApp flows.

It enables you to:

* Create interactive screens
* Collect user inputs
* Display structured content
* Apply conditions and navigation logic
* Publish flows directly to WhatsApp

Flow Builder is used to create onboarding flows, lead capture forms, product selections, surveys, and automated user journeys.

{% embed url="<https://app.supademo.com/demo/cmlklejzl0h7v5yi3rw9ry9oc?utm_source=link>" %}

### Prerequisites &#x20;

Before using Flow Builder:

* Admin or Owner access is required in the Ownchat workspace.
* WhatsApp number connected to Ownchat
* Required user permissions to create and publish flows

No additional integrations are required unless using API-powered flows.

#### How to Access the Feature &#x20;

**Navigation Path:**

{% embed url="<https://app.supademo.com/demo/cmo9jmr0a00v7v50jsu47a137?utm_source=link>" %}

Dashboard → Automation → Flow Builder

#### Interface Overview &#x20;

Flow Builder consists of:

**Top Tabs**&#x20;

{% embed url="<https://app.supademo.com/demo/cmo9juwce00vlv50j87c3p87x?utm_source=link>" %}

* **Screens** – Manage multiple screens in a flow
* **Components** – Add UI elements
* **Variables** – Store user inputs (name, phone, email, etc.)

**Left Panel – Components** &#x20;

{% embed url="<https://app.supademo.com/demo/cmo9jz6l700vnv50jm6vj0lus?utm_source=link>" %}

Contains all UI elements you can add:

* Text Components
* Input Components
* Selection Components

Components can be dragged and dropped into a screen.

**Middle Section – Live Preview** &#x20;

{% embed url="<https://app.supademo.com/demo/cmo9k196w00pbz40jhce7inxy?utm_source=link>" %}

Displays real-time mobile preview of the screen.

Example preview:

* Screen Title: First Screen
* Heading: Welcome To Ownchat flows
* Body: Let’s start building flows 😊
* Footer Button: Submit

You can toggle **Live Preview** to see changes instantly.

**Right Panel – Screen Structure**&#x20;

{% embed url="<https://app.supademo.com/demo/cmo9k6lfr00pfz40j2usxgtkp?utm_source=link>" %}

Displays components added to the selected screen.

For each component:

* Edit
* Delete
* Duplicate
* Drag to reorder

**Top Right Actions**&#x20;

* **Test Flow** – Test flow in WhatsApp
* **Build Flow** – Save & publish
* **Add New Screen** – Create additional screens

#### Step-by-Step Setup Guide &#x20;

**Create a New Flow** &#x20;

Step 1: Click **Create Flow**

{% embed url="<https://app.supademo.com/demo/cmo9m3zjp00prxv0j2f5x2r86?utm_source=link>" %}

\
Step 2: Enter **Flow Name**

{% embed url="<https://app.supademo.com/demo/cmo9m5kgy010bv50jpues9tzu?utm_source=link>" %}

\
Step 3: Select **Category**\
Step 4: Choose **Version**\
Step 5: Enable **API Powered** (if required)\
Step 6: Click **Create**

{% embed url="<https://app.supademo.com/demo/cmo9m9ge000q9xv0jt2nis8mt?utm_source=link>" %}

#### Build Your First Screen &#x20;

Step 1: Add a **Text Heading**\
Step 2: Add **Sub Heading**\
Step 3: Add required input or selection components\
Step 4: Add **Footer**\
Step 5: Configure actions in Footer\
Step 6: Click **Build Flow**

#### Key Settings Explained &#x20;

**Flow Configuration** &#x20;

Flow Configuration defines the basic setup details required to create and manage a flow.\
These settings help organize, identify, and control how the flow functions.

**Flow Name** &#x20;

Flow Name is the internal identifier of the flow within Ownchat.\
It helps admins easily locate and manage the flow.

**Category** &#x20;

Category is used to group and organize flows systematically.\
It helps maintain structured flow management within the system.

**Version** &#x20;

Version is used to track updates and revisions of a flow.\
It ensures proper control when modifying or republishing flows.

**API Powered Option** &#x20;

API Powered enables backend integration for dynamic data handling.\
Activate this option when the flow requires external system connectivity.

**Search Flow**&#x20;

**Overview:**\
Search helps quickly locate existing flows.

**Status of Search Flow:**\
Indicates whether the flow is:

* Draft
* Published
* Disabled

### Screen Structure Layout &#x20;

**Left Panel – Components** &#x20;

* Drag and drop UI elements
* Organized by type

**Middle Canvas – Preview** &#x20;

* Live mobile view
* Shows how users will see the screen
* Toggle Live Preview for real-time updates

**Right Configuration Panel** &#x20;

* Displays components inside the selected screen
* Edit, delete, duplicate
* Reorder components

⚠️ **Important Rule**

If you use **Rich Text**, only:

* Rich Text
* Footer

are allowed on that screen.

No other components can be added.