# WhatsApp flow

WhatsApp Flows is a way to build structured interactions for business messaging. With Flows, businesses can define, configure, and customize messages with rich interactions that give customers more structure in their communication.

[Learn more about flows](https://developers.facebook.com/docs/whatsapp/flows/)

<figure><img src="https://360969599-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsrMxU8nO3RjusUiYuXBB%2Fuploads%2FPtk9H2B12qDJgo3XdNpc%2Fimage.png?alt=media&#x26;token=d708e112-2420-4fc1-a880-5c1eb4ac66dc" alt=""><figcaption></figcaption></figure>

To configure the Whatsapp flow action block:

## Step 1: Create a template&#x20;

To initiate a WhatsApp flow, you must first create a flow on your Facebook account.&#x20;

* Go to your **Facebook Business settings** → **WhatsApp Manager**, or click [**here**](https://business.facebook.com/wa/manage).
* Under Account tools → Select **Message Templates**.

This will allow us to use the drag-and-drop builder to create our WhatsApp Flow. You won’t have to submit a template at the end of this guide — we’re just using this to access the drag-and-drop Flow builder.

<figure><img src="https://360969599-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsrMxU8nO3RjusUiYuXBB%2Fuploads%2FLw1ASRM2ND359QqVixwK%2F1.jpg?alt=media&#x26;token=d49e01dc-37a9-434b-8f97-1ec3879b45b3" alt=""><figcaption></figcaption></figure>

* Select **Create Template**.

<figure><img src="https://360969599-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsrMxU8nO3RjusUiYuXBB%2Fuploads%2FxDr6U3812g5X3f8zTRay%2F2.jpg?alt=media&#x26;token=102c9027-99ab-450a-ae6f-8041f9dd553b" alt=""><figcaption></figcaption></figure>

* Choose the category of the flow

<figure><img src="https://360969599-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsrMxU8nO3RjusUiYuXBB%2Fuploads%2Fc5rKZJ2jY8CZaGPAAhjB%2F3.jpg?alt=media&#x26;token=b7bd4a1d-1559-47f6-87fb-02285ac0e83c" alt=""><figcaption></figcaption></figure>

* Customize your flow details using the drag-and-drop builder for WhatsApp flows.

<figure><img src="https://360969599-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsrMxU8nO3RjusUiYuXBB%2Fuploads%2FMudCnzZnzQtLqIfypq4f%2F7.jpg?alt=media&#x26;token=b5bdf722-7ab1-4c65-a08a-649a7fe5f2da" alt=""><figcaption></figcaption></figure>

* You can add multiple screens as part of one flow by clicking on **+ Add new** on the left and giving your screen a name.

<figure><img src="https://360969599-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsrMxU8nO3RjusUiYuXBB%2Fuploads%2F44uR9jdsMUfk759MEsGp%2F8.jpg?alt=media&#x26;token=c7994c8d-8809-4693-a972-8fb8f8b8a50c" alt=""><figcaption></figcaption></figure>

* Customize your flow screen by editing the components you add. You can choose to add radio, input, text input, dropdown, date picker, [and many more](https://developers.facebook.com/docs/whatsapp/flows/reference/flowjson/components/).

<figure><img src="https://360969599-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsrMxU8nO3RjusUiYuXBB%2Fuploads%2Fe0Qihfl5EZRRcw5oWXya%2F10.jpg?alt=media&#x26;token=86e71c38-769c-4274-88f0-6021b44d0c88" alt=""><figcaption></figcaption></figure>

* When you’re done, click **Save**:

<figure><img src="https://360969599-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsrMxU8nO3RjusUiYuXBB%2Fuploads%2Foo3CcJu4WkDFbgieGXZE%2F11.jpg?alt=media&#x26;token=34e73e40-4174-498c-9db1-2e928b3c5269" alt=""><figcaption></figcaption></figure>

Your WhatsApp flow is now created and you can find it in the WhatsApp manager menu -> Account tools, select Flows:

<figure><img src="https://360969599-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsrMxU8nO3RjusUiYuXBB%2Fuploads%2FZ4IM0ThmIUeiJeA9mGD9%2Fimage.png?alt=media&#x26;token=ba5a6f58-d64a-4ffd-a352-938130c40920" alt=""><figcaption></figcaption></figure>

### Restrictions

* You can add up to 8 components on every screen. A multiple-choice question is considered one component, regardless of the number of choices.
* The maximum number of screens per WhatsApp Flow is also 8.

## Step 2: Setup the "WhatsApp flow" action block

Add the "WhatsApp flow" action block on the bot builder and configure it.

<figure><img src="https://360969599-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsrMxU8nO3RjusUiYuXBB%2Fuploads%2F9S0ISRMQcHnYHG1eNjr8%2FCleanShot%202024-07-29%20at%2016.03.06.png?alt=media&#x26;token=9cc297b8-300b-435e-8fae-9406fd90dc3d" alt=""><figcaption></figcaption></figure>

#### Header <a href="#header" id="header"></a>

Shows the text in a bold format -- making it look like a title. It is an optional field.

#### Body <a href="#body" id="body"></a>

The text will be the question associated with showing the list of options.

For example, "Select the service you are interested in".

#### Footer <a href="#footer" id="footer"></a>

The text is displayed in a small grey color format. Mostly used to display a disclaimer to the user when selecting the option from the list.

#### Button name <a href="#button-name" id="button-name"></a>

Along with the above, a button will be displayed, on click of which we will show the list of options in a drawer format.

You can write the button's name here, such as 'Choose', 'Select', etc.

**Error message**

If the user types a random text instead of clicking the button, this error message will be sent.

## Step 3: Select and setup the WhatsApp flow

* Choose the flow from the dropdown
* And the starting screen you want to launch when the flow is executed.

<figure><img src="https://360969599-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsrMxU8nO3RjusUiYuXBB%2Fuploads%2FBfdzJEjOm4fJXcrs2StD%2FCleanShot%202024-07-29%20at%2016.19.25.png?alt=media&#x26;token=c7ea8a01-2a39-405d-b8a8-d4fb5253c0d2" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
We will show the flows in the dropdown that are fetched from the phone number that you have connected for that bot on the "**Trigger**" action block.
{% endhint %}

* Next, select the data that you want to send from WotNot to the WhatsApp flow
* Map the fields fetched from the flow with the values/variables that you want to send

This is done to make the flow dynamic and contextual to the user's interactions.

## Step 4: Store the responses into variables

After the flow is executed and the user has completed interacting with it, choose the results that you want to store into variables for further use in the chat flow.

This could be things like dropdown selected, input added etc.

Map the response path with the variable that you want to store it in.

<figure><img src="https://360969599-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsrMxU8nO3RjusUiYuXBB%2Fuploads%2FLMtuAXIRIASZmguVy8Ws%2FCleanShot%202024-07-29%20at%2016.20.56.png?alt=media&#x26;token=7bbdb326-7222-4d90-94f1-68f0c1cc0c8e" alt=""><figcaption></figcaption></figure>
