UChat Official

Introduction

WhatsApp flows are a powerful tool to create engaging and interactive experiences for users.

They enable businesses to guide users through structured conversations, collect information, and automate responses efficiently.

However, the true potential of WhatsApp flows is unlocked when you incorporate condition-based logic, allowing dynamic content display based on user input. This feature transforms static forms into personalized, responsive interactions, significantly improving user experience.

In this summary, we explore how to implement condition-based logic directly within WhatsApp flows, using a practical example of a phone repair submission form. We will detail the setup process, including how to create dynamic input fields that appear or hide based on previous selections, all within a single screen. This approach eliminates the need for multiple screens, streamlining the user journey while maintaining interactivity.


How to Implement Condition-Based Logic in WhatsApp Flows

Overview of the Example

The example involves a phone repair submission form where users select their phone brand, and subsequent options adapt accordingly. The flow begins with a simple input for selecting the phone brand—either Android or iOS. Based on this choice, the form dynamically displays relevant device types and models, creating a tailored experience.

Key Components

Component

Description

Purpose

Welcome Screen

Initial greeting with multiple dropdowns

Collects primary user input

Dropdown 1

Select phone OS (Android or iOS)

Sets the basis for conditional logic

Dropdown 2

Select device type (Android devices or iOS devices)

Displays based on first selection

Dropdown 3

Select specific device model

Further refinement based on previous choices

Visible Field Formula

Conditional display logic

Controls visibility of dropdowns based on prior input

Step-by-Step Setup

1. Designing the Welcome Screen

  • Create a welcome screen with three dropdown inputs:

    • Dropdown 1: Name it phone_os with options: Android, iOS.

    • Dropdown 2: Name it device_type with options: Android Devices, iOS Devices.

    • Dropdown 3: Name it device_model with specific models.

2. Implementing Conditional Visibility

The core of this setup lies in the visible field formula, which determines when each dropdown appears. The formula is added to the "Visible" property of each input field.

Example Formula:

form.phone_os == "Android"
  • This formula makes the device type dropdown visible only if the user selected Android in the first dropdown.

Similarly, for the iOS path:

form.phone_os == "iOS"
  • This makes the device type dropdown visible only if the user selected iOS.

For the device model dropdown, the formula depends on the previous selections:

form.device_type == "Android Devices" && form.phone_os == "Android"

or

form.device_type == "iOS Devices" && form.phone_os == "iOS"

This ensures that only relevant device models are shown based on prior choices.

3. Copying and Customizing the Formula

The formula is straightforward:

form.[parameter_name] == "[option_value]"
  • Replace [parameter_name] with the actual parameter name assigned to the input.

  • Replace [option_value] with the specific option selected.

Example:

form.phone_iOS == "iOS"
  • This formula makes certain fields visible only when the user selects iOS.

Benefits of Using Condition-Based Logic

  • Enhanced User Experience: Users see only relevant options, reducing confusion.

  • Streamlined Flow: No need for multiple screens; all logic is handled within a single flow.

  • Flexibility: Easily add new conditions or modify existing ones.

  • Efficiency: Saves development time and simplifies flow management.

Practical Tips

  • Test thoroughly: Preview the flow to ensure conditions work as intended.

  • Use clear parameter names: Simplifies formula writing and troubleshooting.

  • Keep formulas simple: Complex conditions can be broken into multiple steps for clarity.

  • Document logic: Maintain a record of conditions for future updates.

Summary

Implementing condition-based logic within WhatsApp flows significantly elevates the interactivity and personalization of user experiences.

By leveraging simple formulas in the visible field property, you can create dynamic forms that adapt seamlessly to user input, all within a single screen. This approach not only enhances engagement but also simplifies flow design, making it accessible even for those new to WhatsApp automation.

Whether you're collecting repair requests, conducting surveys, or guiding users through complex processes, condition-based logic empowers you to deliver tailored content efficiently. Start experimenting with these techniques today to unlock the full potential of your WhatsApp bots and deliver smarter, more responsive interactions.