What is WhatsApp Flows?

Index: 

1. What is the WhatsApp Flows?
2. How to create flows via Blip commands APIs
3. How to display your flows using dynamic content in the Builder.
4. Final considerations

 

What is WhatsApp Flows?

1. 1. What is it for

WhatsApp Flows is a way to build structured interactions for business messages. With Flows, companies can define, configure, and personalize messages with rich interactions that give customers more structure in the way they communicate.

You can use Flows to schedule appointments, browse products, collect customer feedback, get new sales leads, or anything else where structured communication is more natural or comfortable for your customers.

2. Consulting the official Meta documentation

Meta provides complete documentation with all aspects of understanding and creating Flows, with practical code examples and how to assemble interfaces and components. Use this reference to build and test your interfaces, when you're ready you can use Blip's APIs to build and integrate with your smart contact.

• Goal Documentation Here

3. What will you learn in this Blip Help article?

Here we will show you the basics of creating and sending a basic Flow in your bot, which you can improve to meet your needs.

You will learn:

1. Get credentials from your bot's command API in Blip.
2. Create a Flow, which will be created directly in your WABA
3. Update Flow informing the Flow JSON code responsible for assembling the components and navigation behavior of your Flow. (Simulating HTML used to assemble components for web browsers, Flow JSON assembles components to be displayed within WhatsApp.)
4. Update the public key of a Flow, so that communication between your server and WhatsApp is encrypted and secure.
5. Delete or discontinuea Flow
6. Use Blip Builder to send your Flow to your contacts.

 

How to create flows via Blip commands APIs

1. Fetching credentials to access the API

To use the Blip Commands API, you need to obtain the credentials in your bot's settings. With this data in hand, you will be able to use anyHTTP calls to manage your flows. The following examples are using the Postman tool.

Access the menu connection information to get:

• Authorization
• URL to send commands

 

2. Environment preparation:

• You can download a postman collection with all the calls described here.

       🠖 Just download here

In Postman, configure the variables according to your Bot data obtained in the API credentials session.

 

3. Overview

All Flows are created in the WABA of the WhatsApp number. Every Flow is created with Draft status, which means it is still in the development phase, and must be configured and published before being widely used.

After creating a Flow informing the Name and Category, you must send the Flow JSON file, a format that Meta created to represent the organization of visual components within each Flow screen.

After updating Flow with the Flow JSON code, you can test how it works using the Blip Builder, and when everything is fine with your Flow you can publish it within Waba.

• Once published, Flow cannot be modified and can only be discontinued/deactivated.
• It is only possible to edit Flows in Draft format, if it is published it can no longer be edited.
• A Flow that was never published may be deleted from WABA.

4. How to create a Flow

REQUEST:

In addition to the basic Blip command API parameters such as [id],[to],[type] which must be the same in all requests to manage Flows. Report:

1. method: set
2. type: /whatsapp-flows
3. name: The name of your Flow
4. categories:  [At least one category is mandatory]

 

 

RESPONSE:

In the response, you will receive the ID of the created flow. This ID is important for all other subsequent calls. When creating the flow, store this ID.

This flow will be created in WABA linked to the bot. With this ID, you can use the other endpoints to manage this flow.

This ID will also be used in the Blip Builder later, to be able to send the flow to your contacts.

 

5. Listing your created Flows

REQUEST:

1. method: get
2. type: /whatsapp-flows

 

 

RESPONSE:

In the response, in addition to the name and categories, you can check:

1. O status, which will initially be DRAFT, until you publish the Flow.
2. You errorsvalidation, if any.

These validation errors will only appear after sending the Flow JSON code, and if this code presents any semantic/syntax problems.

 

 

6. Sending the Flow JSON code that represents the look of your Flow

A Meta created for WhatsApp a new type of format and language that you need to create to represent the graphical interface of your Flow. Similar to the HTML markup code, it demarcates which components and structure each Flow screen will contain.

 

To understand more about this format and its application, consult the official Meta documentation on the developer portal. It is important to write the code in the correct format, always paying attention to validation errors.

Currently, accessing your Waba you have a Builder that helps you create the correct code in Flow JSON format, but this builder is not a requirement to create your Flow JSON code. Furthermore, not all developers and customers have access to your Waba, so only with Blip's APIs will you be able to create and manage your Flows.

When you already have the code in Flow JSON format, you must update your FLOW created with this code. To do this, simply insert the code in the following request:

REQUEST:

1. method: set
2. type:/whatsapp-flows/flow-json/{FLOW_ID}

• The code below sends a Flow JSON code to create a hello world

 

The Flow JSON code above will generate a Flow with the following layout:

 

RESPONSE:

 

7. Getting the preview link and more details of your Flow

To be able to view a preview of your Flow, you can use an endpoint to obtain the link to this preview. The return also brings more information related to Waba where Flow was created.

