Digital Eye Path Logo
Advanced WhatsApp Flow Designer | Interactive JSON Builder
10 Advanced Components Added

Advanced WhatsApp
Flow JSON Builder.

Construct complex native forms, dropdowns, toggles, and passwords for WhatsApp Business. Preview the UI in real-time and export Meta's exact schema instantly. Runs 100% locally.

1. Add Components

2. Device Preview

×

Data Entry Form

3. Generated Schema

Meta Cloud API / SingleColumnLayout


                    

                

            


        

    


    
    

        

            
Advanced WhatsApp Flows Guide

            

                WhatsApp Flows allow you to build native, interactive UI components directly inside a WhatsApp chat. This tool generates the strict JSON schema required by Meta's Cloud API (`SingleColumnLayout`). Below is a detailed guide on how to use the 10 advanced features implemented in this builder.
            


            
1. Text & Validated Inputs

            

                The TextInput component is versatile. By changing its subtype, you enforce native client-side validation on the user's phone before they can submit the form.
            

            
    
                
  • Text: Standard alpha-numeric input (e.g., Name, Address).
    • 
                
  • Number: Forces the numeric keypad to open. Perfect for capturing Age or Quantity.
    • 
                
  • Email: Validates for the `@` symbol and proper domain structure.
    • 
                
  • Password: Masks the characters as dots. Useful for linking accounts or capturing sensitive PINs securely.
    • 
            


            
2. Multi-Line Text Area

            

                Use the TextArea component when you need users to provide detailed feedback, shipping instructions, or support ticket descriptions. It expands natively as the user types.
            


            
3. Selection Components (Dropdowns & Radios)

            

                Prevent typos by forcing users to select from predefined options. 
            

            
    
                
  • Dropdown: Best used when you have 4 to 20 options (e.g., selecting a Country or a State). It saves vertical screen space.
    • 
                
  • Radio Group: Best used for 2 to 4 options (e.g., "Yes/No", "Consulting/Support"). It displays all options instantly for quick tapping.
    • 
            


            
4. Checkbox Groups

            

                The CheckboxGroup allows users to select multiple options at once. 
                
Example Use Case: Asking a user what features they are interested in (e.g., [x] Marketing, [x] Sales, [ ] Support). The webhook will return an array of the selected IDs.
            


            
5. Toggles / Opt-Ins

            

                The OptIn component renders as a native switch (toggle) on the device.
                
Example Use Case: "I agree to the Terms and Conditions" or "Subscribe to Newsletter". It returns a strict Boolean (true/false) in the JSON payload.
            


            
6. Formatting with Headings

            

                The TextHeading component allows you to break up long forms. It doesn't capture data; it simply displays bold, prominent text to organize your flow.
            


            
Execution Example (Sending the Payload)

            

                Once you copy the JSON payload from the right-hand panel, you can send it via cURL to Meta's API:
            

            
curl -X POST 'https://graph.facebook.com/v18.0/YOUR_PHONE_NUMBER_ID/messages' \
-H 'Authorization: Bearer YOUR_ACCESS_TOKEN' \
-H 'Content-Type: application/json' \
-d '...paste_copied_json_here...'

        

    


    
    

        JSON Copied to Clipboard!