Mini Apps and WhatsApp Flows

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.

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.

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:

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

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

Answer References

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

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:

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

Create the source selection component

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

Add the Switch container

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

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

Define your Cases

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

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.

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.

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.

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.

Publishing to WhatsApp

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

Initiate publishing

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

Select WhatsApp Business number

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

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

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

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

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.

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.

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.

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.

Getting Started

Automation

AI Agents

Contacts

Inbox

Pipelines

Remarketing

Triggers

Tools

Channels

Integrations

Managing Mini Apps