Create and Design Dynamic WhatsApp Flows in Meta

Updated 

WhatsApp Flows enable businesses to create interactive, multi-step user experiences directly within WhatsApp. Flows can be used for use cases such as lead capture, appointment booking, surveys, product selection, and other guided customer journeys.

This article explains how to create and design a WhatsApp Flow in Meta before integrating it with Sprinklr.

Create a WhatsApp Flow

1. Log in to Meta Business Manager and navigate to the Flows section in the left pane.

2. Click Create Flow in the top right corner.

3. On the Create flow page, enter the required Flow details:

  • Flow Name

  • Category

  • Other mandatory flow configurations

4. Click Create in the bottom right corner.

You will be taken to the Editor window, where you can add the required screens and components.

5. Save the flow configuration.

6. Open the Flow JSON and confirm the version is set to:

"version": "7.3"

This version is required for compatibility with supported WhatsApp Flow functionality.

Designing the Flow

You can design the flow using either of the following methods:

  • Use the Meta Playground UI Editor

  • Build directly in Flow JSON

Option 1: Use the Meta Playground UI Editor

1. Open the Meta Developer Playground.

2. Create each screen using the available UI components.

3. Configure the required fields, buttons, forms, and layouts by clicking + Add content and adding the required components.

The JSON will be generated in the Playground.

4. Click Copy Flow JSON to copy the generated code into the Flow Builder in Meta Business Suite.

5. Open the Editor screen in the WhatsApp Manager and paste the code.

6. Click Save to add the flow to the drafts and click Publish to publish the final flow.

Note: The generated JSON provides the visual structure and layout of the flow. Additional modifications may be required when integrating the flow with Sprinklr.

Option 2: Build Directly in Flow JSON

You can also edit the Flow JSON directly in Meta Business Suite using the available component definitions and JSON examples. This approach is typically used for advanced flows that require custom navigation logic or dynamic behavior.

1. Open the Meta Developer Playground.

2. In the left pane, expand Guides, then click Components.

3. Click the desired flow components on the screen.

You will be redirected to the component JSON flow, which can be further customized as per the use case.

Dynamic Flow Actions

WhatsApp Flows support multiple actions that determine how users move through the flow.

Navigate Action

The navigate action moves the user from one screen to another without calling any external endpoint. Use this when the next screen depends on user selections already available within the flow.

Use Cases

  • Multi-step forms

  • Conditional screen navigation

  • Collecting user preferences

  • Internal flow branching

Example

"on-select-action": {  "name": "navigate",  "next": {    "type": "screen",    "name": "NEXT_SCREEN"  },  "payload": {    "name": "${form.first_name}",    "lang": "${form.favourite_language}"  }}

Data Exchange Action

The data_exchange action sends information to an external endpoint and retrieves data before loading the next screen.

​

Use Cases

  • Dynamic product recommendations

  • Customer validation

  • Inventory checks

  • External API integrations

  • Real-time data retrieval

Example

"on-select-action": {  "name": "data_exchange",  "payload": {    "discount_code": "${data.discount_code}",    "items": "${form.selected_items}"  }}

Complete Action

The complete action is used on the terminal screen to end the flow. A terminal screen is the final screen from which no further navigation exists.

Use Cases

  • Form submission

  • Survey completion

  • Order confirmation

  • Lead capture completion

​

Example

{  "type": "Footer",  "label": "Submit Data",  "on-click-action": {    "name": "complete",    "payload": {      "name": "${form.first_name}"    }  }}

Best Practices

  • Use meaningful screen names for easier maintenance.

  • Keep flow navigation simple and intuitive.

  • Use navigate wherever possible to reduce unnecessary API calls.

  • Use data_exchange only when external data is required.

  • Ensure all flow paths eventually end with a complete action.