WhatsApp Flows Elements and Composition
Updated
Note: Before you begin, ensure you have a general understanding of WhatsApp Flows and relevant Use Cases
WhatsApp Flows enable brands to build personalized, customizable workflows tailored to their customer journeys and use cases. Each flow is built from three key elements: Screens, Layout, and Components.
Screens
A screen is the interactive window that opens inside WhatsApp where the user engages with the brand.
A flow can contain multiple screens.
The initial screen is triggered when a customer clicks a CTA (Call‑to‑Action) button in a WhatsApp message.
Layout
The layout defines how components are arranged within a screen, ensuring a clear and structured design.
Components
Components serve as the fundamental building blocks within a screen, enabling the creation of a customized user interface aligned with the brand's requirements. WhatsApp Flows provides a diverse range of components to facilitate this customization. Here's a glossary of the components available:
Note: The maximum number of permissable components per screen is 50.
Text Display
This component is typically used to display read‑only text, such as descriptions or supporting information for other elements within a flow.
Heading 1: Primarily utilized as the top-level title within a screen. The length is restricted to 80 characters.
Heading 2: Used for descriptive titles related to other components. Length limited to 80 characters.
Heading 6: Used for longer text descriptions. Maximum length is 4096 characters.
Paragraph: Utilized to describe helper text, disclaimers, and footer text. Maximum length is 4096 characters.
Media
Image: This component is used to display images within a screen, helping brands visually enrich the flow. Typical use cases include showcasing product photos, event visuals, or brand logos.
Text Answer
Text Input: This component is used for receiving single-line customer input, suitable for fields like first name, last name etc. By default, length is limited to 80 characters with an option to modify during creation.
Email Input: This component is used for receiving customer email. By default, length is limited to 80 characters with an option to modify during creation.
Number Input: This component is used for receiving any numerical input, suitable for user cases like number of people, pincode etc. By default, length is limited to 80 characters but this can be modified during creation.
Text Area: Designed for receiving customer input spanning several lines, ideal for use cases like feedback, additional information, and address input. By default, length is limited to 600 characters but this can be modified during creation.
Date Picker: Used for receiving dates, applicable in scenarios such as date of birth, appointment scheduling, and booking dates.
Selection
Radio Button: This component is utilized for receiving a single choice of customer preference from a limited set of viewable options. It's ideal for scenarios such as selecting payment methods, answering yes/no questionnaires, or choosing subscription plans.
Multiple Choice: Designed for receiving multiple selections from a limited set of options provided to customers. It's suitable for use cases like selecting food item add-ons or indicating products used.
Dropdown: This component is used for receiving a single choice of customer input from a broad or wide set of options presented in a dropdown menu. It's commonly used for scenarios such as language selection or city selection.