# Create and send WhatsApp Flows --- Use [WhatsApp Flows](https://www.infobip.com/docs/whatsapp/whatsapp-flows) to create end-to-end custom workflows. These workflows enable the end users to perform tasks, such as filling out forms, without leaving the chat with your business. This tutorial explains how to create and send WhatsApp Flows to end users. ## Products and channels [#products-channels] - [Answers](https://www.infobip.com/docs/answers) - [Broadcast](https://www.infobip.com/docs/broadcast) - [WhatsApp](https://www.infobip.com/docs/whatsapp) ## Prerequisites [#prerequisites] - Infobip account. If you do not have an account, [sign up](https://www.infobip.com/signup) for a free account. For more information, see [Create an account](https://www.infobip.com/docs/essentials/getting-started/create-an-account). - The following products enabled in your Infobip account: - [**Answers**](https://www.infobip.com/docs/answers): To send the WhatsApp Flow through a chatbot. - [**WhatsApp**](https://www.infobip.com/docs/whatsapp): To use the WhatsApp channel for sending the WhatsApp Flow. [**Broadcast**](https://www.infobip.com/docs/broadcast) is enabled by default with your Infobip account. - WhatsApp sender that is registered with Infobip. - WhatsApp Business account set up and registered with Infobip. ## Process overview [#process-overview] This tutorial shows how to send WhatsApp Flows over the following: - Over the Infobip web interface through Answers. - Over the Infobip web interface through Broadcast. - Over the WhatsApp API. ### Over the Infobip Web interface through Answers [#web-interface-process-overview] 1. [Create the WhatsApp Flow](#web-interface-create-flow). JSON is created. 2. In WhatsApp Manager, [create an outline](#web-interface-create-flow-whatsapp-manager) of the WhatsApp Flow. 3. In WhatsApp Manager, use the JSON to [update the WhatsApp Flow](#web-interface-configure-flow-whatsapp-manager) with the components and elements that you created in the Meta Playground. 4. [Test](#web-interface-test-publish-flow) the WhatsApp Flow in Draft mode. 5. [Publish](#web-interface-test-publish-flow) the WhatsApp Flow. 6. [Add](#web-interface-send-flow-answers) the WhatsApp Flow to the Answers chatbot and send it to end users. ### Over the Infobip Web interface through Broadcast [#web-interface-process-overview] 1. [Create the WhatsApp Flow](#web-interface-create-flow). JSON is created. 2. In WhatsApp Manager, [create an outline](#web-interface-create-flow-whatsapp-manager) of the WhatsApp Flow. 3. In WhatsApp Manager, use the JSON to [update the WhatsApp Flow](#web-interface-configure-flow-whatsapp-manager) with the components and elements that you created in the Meta Playground. 4. [Test](#web-interface-test-publish-flow) the WhatsApp Flow in Draft mode. 5. [Publish](#web-interface-test-publish-flow) the WhatsApp Flow. 6. [Create and register](#web-interface-send-flow-broadcast) the WhatsApp Flows template that uses the WhatsApp Flow. 7. [Create a broadcast](#web-interface-send-flow-broadcast) that uses the template and send it to end users. ### Over the WhatsApp API [#api-process-overview] 1. [Create the WhatsApp Flow](#api-create-flow). JSON is created. 2. In the WhatsApp API, [create an outline](#api-create-flow-in-api) of the WhatsApp Flow. 3. In the WhatsApp API, use the JSON to [update the WhatsApp Flow](#api-create-flow-in-api) with the components and elements that you created in the Meta Playground. 4. [Test](#api-test-publish-flow) the WhatsApp Flow in Draft mode. 5. [Publish](#api-test-publish-flow) the WhatsApp Flow. 6. [Send](#api-send-flow) the WhatsApp Flow to end users. ## Implementation over the Infobip Web interface [#implementation-web-interface] Complete the steps in each of the following sections sequentially. ### Create a WhatsApp Flow [#web-interface-create-flow] You can create the WhatsApp Flow either manually or automatically. #### Create a WhatsApp Flow automatically using API EARLY ACCESS Use the **AI Agent for WhatsApp flows** API to generate the JSON for the WhatsApp Flow. 1. In the ```prompt``` parameter. enter the prompt. Example: *Build a static WhatsApp Flow to book a doctor's appointment with city, branch, specialty (dropdown with emojis), and name.* 2. Copy the JSON code that is generated. Note This feature is in Early access. For information about using this API, contact your Infobip account manager. #### Create a WhatsApp Flow manually in Meta Playground [#web-interface-create-flow-meta-playground] 1. Go to [Meta playground](https://developers.facebook.com/docs/whatsapp/flows/playground/) and create a WhatsApp Flow based on your use case. 2. To add new screens to the WhatsApp Flow, select **Add new**. 3. To add new components, select **Add content**. 4. Configure the components based on your use case. 5. After you finish designing the WhatsApp Flow, JSON is automatically created and is ready to use. Select **Copy Flow JSON**. ### Create an outline of the WhatsApp Flow in WhatsApp Manager [#web-interface-create-flow-whatsapp-manager] 1. Log on to WhatsApp Manager. 2. Go to **Business settings** > **WhatsApp accounts**. 3. Filter by WhatsApp business account ID. 4. Select **WhatsApp Manager** > **Flows** > **Create Flow**. 5. Enter the name of the WhatsApp Flow. 6. Select the category based on your use case. 7. You can create either a static or dynamic WhatsApp Flow. This tutorial shows how to create a static WhatsApp Flow. Select **Without endpoint**. Note To create a dynamic WhatsApp Flow, select **With endpoint**. 8. Select **Default**. 9. Complete all the fields and select **Create**. The WhatsApp Flow is created in **Draft** status. ### Configure the WhatsApp Flow in WhatsApp Manager [#web-interface-configure-flow-whatsapp-manager] Update the WhatsApp Flow so that it contains the components and elements that you created in the Meta Playground. To do this, add the JSON that you copied from the Meta Playground. Do the following: 1. (Optional) To format the JSON, which you copied from the Meta Playground, use a tool such as Postman. In Postman, copy the JSON and select **Beautify**. 2. Paste the JSON into the WhatsApp Flow in your WhatsApp Manager. 3. Select **Save**. On the right-hand side, you can see the preview of the WhatsApp Flow. 4. To see the WhatsApp Flow in interactive mode, go to **Settings** > **Enable Interactive mode**. 5. (Optional) Include [complex components](https://developers.facebook.com/docs/whatsapp/flows/reference/components) that are not available in Meta Playground. To use them, update the JSON in your WhatsApp Manager. 6. Finish designing the WhatsApp Flow. ### Test and publish the WhatsApp Flow [#web-interface-test-publish-flow] 1. To test the WhatsApp Flow, [add it to either your chatbot](#web-interface-send-flow-answers) or [a broadcast](#web-interface-send-flow-broadcast) and send it. Make sure that you select the **Flow status** as **Draft**. 2. To publish the WhatsApp flow, select **Publish**. Note You cannot edit the WhatsApp Flow after you publish it. ### Send the WhatsApp Flow through Answers [#web-interface-send-flow-answers] To incorporate WhatsApp Flows into your Answers chatbot, use the [**WhatsApp Flows**](https://www.infobip.com/docs/answers/chatbot-elements/channels#whatsapp-flows-whatsapp) element. In this element, you can add a welcome message and a button that they can select to enter the flow. In the element, configure the following information. You can get this information from the WhatsApp Flow that you created in your WhatsApp Manager. - **Flow ID**: Unique ID of the WhatsApp Flow. - **Flow status**: Depending on the status of the WhatsApp Flow in WhatsApp Manager, set to either **Draft** or **Published**. - **Flow action**: Select **Navigate** for static WhatsApp Flows or **Data exchange** for dynamic WhatsApp Flows. - **ID of first screen**: If the **Flow action** is **Navigate**, specify the screen ID that you created for the first screen of the WhatsApp Flow. - **Flow token**: Create an identifier for the WhatsApp Flow. ### Send the WhatsApp Flow through Broadcast [#web-interface-send-flow-broadcast] #### Create and register the WhatsApp Flows template 1. On the [Infobip web interface](https://portal.infobip.com/login), go to **Channels and Numbers** > **Channels** > **WhatsApp** > **Senders** tab. 2. Find the sender on which you want to send the WhatsApp Flow to end users. 3. Select **Register template**. 4. Depending on your use case, select either **Marketing template** or **Utility template**. Note You cannot use the Authentication template for WhatsApp Flows. 5. Select **Flow template**. 6. [Configure the fields](https://www.infobip.com/docs/whatsapp/message-types#message-templates) in the template as follows: 1. Add the **template name** and select a **language**. 2. In the **Content** section > **Message** field, add a welcome message to send to the end user. 3. In the **Button** section, create a button that end users can click to start the WhatsApp Flow. Add the **Button text**. 4. For the following fields, use the information from the WhatsApp Flow that you created in your WhatsApp Manager. - **Flow ID**: Unique ID of the WhatsApp Flow. - **Flow action**: Select **Navigate** for static WhatsApp Flows or **Data exchange** for dynamic WhatsApp Flows. - **ID of first screen**: If the **Flow action** is **Navigate**, specify the screen ID that you created for the first screen of the WhatsApp Flow. 5. Add the **Header** and **Footer** as required. 7. Select **Register template**. The template is sent to WhatsApp for approval. The approval process usually takes only a few minutes but can take a maximum of 24 hours. 8. You can view the status of the template in the **Templates** tab. Filter to find the template that you created. #### Create a broadcast and send the WhatsApp Flow 1. On the [Infobip web interface](https://portal.infobip.com/login), go to **Moments** > **Broadcasts**. 2. Select **Create broadcast**. 3. Select **WhatsApp** as the channel. 4. Configure the **Recipients** field. 5. In the **Sender** field, select the sender that you used to register the WhatsApp Flows template. 6. Select to create content. 7. On the right-hand side, all the templates that use the selected sender are listed. Use Filter and Search to find the template that you created. 8. Select **Use** next to the template. 9. Configure the following fields if required. - **Flow action**: Select **Navigate** for static WhatsApp Flows or **Data exchange** for dynamic WhatsApp Flows. - **Flow token**: Create an identifier for the WhatsApp Flow. 10. [Configure the other fields](https://www.infobip.com/docs/broadcast/create#new-broadcast) in the template. 11. Select **Done designing**. 12. (Optional) Enable failover to SMS so that if the WhatsApp message is not delivered to the end user, the broadcast will try to send the message over SMS. 1. Select **Failover to SMS**. 2. Define the SMS sender and SMS content. 13. Configure the other fields in the broadcast as required. 14. Check all the fields and rename the broadcast if required. 15. Select **Continue to preview**. 16. Check the preview and make sure that all the information is correct. 17. Select **Launch** to send the broadcast. To track the status of the broadcast, go to **Moments** > **Broadcasts**. ## Implementation over the WhatsApp API [#implementation-api] Complete the steps in each of the following sections sequentially. ### Create a WhatsApp Flow [#api-create-flow] You can create the WhatsApp Flow either manually or automatically. #### Create a WhatsApp Flow automatically using API EARLY ACCESS Use the **AI Agent for WhatsApp flows** API to generate the JSON for the WhatsApp Flow. 1. In the ```prompt``` parameter. enter the prompt. Example: *Build a static WhatsApp Flow to book a doctor's appointment with city, branch, specialty (dropdown with emojis), and name.* 2. Copy the JSON code that is generated. Note This feature is in Early access. For information about using this API, contact your Infobip account manager. #### Create a WhatsApp Flow manually in Meta Playground [#api-create-flow-meta-playground] 1. Go to [Meta playground](https://developers.facebook.com/docs/whatsapp/flows/playground/) and create a WhatsApp Flow based on your use case. 2. To add new screens to the WhatsApp Flow, select **Add new**. 3. To add new components, select **Add content**. 4. Configure the components based on your use case. 5. After you finish designing the WhatsApp Flow, JSON is automatically created and is ready to use. Select **Copy Flow JSON**. ### Create and configure the WhatsApp Flow in the API [#api-create-flow-in-api] 1. In the [WhatsApp API](https://www.infobip.com/docs/api/channels/whatsapp/whatsapp-service-management/create-whatsapp-flow), create an outline of the WhatsApp Flow. The WhatsApp Flow is created in **Draft** status. You will receive a WhatsApp Flow ID. 2. Update the WhatsApp Flow so that it contains the components and elements that you created in the Meta Playground. To do this, add the JSON that you copied from the Meta Playground. Include the WhatsApp Flow ID. 3. (Optional) Include [complex components](https://developers.facebook.com/docs/whatsapp/flows/reference/components) that are not available in Meta Playground. 4. Finish designing the WhatsApp Flow. ### Test and publish the WhatsApp Flow [#api-test-publish-flow] 1. To test the WhatsApp Flow, [send it over the API](#api-send-flow). Make sure that you select the **flowStatus** as **Draft**. 2. [Publish](https://www.infobip.com/docs/api/channels/whatsapp/whatsapp-service-management/publish-whatsapp-flow) the WhatsApp Flow. Note You cannot edit the WhatsApp Flow after you publish it. ### Send the WhatsApp Flow over the API [#api-send-flow] 1. In the [API to send WhatsApp Flows](channels/whatsapp/whatsapp-outbound-messages/send-whatsapp-interactive-flow-message), update the recipients (to) and sender (from). 2. Set the mode to either **Draft** or **Published**. 3. Configure the following information. You can get this information from the WhatsApp Flow that you created. - **flowId**: Unique ID of the WhatsApp Flow. - **flowStatus**: Depending on the status of the WhatsApp Flow in WhatsApp Manager, set to either **Draft** or **Published**. - **flowAction**: Specify **Navigate** for static WhatsApp Flows or **Data_Exchange** for dynamic WhatsApp Flows. - **screen**: If **flowAction** is **Navigate**, specify the screen ID that you created for the first screen of the WhatsApp Flow. - **flowToken**: Create an identifier for the WhatsApp Flow.