Back to News for Developers

Building a Simple WhatsApp Flow

February 14, 2024ByGafi G & Iryna Wagner

WhatsApp Flows are a seamless way to engage with your audience or collect information without leaving WhatsApp. They let you streamline data collection and automate interactions directly through WhatsApp.

The best part is that you don’t need to be a developer to start creating Flows. WhatsApp Manager comes equipped with a user-friendly, no-code builder interface. So, regardless of your technical background, you can quickly and easily create a WhatsApp Flow.

If you need more complex functionalities or customization, you can enhance WhatsApp Flows using an endpoint. This approach allows you to integrate more sophisticated features and tailored interactions, catering to more complex use cases, like displaying dynamic data and personalized user interactions.

Whether you’re looking to gather feedback, conduct surveys, or generate business leads, WhatsApp Flows is your go-to tool. This guide walks through the basics of WhatsApp Flows and using WhatsApp Manager’s no-code builder — and the more powerful Flow Builder — to create Flows.

Building Your First WhatsApp Flow

Creating your first WhatsApp Flow is straightforward with the WhatsApp Manager. There are two approaches to start building them:

  • Using the Flows API — The Flows API is a powerful Graph API that lets you conduct a range of operations with Flows. It suits those comfortable with API integrations seeking greater control over the Flow creation process.
  • Using WhatsApp Manager — Within WhatsApp Manager, you have two mechanisms to create Flows:
    • Flows Builder — This is the primary area where you can edit your Flow JSON inside a code editor. The Flows Builder is best suited to users wanting a hands-on, customizable approach to Flow creation.
    • Within Message Templates creation — This feature lets you build Flows as part of the Message Templates creation process. It uses a drag-and-drop Form Editor, ideal if you prefer a more visual and less code-intensive approach. You don’t need to write any Flow JSON code, making it accessible for users without coding knowledge.

Creating Flows Within Message Templates

This section uses a couple practical examples to demonstrate creating a WhatsApp Flow specifically within message template creation.

Message templates are crucial for starting dialogue with your customers. They are the only way to contact users who have not yet messaged your business. Templates must follow the WhatsApp business and commerce policies to receive approval, at which point you can begin using them.

To follow along with this section, ensure you have a WhatsApp Business account.

Customer Feedback Flow for Workshop Attendees

There are numerous ways to use Flows for your customer interactions. In this example, you’ll generate a customer feedback Flow to gather post-event feedback that you would have previously gathered via messaging platforms or emails. The attendees can receive a follow-up message containing a questionnaire. The main goal is to gather feedback to understand their experience and areas for improvement.

Let’s explore how to create this kind of Flow.

Log in to your WhatsApp Business Account and open WhatsApp Manager. Click Account tools in the left-side menu, and then select Message templates.

center-small-tablet="true">WhatsApp Manager graphic

Click Create template at the top right of the page.

create messenger template graphic

Fill in the Flow details:

  • Choose a relevant category for your message template. Select Other if none of the listed categories matches your purpose. For this example, choose Utility.
    • Pick a template that closely matches your Flow’s goal — for example, Form.
  • Enter a unique name for your Flow (for example, “customer_feedback”).
  • Choose your desired language(s) and click Continue.
new messenger template graphic

In the Body text box, craft an engaging message thanking attendees for participating in, say, your workshop and expressing the value of their feedback. For example, you can write, “Thank you for making our workshop a success! Your participation was invaluable. We’d love to hear about your experience to make future events even better. Could you spare a moment to share your feedback? Let’s keep the conversation going!”

At the bottom of the template window, add text for the call-to-action button — something like “Get started.” In the Type of form component, choose a template relevant to your use case (collecting feedback from customers). For this demonstration, select Get feedback and click Create.

get feedback graphic

A dialog box will open, where you can start building your Flow. Use the left panel to add new screens, the middle panel to add fields for the current screen, and the right panel to visualize your Flow in real time.

