> ## Documentation Index
> Fetch the complete documentation index at: https://chatbotx.io/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Mini Apps and WhatsApp Flows

> Build multi-screen interactive forms with Mini Apps in ChatbotX, publish to WhatsApp Flows, and share links across channels.

Mini Apps is a no-code multi-screen form builder available under the Tools section in ChatbotX. It enables businesses to design interactive customer intake forms compliant with Meta's WhatsApp Flows standard, while automatically generating a standalone public URL for omnichannel distribution across any messaging channel.

![Mini Apps Card Overview](https://mintcdn.com/chatbotx/sgWKePzfrBicoK0c/images/tools_mini_apps_card_overview.png?fit=max\&auto=format\&n=sgWKePzfrBicoK0c\&q=85\&s=848ac1c8199d79c28c6f223fd0646f72)

With Mini Apps, customers on WhatsApp complete forms directly within the native chat interface without being redirected to an external browser. For other channels such as Messenger, Instagram, or Webchat, the form functions as an optimized web app that automatically links submissions back to the contact's profile in ChatbotX.

## Managing Mini Apps

To access your forms, navigate to **Tools** in the main sidebar and select **Mini Apps**.

![Mini Apps List Dashboard](https://mintcdn.com/chatbotx/sgWKePzfrBicoK0c/images/tools_mini_apps_list_dashboard.png?fit=max\&auto=format\&n=sgWKePzfrBicoK0c\&q=85\&s=c4c2c9083a25f96721e2e7cecd58271d)

The dashboard includes:

* **Search bar:** Quickly filter forms by name.
* **+ Create button:** Start building a new Mini App.
* **Overview table:**
  * **Name:** Name of the form.
  * **WhatsApp:** Associated WhatsApp Business account, phone number, and publication status on Meta.
  * **Submissions:** Total count of completed form submissions.

Click the three-dot menu on any row to access quick actions:

![Mini App Row Action Menu](https://mintcdn.com/chatbotx/sgWKePzfrBicoK0c/images/tools_mini_apps_row_action_menu.png?fit=max\&auto=format\&n=sgWKePzfrBicoK0c\&q=85\&s=da24a25f55ea530617c068ad4ca47b5c)

* **Edit:** Open the visual builder to modify the form.
* **Copy JSON:** Copy the Meta-compliant WhatsApp Flow JSON schema for backup or reuse.
* **Copy URL:** Copy the public URL for sharing across channels.
* **Duplicate:** Create an exact copy of the form.
* **Submissions:** View all customer responses collected by this form.
* **Delete:** Permanently remove the form from your workspace.

## Designing Forms with Mini App Builder

The visual editor provides a two-tab workspace: **Edit** (visual design) and **Submissions** (collected data).

![Mini App Builder Interface](https://mintcdn.com/chatbotx/sgWKePzfrBicoK0c/images/tools_mini_apps_builder_interface.png?fit=max\&auto=format\&n=sgWKePzfrBicoK0c\&q=85\&s=b5f656cbce88553cfc73463e6ba2bdf1)

### Workspace Structure

The builder is organized into four main areas:

* **Screens navigation bar:** Located at the top, allowing you to build multi-step flows. Add new screens using **+ Add screen**, switch between steps, or reorder them.
* **Components panel:** Located on the left, organized into functional groups.
* **Mobile live preview:** Displays a real-time interactive preview of the form on a mobile device.
* **Properties inspector:** Located on the right, allowing you to configure screen titles, screen IDs, and individual component settings.

### Component Library

Mini Apps includes 24 pre-built components across 6 categories:

| Category | Component | Description and Use Cases |
| - | - | - |
| **Text** | **Heading** | Primary title for a screen or section |
| | **Subheading** | Secondary title for grouping questions |
| | **Body text** | Standard paragraph text for instructions or descriptions |
| | **Caption** | Small disclaimer, note, or terms text |
| | **Rich text** | Formatted text supporting bold, italic, and bullet lists |
| **Input** | **Text input** | Single-line input for names, phone numbers, or order IDs |
| | **Text area** | Multi-line text field for comments or detailed notes |
| | **Date picker** | Standard date selection picker |
| | **Calendar** | Full-screen interactive calendar for booking appointments |
| | **Photo upload** | Image upload directly from the device library or camera |
| | **Document upload** | File attachment upload for PDFs, agreements, or invoices |
| **Selection** | **Dropdown** | Compact dropdown menu for single selection |
| | **Single choice** | Radio selection for choosing one option among many |
| | **Multiple choice** | Checkbox list for selecting multiple options |
| | **Chips** | Tag-style chips for quick multi-tag filtering |
| | **Opt-in** | Consent checkbox for terms of service or privacy policies |
| **Media** | **Image** | Static image banner or visual illustration |
| | **Image carousel** | Horizontal scrolling carousel displaying multiple images |
| **Navigation** | **Link** | External clickable hyperlink |
| | **Navigation list** | List of items for branching to other screens |
| | **Footer button** | Persistent action button at the bottom of the screen |
| **Containers** | **Form** | Data wrapper and validation container for input fields |
| | **If / Else** | Two-branch conditional logic container based on expressions |
| | **Switch** | Multi-branch dynamic UI container based on selected values |

### Screen Configuration

Selecting a screen tab in the navigation bar reveals its properties in the right inspector:

* **Title:** Header title displayed at the top of the mobile screen.
* **Screen ID:** Uppercase alphanumeric identifier used in navigation and Flow JSON references.
* **Last screen:** Toggle on if this is the final screen of your flow. When submitted, the flow completes and records responses to your workspace.

## Building Dynamic Forms with Containers

The **Containers** category provides structural logic components that adapt your form in real time based on user answers without reloading.

### Form Container

The **Form** container serves as a required data wrapper for input fields.

Each Form container has a unique **Field key** (such as `form_1` or `customer_info`). When submitted, all answers inside this container are packaged into a structured data object.

The Form container also acts as a validation boundary. When the user taps the footer action button, ChatbotX automatically verifies that all required fields inside the Form are filled before proceeding to the next step.

### If / Else Container

The **If / Else** container shows or hides components dynamically across two branches based on whether a logical condition evaluates to true or false.

![If Else Condition Settings in Mini App Builder](https://mintcdn.com/chatbotx/sgWKePzfrBicoK0c/images/tools_mini_apps_if_else_condition_settings.png?fit=max\&auto=format\&n=sgWKePzfrBicoK0c\&q=85\&s=91dd4c524e40ec475c7b670c08a2ebda)

#### Answer References

To evaluate user input, every field in Mini Apps provides an **Answer reference** token.

![Copy Answer Reference from Input Field](https://mintcdn.com/chatbotx/sgWKePzfrBicoK0c/images/tools_mini_apps_answer_reference_opt_in.png?fit=max\&auto=format\&n=sgWKePzfrBicoK0c\&q=85\&s=b10f7180c61c09a28d7f90959d693059)

Select any question component, view the right inspector, and click the copy icon next to `${screen.[SCREEN_ID].form.[FIELD_KEY]}`.

#### Writing Conditions

In the **Condition** field of the If / Else container, enter your evaluation expression:

* **Boolean evaluation:** `${screen.REGISTER.form.opt_in_2} == true`
* **Numeric comparison:** `${form.age} >= 18`
* **Compound logic:** Combine rules using `&&` (AND) or `||` (OR). For example: `${form.age} >= 18 && ${form.agree} == true`

The container automatically renders elements placed in the **THEN** branch when the condition is met, and elements in the **ELSE** branch when it is not.

### Switch Container

While If / Else handles binary conditions, the **Switch** container is designed for branching into three or more views based on a single selected option.

#### Switch Logic Overview

The Switch container functions as an internal UI router. It reads the selected variable and renders only the matching case:

![Switch Logical Workflow Diagram](https://mintcdn.com/chatbotx/sgWKePzfrBicoK0c/images/tools_mini_apps_switch_logic_diagram.png?fit=max\&auto=format\&n=sgWKePzfrBicoK0c\&q=85\&s=6ed8b356721454eb95987dab20d67b6a)

As illustrated in the diagram:

* The user selects an option in the form.
* The Switch container evaluates the value.
* The screen renders the relevant UI: product details for Sales, troubleshooting guides for Technical support, or a partnership form for Business inquiries.

#### Configuring the Switch Container

![Switch Container Settings for Pricing Tiers](https://mintcdn.com/chatbotx/sgWKePzfrBicoK0c/images/tools_mini_apps_switch_container_settings.png?fit=max\&auto=format\&n=sgWKePzfrBicoK0c\&q=85\&s=01265cb98e66f6436343b6fe663a905d)

**1. Create the source selection component**

Add a `Single choice` or `Dropdown` component with options matching your requirements (for example: `basic`, `pro`, `vip`).

**2. Add the Switch container**

Drag a `Switch` component from the CONTAINERS group and drop it beneath your selection question.

**3. Assign the Value expression**

In the right inspector, paste the Answer reference of your question into the **Value** field (such as `${screen.WELCOME.form.plan}` or click the `${form.plan}` chip).

**4. Define your Cases**

Under **Cases**, click **+ Add case** and enter the exact values corresponding to your choices (`pro`, `vip`, `basic`).

**5. Drop components into each case**

Place specific components (Rich text feature lists, extra input fields, or unique action buttons) into each case container on the phone canvas.

## Distributing Mini Apps

Once your form is designed, you can distribute it using three flexible methods: opening directly via a button in an automated Flow, publishing natively to WhatsApp, or sharing via a public URL.

### Opening Directly via a Flow Button

You can attach a Mini App directly to any message button inside your automated Flows. When a contact taps the button during a conversation, the Mini App opens immediately without complex redirects.

**1. Open the button configuration modal**

Inside a message block in the Flow Builder, click **+ Add** (or click an existing button) to open the **Edit Button** modal. In the **Name** field, enter the label displayed on the button.

**2. Select the Open Mini App action**

Under the **When this button is pressed** action list, select the **Open Mini App** option to configure form opening behavior.

![Tools Mini Apps Button Action Open Mini App](https://mintcdn.com/chatbotx/j6fRNNuHiYaaqWhM/images/tools_mini_apps_button_action_open_mini_app.png?fit=max\&auto=format\&n=j6fRNNuHiYaaqWhM\&q=85\&s=c5b0b74d251857fcc56fb97d50cf891e)

**3. Choose your Mini App and confirm**

In the configuration card, choose the desired form from the **Mini App** dropdown menu. If you want to trigger additional automated actions (such as adding tags or updating custom fields) when the contact clicks the button, click **+ Actions** under **Additional steps**. Finally, click **Confirm** to save your button.

![Tools Mini Apps Button Select Mini App Modal](https://mintcdn.com/chatbotx/j6fRNNuHiYaaqWhM/images/tools_mini_apps_button_select_mini_app_modal.png?fit=max\&auto=format\&n=j6fRNNuHiYaaqWhM\&q=85\&s=70aec6da0c93706234b12b6589b8925e)

### Publishing to WhatsApp

This method publishes your form directly as a native Meta WhatsApp Flow.

![Publish to WhatsApp Button Location](https://mintcdn.com/chatbotx/sgWKePzfrBicoK0c/images/tools_mini_apps_publish_button_location.png?fit=max\&auto=format\&n=sgWKePzfrBicoK0c\&q=85\&s=411dcb7360b718402c77fd1c45fca452)

**1. Initiate publishing**

Click the **Publish to WhatsApp** button in the bottom right corner of the builder.

**2. Select WhatsApp Business number**

In the pop-up modal, choose your target WhatsApp Business number under **WhatsApp number** and click **Publish**.

![Publish to WhatsApp Modal](https://mintcdn.com/chatbotx/sgWKePzfrBicoK0c/images/tools_mini_apps_publish_modal_select_number.png?fit=max\&auto=format\&n=sgWKePzfrBicoK0c\&q=85\&s=ae483d2d88371c16e8cd503b10d68486)

**3. Verify on Meta WhatsApp Manager**

ChatbotX compiles your design into standard JSON and syncs it with Meta Cloud API. You can confirm the **Published** status and view the assigned Flow ID in your Meta WhatsApp Manager.

![Published Status in Meta WhatsApp Manager](https://mintcdn.com/chatbotx/sgWKePzfrBicoK0c/images/tools_mini_apps_meta_whatsapp_manager_flows.png?fit=max\&auto=format\&n=sgWKePzfrBicoK0c\&q=85\&s=dcafe1f117a2957ca84b0bb77011fab7)

Once published, you can trigger this form in any automated conversation using the **Send WhatsApp Flow** action step. For detailed flow automation setup, refer to [Create and deploy WhatsApp Flows](https://chatbotx.io/docs/channels/whatsapp/whatsapp-flows.md).

### Omnichannel Sharing via Public URL

Every Mini App includes an independent public link displayed in the bottom bar:

```
https://app.chatconnectx.com/mini-apps?id=...
```

You can copy and distribute this link anywhere:

* Inside automated bot replies on Messenger, Instagram, Webchat, or Zalo.
* In Broadcast campaigns or automated nurture Sequences.
* In direct emails, SMS messages, or social media bios.

When opened from a chatbot conversation, customer answers are automatically attributed and saved to their corresponding contact profile in ChatbotX.

## Managing Submissions

To inspect submitted answers, open the Mini App and click the **Submissions** tab at the top:

![Mini Apps Submissions Table](https://mintcdn.com/chatbotx/sgWKePzfrBicoK0c/images/tools_mini_apps_submissions_table.png?fit=max\&auto=format\&n=sgWKePzfrBicoK0c\&q=85\&s=a88970663acfae0dff924d6b6d108dad)

The table provides complete attribution details:

* **Submitted at:** Timestamp of when the form was completed.
* **Contact:** Name and phone/email of the contact, with direct links to their CRM profile.
* **Dynamic field columns:** Columns matching each field key in your form (Name, Email, Terms consent, Appointment date, Special requests...).

## Frequently Asked Questions

> [accordion] How do Mini Apps differ from standard WhatsApp Flows?
>
> Standard WhatsApp Flows require writing raw JSON or configuring templates within Meta Business Manager. Mini Apps provides a drag-and-drop builder with zero coding required, while also providing a public link that runs on any messaging channel.

> [accordion] Can answers be saved to Custom Fields automatically?
>
> Yes. In the inspector for each input component, enable Save to custom field and select the desired attribute in ChatbotX to automatically update contact records upon submission.

> [accordion] Can desktop users access Mini Apps?
>
> Yes. When accessed via the Public URL, Mini Apps renders a fully responsive web interface optimized for both desktop and mobile web browsers.

> [accordion] How do I mark the completion of a flow?
>
> In the properties of your final screen, enable the Last screen toggle. This screen must contain a footer action button that completes the submission.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.