# 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.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.ownchat.app/whatsapp-channel/flow-builder.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.