Dynamic Data

Dynamic data lets you populate flow components with content that isn't hard-coded — options that come from a payload, your server, or that reference values the customer entered on previous screens.

This page covers data sources for selection and navigation components, global references for cross-screen data flow, screen data fields, and the initial payload configuration.

---

Data sources

Selection components (Dropdown, Radio Buttons, Checkbox Group, Chips Selector) and Navigation Lists can pull their options from different data sources instead of being manually entered.

Static data source

The default option. You manually add each item directly in the flow builder.

Each item has:

Field	Description
ID	Unique identifier for the item
Title	Text shown to the customer
Description	Additional details (optional)

This is best for short, fixed lists that rarely change — like a list of departments or service categories.

📸

Screenshot: Static data source configuration showing manually entered options with ID, Title, and Description fields

static-data-source.png

1. Click on a Dropdown or Radio Buttons component
2. In the data source section, select "Static"
3. Add 3-4 options with titles and descriptions
4. Capture the configuration panel
Save to: static/img/screenshots/developer-tools/whatsapp-flows/dynamic-data/static-data-source.png

Initial Payload data source

Pull options from an array field in the initial payload — data that is sent when the flow first opens.

Setting it up:

1. Select the array field — A tree view shows all fields from the initial payload configuration. Pick the array field that contains your options.
2. Map the fields — Tell the builder which properties in each array item should be used as the ID, Title, and Description.

📸

Screenshot: Initial Payload data source configuration showing field selection tree view and field mapping

initial-payload-data-source.png

1. Select "Initial Payload" as the data source
2. Expand the payload tree to select an array field
3. Map the ID, Title, and Description fields
4. Capture the configuration showing the tree view and mapping
Save to: static/img/screenshots/developer-tools/whatsapp-flows/dynamic-data/initial-payload-data-source.png

The tree view shows the payload structure with expand/collapse controls. A preview panel shows the available fields for mapping.

This is best for data that is known at message-send time — like a customer's recent orders or a list of locations.

Screen data (API) data source

Pull options dynamically from an external API. The builder fetches data from your API endpoint and maps the response fields to the component's items.

Configuration

Field	Required	Description
API URL	Yes	Your API endpoint URL. Supports {field_name} for dynamic parameters
Method	Yes	GET or POST
Headers	No	Custom HTTP headers (key-value pairs) — useful for authentication tokens
Array Path	No	Dot-notation path to the array in the API response (e.g., data, results.items). Leave empty if the response is already an array. Auto-detected after testing.
ID Field Path	Yes	JSON path to the ID field in each item (e.g., id or data.id)
Title Field Path	Yes	JSON path to the title/display field (e.g., name or data.title)
Description Field Path	No	JSON path to the description field

Expected API response format

Your API should return either a flat array or an object containing an array:

[
  { "id": "unique_value", "title": "Display Name", "description": "Optional description" },
  { "...": "more items" }
]

Or a nested format (use the Array Path to point to the array):

{
  "data": {
    "items": [{ "id": "...", "title": "...", "description": "..." }]
  }
}

Testing the API connection

Click Test API to validate the connection before saving:

1. The builder sends a request to your API endpoint with the configured method and headers
2. On success, it shows the raw response and auto-detects the array path and field mapping
3. A mapping preview shows how the data will appear in the WhatsApp component
4. If the response format doesn't match, adjust the array path and field mappings manually

📸

Screenshot: External API data source configuration showing API URL, method, headers, test connection, array path, and field mapping

api-data-source.png

1. Select "External API" as the data source
2. Enter an API URL and configure the method
3. Test the connection to see the raw response and auto-mapping
4. Capture the full API data source configuration dialog
Save to: static/img/screenshots/developer-tools/whatsapp-flows/dynamic-data/api-data-source.png

This is best for data that needs to be fetched in real time — like available appointment slots, product inventory, or search results.

On-click actions for dynamic items

When using an API data source for a Navigation List, you can configure action templates for the dynamically loaded items. Each item inherits the same action configuration, but you can use ${item.id}, ${item.title}, and ${item.description} references in the payload to differentiate them.

---

Screen data fields

When using Smart Flow mode, each screen can define data fields — values that your server populates at runtime.

Adding data fields

In the screen configuration panel, under Screen Data, click Add Data Field to define:

