Platform
Chatbot Builder Bulk Messaging Team Inbox Mini CRM API & Webhooks AI Integration WhatsApp Flows
Industries
E-commerce & D2C Real Estate Education Healthcare Finance & BFSI Logistics Hospitality Retail
Integrations
Learn
Learning Hub Help & Docs Connect Guides Automation Codex Blog Message Templates
Pricing Get Started →
HomeHelp & DocsMini Apps › Create a dynamic dropdown in a Mini App using an API
Mini Apps

Create a dynamic dropdown in a Mini App using an API

A dynamic dropdown fetches its options from an external API in real time, instead of showing a hardcoded list. Use it for available appointment slots, in-stock products, or any list that changes over time.

Critical limitation: not on the first screen

API calls cannot be executed on the first screen of a Mini App. If your dynamic dropdown needs to appear early, add a simple first screen with just a button, and put the actual API call and dropdown on the second screen.

Step 1: Create the Mini App and navigation screen

1
Go to WhatsApp Mini App and click Create New, add a category, and create the workflow.
2
On the first screen, add a footer button. Set its action to Data Exchange → New Screen so it navigates to your second screen.

Step 2: Call the API on the second screen

1
On the second screen, go to Data Source → Add New Data Source.
2
Enter your API URL, choose the method (GET/POST), and the body type as required by your API.
3
Click Run & Save. This fetches a sample response so you can map fields against real data.
1
Add a Dropdown component and open its Settings.
2
Set the label (e.g., "Options"), set Data Source Type to Dynamic, and select the API you just added as the data source.
3
Set the Dynamic Data Accessor to the main array in your API response.

Step 4: Map the dropdown fields

From your API response, map:

ID Field — a unique identifier (e.g., id).
Title Field — the display value shown to the customer (e.g., label).
Image Field — optional, can be skipped.
Map from the first object in the array

Always map your fields from the first object of the response array — this is what the mapping UI uses as its reference.

Step 5: Add submission and test

1
Add another footer button with action Data Exchange → New Submission to submit the selected value.
2
Click Save & Apply.
3
Test the flow to confirm the API data loads, the dropdown shows live options, and selection works correctly.

Was this helpful? If you are stuck, message us on WhatsApp and a real person will help.

Ask us on WhatsApp
Related guides
1