When a customer submits a WhatsApp Flow, WhatsApp returns the submitted values as a JSON payload. Inside a Dialogue Tree, you can capture the Flow response, validate it, parse the JSON payload, and extract individual component values for further processing.

Understand the WhatsApp Flow Response

After a customer submits a WhatsApp Flow:

• A response message is sent to the WhatsApp chat.

• The response is received through a message webhook.

• The payload is received in JSON format.

Flow Response Format

The response contains flow-specific data in key-value format.

Example structure:

{  "flow_token": "value",  "UNIQUE_KEY_1:COMPONENT_REFERENCE_NAME": "value1",  "UNIQUE_KEY_2:COMPONENT_REFERENCE_NAME": "value2",  "UNIQUE_KEY_3:COMPONENT_REFERENCE_NAME": "value3"}

Key-Value Pair Structure

Each response entry follows the following format:

UNIQUE_IDENTIFIER:COMPONENT_REFERENCE_NAME = VALUE_RECEIVED

The structure contains:

WhatsApp Flow Response Processing High-Level Steps

When a customer submits a WhatsApp Flow, the response passes through several stages before the submitted values become available for processing inside a Dialogue Tree.

1. Capture User Responses: Configure a User Replies node to capture the WhatsApp Flow submission and store the response in a parameter. This node acts as the entry point for Flow responses received from WhatsApp.

2. Convert the Response into a Single Variable: Flow responses are initially received in array format. Use an Update Properties node and custom Groovy code to extract the response from the array and store it in a single variable for further processing.

3. Validate the Response Type: Use a Decision Box node to determine whether the incoming response is a WhatsApp Flow submission or a regular text message. This allows different processing paths to be configured for each response type.

4. Parse the Flow Response JSON: Use an Update Properties node to convert the Flow response JSON string into a map. Parsing the response makes all submitted values available in a structured format for retrieval and manipulation.

5. Extract Individual Component Values: Use an Update Properties node and custom Groovy code to retrieve the values submitted for specific Flow components by using their component reference names.

Step 1: Capture User Responses

1. Add a User Replies node after the Bot Reply node while sending the flow assets.

This node captures user responses received from the WhatsApp Flow.

2. On the Customer Says window, give a Name to the node and select Match only Entity.

3. Under Capture Entity filters, select the relevant entity and under Save Entity as parameter, enter a variable that stores the entity value.

4. Click Save.

At this stage, the complete Flow response is stored in a parameter for further processing.

Step 2: Convert the Response into a Single Variable

The response is initially stored in array format. To store it in a single variable:

1. Add an Update Properties node to retrieve the user response from the User Reply node.

2. On the Update Properties window, give a Name to the node.

3. Under Select/Create Fields to update their values, store the response in a single variable for further processing and Set it to Custom Code.

4. On the Enter Custom Code window, add the following Groovy and click Save in the bottom right corner.

return grabEntity.get(0);

5. Click Save on the Update Properties window.

This extracts the Flow response from the array and stores it as a single value.

Step 3: Validate the Response Type

Before processing the payload, determine whether the incoming message is:

• A WhatsApp Flow response

• A regular customer message

1. On the Dialogue Tree builder, add a Decision Box.

2. On the Add Decision Box window, give a Title.

3. Under Path Name and Conditions, give a Path Name.

4. Select the response variable created in the Convert the Response into a Single Variable section.

5. Set the Operator to Regex.

6. Enter the given string for your Regex value in your custom node.

"(\\.|[^"\\])*"

7. Click Save.

If the response matches the WhatsApp Flow response format, convert the JSON payload into a map containing all values submitted by the customer. Storing the response as a map makes it easier to manipulate the data and retrieve individual component values in later steps.

Step 4: Parse the Flow Response JSON

To parse the response:

1. Add an Update Properties node on the WhatsApp Flow path.

2. On the Update Properties window, give a Name to the node.

3. Under Select/Create Fields to update their values, store the received response in a single variable for further processing, and Set it to Custom Code.

4. On the Enter Custom Code window, add the following Groovy and click Save in the bottom right corner.

return JSON_UTILS.parseJson(nextResp); 

5. Click Save on the Update Properties window.

If the response does not match the Flow structure, route the interaction through an alternate response path.

Step 5: Extract Individual Component Values

Once the response has been converted into a map, create variables to retrieve the values submitted for individual Flow components. Each variable uses the component reference name to locate and return the corresponding value from the response map.

1. Add another Update Properties node on the Flow-processing path to extract individual component values from the parsed response map.

2. On the Update Properties window, give a Name to the node.

3. Under Select/Create Fields to update their values, store the received individual response in a separate variable for further processing, and Set it to Custom Code.

4. Create separate variables for the values you want to extract.

Example variables:

response_1response_2response_3

5. For each variable, use Groovy code similar to the following:

def resp1 = "";for (String mapKey : entireRespMap.keySet()){    if(mapKey.contains("TEXT_445")){      resp1 = entireRespMap.get(mapKey);    }}return resp1;

Each variable contains Groovy code that:

• Searches for a specific component reference name.

• Retrieves the submitted value.

• Returns an empty string if no value exists.

6. Click Save in the bottom right corner.

Groovy Code Explanation

The script performs the following operations:

• Reads the component reference name from the response map.

• Checks whether the user submitted a value for the component.

• Retrieves the corresponding value.

• Returns the value as a string.