Dynamic WhatsApp Flows allow data to be exchanged in real time between Sprinklr and the WhatsApp Flow hosted in Meta Business Suite. This capability enables Flow screens to display dynamic content such as product catalogs, categories, user-specific information, validation messages, and other data generated during runtime.

To achieve this, the Flow JSON must define the expected data structure, and the corresponding Dialogue Tree must return data in the same format using the GUIDED_WORKFLOW_RESPONSE system field. This article explains how to define data structures within the Flow JSON, bind dynamic data to Flow components, and return runtime data from Sprinklr to WhatsApp Flow screens.

How Dynamic Data Exchange Works

The dynamic data exchange process consists of three key steps:

1. Define the expected data structure within the Flow JSON.

2. Bind Flow components to the defined data object.

3. Return data from the Dialogue Tree using GUIDED_WORKFLOW_RESPONSE.

When a screen is loaded, the Dialogue Tree sends a response payload to Meta. The Flow then maps the returned values to the corresponding components on the target screen.

Defining Data Structures in the Flow JSON

Before data can be sent from Sprinklr, the receiving screen must define the structure of the expected payload within the Flow JSON.

Example

"data": {  "categoryList": {    "type": "array",    "items": {      "type": "object",      "properties": {        "id": {          "type": "string"        },        "title": {          "type": "string"        }      }    },    "__example__": [      {        "id": "1",        "title": "Product1"      },      {        "id": "2",        "title": "Product2"      }    ]  }}

In this example:

• categoryList is the data object expected by the screen.

• The object contains an array of records.

• Each record contains:

• id

• title

The structure defined here acts as the contract between Sprinklr and the WhatsApp Flow. Any payload returned from Sprinklr must follow the same structure.

Why Defining the Data Structure is Important

The Flow validates incoming payloads against the data schema defined within the JSON. If the payload structure returned by Sprinklr does not match the expected structure:

• Components may fail to render.

• Dynamic data may not populate correctly.

• Runtime errors may occur within the Flow.

For this reason, the keys and object hierarchy returned from Sprinklr must always match the schema defined in the Flow asset.

Binding Dynamic Data to Flow Components

Once the data structure has been defined, Flow components can consume the data using the data-source property.

Syntax

"data-source": "${data.field_name}"

Where

• field_name refers to the data object defined in the JSON schema.

• data references the Flow's dynamic payload.

Example: Dynamic Dropdown

Suppose the Flow contains a dropdown that should display a list of products received from Sprinklr.

Configuration:

{  "type": "Dropdown",  "name": "ProductList",  "label": "Select Product",  "required": true,  "data-source": "${data.categoryList}"}

In this example:

• The dropdown is bound to categoryList.

• The values displayed in the dropdown are populated dynamically using data returned from Sprinklr.

• No hardcoded options are required within the Flow.

Sending Data from Sprinklr to WhatsApp Flow Screens

Dynamic data is returned through the Dialogue Tree responsible for handling Flow navigation. Navigate to the secondary Conversational AI application that contains the Flow implementation and screen navigation logic. Within the Dialogue Tree, identify the screen transition where data needs to be sent.

For example:

• Current Screen: THIRD_SCREEN

• Destination Screen: FOURTH_SCREEN

Before navigating to FOURTH_SCREEN, configure an Update Properties node.

Step 1: Configure GUIDED_WORKFLOW_NEXT_SCREEN

Set the next screen that should be displayed.

Example:

return "FOURTH_SCREEN"

This value should be assigned to: GUIDED_WORKFLOW_NEXT_SCREEN. When returned, WhatsApp Flow navigates to the specified screen.

Step 2: Configure GUIDED_WORKFLOW_RESPONSE

The dynamic payload must be returned through: GUIDED_WORKFLOW_RESPONSE. The response should be a Groovy map whose keys exactly match the data objects defined within the Flow JSON.

Example:

return [    categoryList: [        [            id: "1",            title: "Product 1"        ],        [            id: "2",            title: "Product 2"        ],        [            id: "3",            title: "Product 3"        ]    ]]

In this example:

• categoryList matches the data object defined in the Flow JSON.

• Each item contains the required id and title fields.

• The returned structure aligns with the schema expected by the destination screen.

Data Mapping Flow

The complete flow of data exchange is as follows:

1. User performs an action on the current screen.

2. The Flow invokes the qualifying bot.

3. The Dialogue Tree processes the request.

4. GUIDED_WORKFLOW_NEXT_SCREEN determines the destination screen.

5. GUIDED_WORKFLOW_RESPONSE returns the required payload.

6. Meta validates the payload against the Flow JSON schema.

7. Components using data-source consume the returned data.

8. The target screen renders with dynamically populated content.