> ## Documentation Index
> Fetch the complete documentation index at: https://help.wotnot.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Dynamic data 

> Dynamically renders a list of options from an API response.

![Image](https://mintcdn.com/wotnot/9dFb9jDqAX6_tYFX/images/image-305.png?fit=max\&auto=format\&n=9dFb9jDqAX6_tYFX\&q=85\&s=0cf7b628baf8291aa4063991c7e82ac1)

Dynamically renders content from an API response stored in a variable.

Use Dynamic data when the content or options are not known in advance and need to be fetched at runtime, such as available appointment slots, order history, branch locations, live inventory, or product lists.

> [!NOTE]
>
> Available on the **Premium** plan and above.

Dynamic data can generate:

Using this block, you can dynamically display list items for,

* Button
* Carousel
* Option (WhatsApp and SMS)
* List (WhatsApp)
* Reply button (WhatsApp)
* File

Use [Options](https://help.wotnot.io/build/blocks/options.md) or [List](https://help.wotnot.io/build/blocks/list.md) when you define the choices yourself. Use [HTTP request](https://help.wotnot.io/build/integrations/http-request-api.md) when you need to retrieve API data without rendering it as dynamic content.

> [!NOTE]
>
> Dynamic data renders the generated content according to the capabilities of the channel. On supported channels, users see the configured interactive component.

## Using the Dynamic data block

**1. Fetch the data**

Use the [HTTP request](https://app.mintlify.com/wotnot/wotnot/~/HTTP-request-API-fb67b5fe-3f8f-4cdb-bcbb-c145e508f6cd) action block to call your API.

Configure the request with the endpoint, authentication, headers, query parameters, or request body required by your API.

**2. Store the response**

Store the **complete API response** in a variable.

For example:

```text theme={null}
response
```

> [!NOTE]
>
> Make sure you store the entire payload response in the variable. Do not append an object path after the response when mapping it to the variable.

**3. Configure Dynamic data**

Add the **Dynamic data** action block after the HTTP request block and connect it to the next step.

Select the response variable in **Data variable**, then select how you want to render the response using **Render as**.

## HTTP request configuration

Before configuring Dynamic data, configure the HTTP request that retrieves the data.

| Setting | Description |
| - | - |
| **Endpoint** | Enter the API URL and select the HTTP method required by the API. |
| **Headers and authentication** | Add the headers and authentication credentials required by the API. |
| **Request body** | Add the request body when required by the API. You can include variables from the conversation. |
| **Query parameters** | Add query parameters required by the API. You can include variables from the conversation. |
| **Response variable** | Store the complete API response in a variable that can be selected in Dynamic data. |

For example:

```text theme={null}
GET https://api.example.com/appointments?date={{appointment_date}}
```

For a POST request:

```json theme={null}
{
  "customer_id": "{{customer_id}}",
  "date": "{{appointment_date}}"
}
```

> [!NOTE]
>
> Dynamic data does not make the API request itself. The HTTP request block retrieves the data, and Dynamic data uses the response stored in the selected variable.

## Configuration

### Data variable

Select the variable containing the complete API response.

For example:

```text theme={null}
response
```

### Render as

Choose the type of content that Dynamic data should generate.

| Render as | Channel | Use it for |
| - | - | - |
| **Button** | Web, Instagram, Facebook, API | Dynamic buttons that branch the conversation or open a URL. |
| **Carousel** | Web, Instagram, Facebook, API | Dynamic cards with content and actions. |
| **Option** | WhatsApp, SMS | Dynamic selectable options. |
| **List** | WhatsApp, API | Dynamic list items. |
| **Reply button** | WhatsApp, API | Dynamic reply buttons. |
| **File** | Web, WhatsApp, Instagram, Facebook, API | Dynamic files returned by the API. |

### Bot asks this question

Enter the question or message displayed before the dynamic content.

For example:

```text theme={null}
Which product would you like to select?
```

You can reference variables in the question by typing `#`.

### Response mapping

Map the fields from the API response to the fields required by the selected render type.

For example, for a Button:

* **Button title** — the text displayed to the user.
* **Button payload** — the value associated with the selected button.

For example:

```text theme={null}
Button title:
data.products[*].name

Button payload:
data.products[*].id
```

### Array path

The array path identifies where the list of items is located in the response.

For example:

```json theme={null}
{
  "data": {
    "products": [
      {
        "id": "P-101",
        "name": "Premium Plan"
      }
    ]
  }
}
```

The array path is:

```text theme={null}
data.products
```

The fields inside each item can then be mapped using:

```text theme={null}
data.products[*].name
data.products[*].id
```

> [!NOTE]
>
> Use `[*]` when you want to retrieve a field from every item in an array.

### Empty response handling

Handle cases where the API request succeeds but does not return any items.

For example:

```text theme={null}
No products are currently available.
```

Use a clear message or connect the empty-response path to an alternative flow.

### Save response

Select the variable where the user's selected response should be stored.

### Save button payload response

Select a variable to save the **button payload** when the user selects an item.

The button payload is a value you define for each item. It can be different from the text displayed on the button and can be used later in a **Condition** block to determine which path the user should follow.

For example:

```text theme={null}
Button title:
View Cart

Button payload:
cart
```

You can use the payload later when an internal ID or another value is required by a subsequent API request.

## Configuring list items

After selecting the render type, map the object paths from the API response to the fields required by that render type.

For example, if the payload response stored in the variable is:

```json theme={null}
[
  {
    "product_id": "123",
    "status": "pending"
  },
  {
    "product_id": "456",
    "status": "delivered"
  },
  {
    "product_id": "798",
    "status": "pending"
  }
]
```

To render `product_id` as a button, use:

```text theme={null}
[*].product_id
```

The `[*]` indicates that the field should be retrieved from every item in the array.

The resulting buttons are:

```text theme={null}
123
456
798
```

If the response is wrapped inside a `result` object:

```json theme={null}
{
  "result": [
    {
      "product_id": "123"
    },
    {
      "product_id": "456"
    }
  ]
}
```

the object path becomes:

```text theme={null}
result[*].product_id
```

## Nested JSON

Nested JSON is one of the most common areas where object-path mapping can become confusing.

When the field you need is nested inside multiple objects, include every level of the response in the object path.

For example:

```json theme={null}
{
  "result": {
    "locations": {
      "available": [
        {
          "branch": {
            "id": "BR-101",
            "name": "Ahmedabad"
          }
        },
        {
          "branch": {
            "id": "BR-102",
            "name": "Mumbai"
          }
        }
      ]
    }
  }
}
```

> [tab] 1. Find the array
>
> The list of items is inside:
>
> ```text theme={null}
> result.locations.available
> ```
>
> Use this as the array path.

> [tab] 2. Find the label
>
> The branch name is inside `branch`, which is inside each item.
>
> Use:
>
> ```text theme={null}
> result.locations.available[*].branch.name
> ```

> [tab] 3. Find the value
>
> The branch ID is:
>
> ```text theme={null}
> result.locations.available[*].branch.id
> ```

> [tab] 4. Result
>
> The user sees:
>
> ```text theme={null}
> Ahmedabad
> Mumbai
> ```
>
> The corresponding values are:
>
> ```text theme={null}
> BR-101
> BR-102
> ```

> [!NOTE]
>
> When mapping nested JSON, start from the root of the stored response and follow each level until you reach the field you need. Add `[*]` at the array level.

## Output paths

Use the output paths to handle the different results of the Dynamic data request.

| Output path | When it runs |
| - | - |
| **Items returned** | The API returns one or more items that can be rendered. |
| **Empty response** | The API request succeeds but no items are returned. |
| **Request failed** | The API request fails or the response cannot be processed. |

Connect each path to the appropriate next block in your flow.

> [!NOTE]
>
> Add an alternative message or flow for empty responses and failed requests so the conversation does not stop unexpectedly.

## Variables set

Dynamic data can save the user's selected response and, where applicable, the selected button payload.

For example:

```text theme={null}
Button title:
Ahmedabad Branch

Button payload:
BR-101
```

Save the selected response as:

```text theme={null}
selected_branch = Ahmedabad Branch
```

and the payload separately as:

```text theme={null}
selected_branch_id = BR-101
```

These variables can be used in subsequent blocks, conditions, or API requests.

## Common mistakes

> [accordion] The complete API response was not stored
>
> Make sure the HTTP request stores the **complete API response** in the Data variable.
>
> If only part of the response is stored, Dynamic data may not be able to access the fields you need.

> [accordion] Using the wrong object path
>
> Include every level of the JSON structure.
>
> ```text theme={null}
> Correct:
> data.products[*].name
>
> Incorrect:
> products[*].name
> ```

> [accordion] Missing \[\*]
>
> Use `[*]` when mapping a field from every item in an array.
>
> ```text theme={null}
> data.products[*].id
> ```

> [accordion] Using result when the response is already an array
>
> If the stored response is:
>
> ```json theme={null}
> [
>   {
>     "product_id": "123"
>   },
>   {
>     "product_id": "456"
>   }
> ]
> ```
>
> the correct path is:
>
> ```text theme={null}
> [*].product_id
> ```
>
> not:
>
> ```text theme={null}
> result[*].product_id
> ```
>
> Use `result[*].product_id` only when the response actually contains a `result` array.

> [accordion] Skipping a level in nested JSON
>
> If the response contains:
>
> ```text theme={null}
> data.products[*].details.name
> ```
>
> do not use:
>
> ```text theme={null}
> data.products[*].name
> ```
>
> Include every level between the array and the field you want.

### Advanced settings

> [accordion] Enable search
>
> Enable this option to let users search through the dynamically generated items.
>
> Use it when the API returns a large number of items and users need an easier way to find a specific item.

> [accordion] Enable multi-select
>
> Enable this option to allow users to select multiple items from the dynamically generated options.
>
> Use it when the user needs to choose more than one item.

> [accordion] Enable free text
>
> Enable this option to allow users to enter a text response instead of selecting one of the dynamically generated options.

> [accordion] Buttons layout
>
> Choose how dynamically generated buttons are arranged:
>
> * **Horizontal** — displays buttons next to each other.
> * **Vertical** — displays buttons one below another.

> [accordion] Buttons sorting
>
> Choose the order in which dynamically generated buttons are displayed:
>
> * **A–Z** — sorts buttons alphabetically from A to Z.
>
> * **Z–A** — sorts buttons alphabetically from Z to A.
>
> * **Random** — displays buttons in a random order.
>
> * **As defined** — keeps the same order as the items returned by the API.
>
> > [!NOTE]
> >
> > Select **As defined** when the order returned by your API is important and should be preserved.

> [accordion] Add an info message
>
> Enable this option to display an informational message with additional context for the dynamically generated content.
>
> Use it when users need additional instructions or context before making a selection.

> [accordion] Track link clicks on this message
>
> Enable this option to track clicks on links included in the info message.
>
> Use it when you want to measure engagement with links displayed in the message.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.