This guide explains how to create a dynamic dropdown field in a Mini App by fetching options from an external API.
Overview
Dynamic dropdowns allow you to:
- Fetch real-time data from an API
- Populate dropdown options dynamically
- Avoid hardcoding values in the form
1. Important Limitation
API calls cannot be executed on the first screen of a Mini App.
To handle this:
- Use an initial screen with a button
- Navigate to a second screen where the API is called
2. Step-by-Step Setup
Step 1: Create Mini App Workflow
- Go to WhatsApp Mini App
- Click on Create New
- Add category and create workflow
Step 2: Add First Screen (Navigation Layer)
- Add a Footer Button
- Set action as Data Exchange
- Select New Screen
This button will navigate users to the screen where API is triggered.
Step 3: Call External API
On the second screen:
- Go to Data Source
- Click on Add New Data Source
- Enter your API URL
- Select:
- Method: As required (GET/POST)
- Body Type: Form Data / None (as per API)
- Click Run & Save
This step fetches sample (dummy) API response for mapping
3. Configure Dynamic Dropdown
- Add a Dropdown Component
- Open Settings
- Update:
- Label → e.g., “Options”
- Data Source Type → Dynamic
- Data Source → Select your API
- Dynamic Data Accessor → Select main response array
4. Map Dropdown Fields
From API response:
- ID Field → Unique identifier (e.g.,
id) - Title Field → Display value (e.g.,
label) - Image Field → Optional (can skip)
Always map fields from the first object of the response array
5. Submit Action
- Add another Footer Button
- Set action as Data Exchange → New Submission
This will submit the selected dropdown value.
6. Final Steps
- Click Save & Apply
- Test the flow to ensure:
- API data loads correctly
- Dropdown shows dynamic options
- Selection works as expected
This will enable a dynamic dropdown field in your WhatsApp Mini App that fetches its options live from any configured external API, ensuring users get up-to-date choices every time they use the flow.