Creating a Dynamic Dropdown Using API in Mini App

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:

1. Go to Data Source

2. Click on Add New Data Source

3. Enter your API URL

4. Select:

   • Method: As required (GET/POST)

   • Body Type: Form Data / None (as per API)

5. Click Run & Save

This step fetches sample (dummy) API response for mapping

3. Configure Dynamic Dropdown

1. Add a Dropdown Component

2. Open Settings

3. 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.​