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 and customizable flows tailored to their existing journeys and relevant use cases.

Flows comprise three key elements: Screens, Components, and Layout.

Screens

A screen refers to the window which opens up within WhatsApp with which the user interacts. A flow can consist of multiple screens.

The initials screen for the flow opens up when a customer clicks the CTA ( Call-to-Action ) button from the message received within WhatsApp from the brand.

Layout

Layout determines the arrangement of components within a screen, contributing to its structured appearance.

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

 

  1. Text Display

    This component set is commonly employed for read-only text descriptions or to provide supplementary information for other components.

    • 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.

  2. Media

    • Image: This component is employed for adding graphical images to be displayed within the screen. Example use cases include displaying product images, event images, and brand logos.

  3. 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.

  4. 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.

      A screenshot of a phoneDescription automatically generated

    • 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.

      A screenshot of a phoneDescription automatically generated

    • 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.

      A screenshot of a phoneDescription automatically generated