REQUEST:

3. method: get
4. type:/whatsapp-flows/{FLOW_ID}

 

RESPONSE:

In the response, you can get a link to access the preview, remembering that this link expires in approximately 30 days. This preview is displayed in the browser, showing an approximate experience of how it will be displayed on the user's smartphone.

 

8. Updating your Flow name and category

Before it is published, you can edit all the information in your Flow, such as Name, categories and even the Flow JSON code

REQUEST:

1. method: set
2. type:/whatsapp-flows/{FLOW_ID}

RESPONSE:

 

9. To get the current Flow JSON file into your Flow

REQUEST:

1. method: get
2. type:/whatsapp-flows/assets/{FLOW_ID}

 

RESPONSE:

By accessing the highlighted link, you will obtain the current Flow JSON file of your Flow

10. To publish your Flow to a production use state

When every Flow is created, it is created in a DRAFT format, that is: draft, while in draft you can edit this Flow without problems.

But to definitely use Flow, you need to publish. When Flow is published, it undergoes approvals at Meta (this process is automatic and almost instantaneous) and from then on it cannot be edited.

 

Attention! If you need to remove a Flow in state of DRAFT, you can delete it, as we will show below.

 

If you need to remove a Flow in state of PUBLISHED, you must mark it as DEPRECATED, we will also show it below.

To Publish a Flow:

REQUEST:

1. method: get
2. type:/whatsapp-flows/publish/{FLOW_ID}

 

 

RESPONSE:

 

11. Deactivating a published Flow

After being published, if you wish to deactivate it so that it can no longer be used:

REQUEST:

3. method: get
4. type:/whatsapp-flows/deprecate/{FLOW_ID}

 

RESPONSE:

12. Deleting a Flow that has not yet been published

Before being published, a Flow can be completely deleted from your WABA.

For that:

REQUEST:

1. method: delete
2. type:/whatsapp-flows/{FLOW_ID}

 

 

RESPONSE:

 

Regarding Flows that need the client endpoint, called data channel.

A Flow can have two behaviors:

1. All data entered/displayed to the user travels between the Flow screens themselves. So, if on the first screen you request data for the user, such as their name, this name can be sent to a second Flow screen, and when the Flow screens close, you can obtain this name entered through the your bot.
2. A second, more sophisticated way, is by creating an intermediate API dedicated to Flow, which will communicate data with WhatsApp. Here we have use cases like capturing the data entered by the user, sending it to this client API and then returning a response to the user. Example: A login, where the user types username/password, then your server validates these credentials and returns a result to the user, showing a second screen.

For this to happen, it is necessary to understand how to build these Flows and create Flow JSON code accordingly. To do this, consult the Meta documentation.

In any case, for this to happen, you will need to create an encryption certificate that will encrypt all data sent between WhatsApp and its intermediate API. Meta's documentation details this subject in more detail, but within Blip what you will need is to inform what the public key of this encryption is.

This public key will be valid for all flows you create in the same Waba, so just do it once and any flow created in the same Waba will share this public key.

 

To do this, use the request:

REQUEST:

1. method: set
2. type:/whatsapp-flows/public-key/upload

Observation:The public key in the example is invalid, and should not be used. Replace it with the key generated by you according to the documentation.WhatsApp Flows na Meta.

 

RESPONSE

 

How to display your flows using dynamic content in the Builder.

1. 1. Creating a block and using Flows send message.

To send your Flow to the user during a conversation, you must use a block with dynamic content in the builder.

 

In dynamic content, you can enter the type of message you would like to send with the following example code:

Parameters you need to modify:

1. flow_id: the ID of the flow you want to send
2. inside [flow_action_payload], the parameter screen, being the first screen defined in your Flow JSON file

{

  "recipient_type": "individual",

  "messaging_product": "whatsapp",

  "type": "interactive",

  "interactive": {

    "type": "flow",

    "header": {

      "type": "text",

      "text": "Title of buttom CTA"

    },

    "body": {

      "text": "Body of buttom CTA"

    },

    "footer": {

      "text": "Footer of buttom CTA"

    },

    "action": {

      "name": "flow",

      "parameters": {

        "flow_message_version": "3",

        "flow_token": "any_string_for_this_example",

        "flow_id": "10323711744212514",

        "flow_cta": "Open Flow",

     "flow_action": "navigate",

        "flow_action_payload": {

          "screen": "WELCOME_SCREEN",

          "data": {

                    "type": "dynamic_object"

                  }

        }

      }

    }

  }

}

 

Final considerations

WhatsApp Flows is a new feature that continues to evolve constantly. Over time we will improve the experience of creating and managing Flows in Blip. Follow the news on the forum. New components, new interfaces to access the device, full support for Android and IOS are some of the things we will soon have news about.

We will also have extensions in the Blip Store that can facilitate/advance the process of creating Flows through our partners.