pop up get feedback graphic

On the first screen, you’ll find a few preconfigured fields relevant to the Get feedback form. You can remove these and add your own fields. Start by adding a title for your first screen, such as “Get Started,” and label the button with the text “Next.” Add a new screen named “Questions.”

ask question feedback graphic

Begin adding questions to your Flow, including multiple-choice questions or open-ended text responses. Examples of questions include:

  • How satisfied were you with the workshop overall? (Scale: Satisfied, Neutral, Dissatisfied)
  • How effective was the presenter in delivering the content? (Scale: Effective, Neutral, Ineffective)
  • Was the workshop duration appropriate? (Scale: Too Short, Just Right, Too Long)
  • What were the key takeaways for you from the workshop?
  • Are there any specific areas where you think the workshop could be improved?

For example, the first question is single-choice — the user can only select one option. To add the question and choices to your screen, select the Add content drop-down menu in the middle panel, hover over Text, and choose Body.

create question feedback graphic

Add the question “How satisfied were you with the workshop overall?” in the text area that appears.

create question feedback graphic

To add the choices, select the Add content drop-down menu, hover over Selection, and choose Single choice.

add content question form graphic

In the added block, replace the text “Label” with “Select one option” to instruct your users accordingly. Under Options, add the provided options in the example question.

add option question form graphic

You can follow this process to add the rest of the questions, whether single-choice or multiple-choice. For multiple-choice questions, ensure you choose Multiple choice under Selection.

multiple choice question form graphic

To add open-ended questions, select the Add content drop-down menu in the middle panel, hover over Text, and select Body. Add your question body in the text area.

open-ended question form graphic

To add an input field where readers — in this case, your workshop attendees — can enter their responses, you first need to determine what kind of response you’re expecting: a short answer, a paragraph, or a date. For this demonstration, you can expect a paragraph as the response.

To add an input field for a paragraph, select the Add content drop-down menu in the middle panel, hover over Text answer, and pick Paragraph.

paragraph question form graphic

Replace the text “Label” with any placeholder text that you like — for example, “Enter your response here.”

enter response form graphic

Use these steps to add as many questions as you need.

After adding questions, click Save. Once the dialog closes, click Submit.

save and submit form graphic
confirm save form graphic
submit form graphic

Your Flow will be submitted for review, and you can track its status in the Status column.

review form graphic

This Flow is now attached to the message template. You can send this template just like any other message template, using the API or a third-party platform. Any information users enter into the Flow will be sent to you as a webhook notification.

Customer Satisfaction Survey

This section guides you through creating a customer satisfaction survey form using Flow Builder. If you’re comfortable with JSON, you can create and edit the Flow JSON within a code editor. Let’s get started!

Click Account tools in the left-side menu and select Flows. Click Create Flow at the top right corner of the screen.

create flow graphic

Give a name to your Flow (for example, “customer_satisfaction”). From the Categories drop-down menu, select Survey.

create flow survey graphic

Use the Flow code editor to configure the Flow JSON. It offers features like auto-formatting, code folding, syntax checking, error code snippets, auto-completion, and shortcuts for saving and previewing.

JSON editor graphic

In the Flow code editor, add the logic for the survey form. Click Run to update the right-side preview panel with your code. Use the Interactive preview option to simulate the user experience.

For more detailed control and customization without relying on the interface, you can also configure the Flow using JSON code.

Once your Flow is ready, click the three dots at the top right and select Publish. You’ll see the status of your Flow change to “Published.”

JSON editor graphic

WhatsApp Flows are a powerful tool for collecting data and interacting within WhatsApp’s interface without necessarily needing coding expertise. This tutorial covered the fundamentals of WhatsApp Flows, guiding you through creating your own Flows using WhatsApp Manager.

With this knowledge, you have the tools to explore the full potential of WhatsApp Flows for your business. Experiment with the possibilities of building WhatsApp Flow and transform your communication strategy and user experience.