Property	Description
Field name	The name used in references — e.g., greeting becomes ${data.greeting}
Type	String, Number, Boolean, Object, or Array
Example value	A sample value for preview and testing

Using data fields

Reference data fields anywhere in the screen using ${data.fieldName}:

• Text components — Display dynamic text: ${data.welcomeMessage}
• Labels and helper text — Dynamic labels: ${data.priceLabel}
• Initial values — Pre-fill inputs: ${data.customerName}
• Image URLs — Dynamic images: ${data.productImage}
• Visibility conditions — Show/hide components: ${data.showAddress}
• Selection options — Bind to ${data.serviceOptions} for dynamic lists

---

Global references

Global references let you access values from any part of the flow — the customer's form input, data fields, cross-screen values, and navigation list items.

Reference types

Reference	Syntax	Description
Form field	${form.fieldName}	A value entered by the customer on the current screen
Data field	${data.fieldName}	A data field on the current screen (from server or payload)
Cross-screen form	${screen.SCREEN_ID.form.fieldName}	A value entered by the customer on a different screen
Cross-screen data	${screen.SCREEN_ID.data.fieldName}	A data field from a different screen
Navigation list item	${item.id}, ${item.title}, ${item.description}	Properties of the tapped navigation list item

Examples

Use case	Reference
Show the customer's name from the first screen	${screen.WELCOME.form.full_name}
Pre-fill email from server data	${data.customerEmail}
Include selected service in the payload	${form.service_type}
Display a summary of the previous screen's selection	${screen.PREFERENCES.form.preferred_plan}

Where you can use references

References work in most component property fields:

• Text content — Body, Caption, Heading text
• Labels — Input labels, dropdown labels
• Initial values — Pre-fill form fields
• Helper text — Dynamic hints
• Image URLs — Dynamic image sources
• Link URLs — Dynamic embedded link destinations
• Visibility conditions — ${data.showField} in Visible when
• Enable conditions — ${form.agreeTerms} in Enabled when
• Footer payloads — ${form.email} in action payload JSON
• Navigation list payloads — ${item.id} in item action payloads

Reference picker dialog

Instead of typing references manually, use the Reference Picker dialog:

1. Click the reference icon next to any property field that accepts dynamic values
2. The dialog shows a tree view of all available references
3. Browse by source (Form, Data, Screens, Items)
4. Use the search to filter references
5. Click a reference to insert it into the field

📸

Screenshot: Global Reference Picker dialog showing a tree view of available references organized by source

reference-picker.png

1. Click the reference icon next to any dynamic property field
2. Capture the reference picker dialog showing the tree view with form fields, data fields, and screen references
Save to: static/img/screenshots/developer-tools/whatsapp-flows/dynamic-data/reference-picker.png

---

Initial payload configuration

When using Smart Flow mode, you can configure an initial payload — data that is sent with the first request when the flow opens.

Field-wise mode

Add payload fields one by one using the visual editor:

Property	Description
Field name	Name of the data field
Type	String, Number, Boolean, Object, or Array
Required	Whether the field is mandatory
Description	What this field contains
Example value	Sample value for testing and preview

You can add, remove, and reorder fields. For Object and Array types, you can define nested fields.

📸

Screenshot: Initial Payload configuration dialog showing field-wise editor with fields for customer name, email, and order list

initial-payload-config.png

1. Open the initial payload configuration dialog
2. Add several fields of different types (string, number, array)
3. Capture the dialog showing the field list with type badges
Save to: static/img/screenshots/developer-tools/whatsapp-flows/dynamic-data/initial-payload-config.png

JSON paste mode

Alternatively, paste a JSON object and the builder auto-parses it into fields:

1. Switch to JSON mode
2. Paste your JSON payload
3. The builder detects field names, types, and example values automatically
4. Review and adjust if needed

Example payload preview

The dialog shows a JSON preview of how the payload will look based on your configured fields and example values. This is the same format your server will receive.

---

Tips

• Start with Static data for simple lists, then switch to dynamic sources when you need real-time data
• Use meaningful field names — service_type is clearer than field1 in references and response data
• Test cross-screen references using the interactive preview to make sure values carry over correctly
• Configure example values in the initial payload — they make the preview more realistic and help with testing