WhatsApp Flow

9min
We recognize that entering information via WhatsApp chats may be challenging and time-consuming for users, potentially leading to a drop in engagement. 
To make things smoother, you can use WhatsApp Flows to schedule appointments, and reservations, book a service, or schedule a consultation within WhatsApp or any other form-based use case where structured interactions are more relevant for your business.
﻿
﻿Availability﻿
Ensure that your bot is deployed on WhatsApp using 360dialog as the provider by following these steps: Navigate to Configure > Deployment > WhatsApp > Provider, and select 360Dialog.
To locate the node, go to Bot Builder > Add Node > Data Input Nodes > WhatsApp Flows
﻿
﻿Setup﻿
To display your flows on the 'WhatsApp Flows' node, it is essential to initially create these flows on Facebook Business Manager (FBM).
﻿How do you create flows on FBM?﻿
Select WhatsApp manager from FBM & select the business account that we need to manage & select the flows option
﻿
2. Select the flows option & this will display a list of the flows
﻿
3. Click on Create New Flow. Fill in the flow name & categories for which flow is being used
﻿
﻿
4. Once the new flow is created, it is created with the default script. We can update the script accordingly to create different flows with multiple screens.
﻿
5. Once the flow is created, publish the flow.
﻿
6. You can also refer to the Meta’s official documentation on WhatsApp Flows - https://developers.facebook.com/docs/whatsapp/flows/gettingstarted/creatingaflow﻿
﻿How to set up a WhatsApp Flows node?﻿
﻿
Select an existing flow - Choose the appropriate flow from the dropdown menu set up in your Facebook Business Manager (FBM).
Message - Compose an initial message that introduces and outlines the purpose of your flow.
Button Label - Specify a name for your action button that will activate your flow.
Choose the path - Choose the appropriate path from your current bot using the dropdown menu. This path will be activated after interacting with the mentioned button.
Attribute Values for Dynamic Fields - Specify attributes for this field to retrieve a dynamic value according to your specific use case.
﻿Flow Templates﻿
1.Multiple Screens (Login)
JSON
{
  "version": "3.0",
  "screens": [
    {
      "id": "LOGIN",
      "layout": {
        "type": "SingleColumnLayout",
        "children": [
          {
            "type": "Form",
            "name": "flow_path",
            "init-values": {
              "path": "happy-find-ap"
            },
            "children": [
              {
                "type": "TextInput",
                "name": "name",
                "required": true,
                "input-type": "text",
                "label": "Name"
              },
              {
                "type": "TextInput",
                "name": "email",
                "required": true,
                "input-type": "text",
                "label": "email"
              },
              {
                "type": "Footer",
                "label": "Continue",
                "on-click-action": {
                  "name": "navigate",
                  "next": {
                    "type": "screen",
                    "name": "CONFIRMATION"
                  },
                  "payload": {
                    "name": "${form.name}",
                    "email": "${form.email}"
                  }
                }
              }
            ]
          }
        ]
      },
      "title": "Login",
      "data": {}
    },
    {
      "terminal": true,
      "data": {
        "name": {
          "type": "string",
          "__example__": "John"
        },
        "second_name": {
          "type": "string",
          "__example__": "Kane"
        }
      },
      "id": "CONFIRMATION",
      "title": "Confirmation",
      "layout": {
        "type": "SingleColumnLayout",
        "children": [
          {
            "type": "TextHeading",
            "text": "Confirm details"
          },
          {
            "type": "TextSubheading",
            "text": "Name"
          },
          {
            "type": "TextBody",
            "text": "${data.name}"
          },
          {
            "type": "TextSubheading",
            "text": "email"
          },
          {
            "type": "TextSubheading",
            "text": "${data.email}"
          },
          {
            "type": "Footer",
            "label": "Continue",
            "on-click-action": {
              "name": "complete",
              "payload": {
                "name": "${data.name}",
                "second_name": "${data.email}"
              }
            }
          }
        ]
      }
    }
  ]
}
{
  "version": "3.0",
  "screens": [
    {
      "id": "LOGIN",
      "layout": {
        "type": "SingleColumnLayout",
        "children": [
          {
            "type": "Form",
            "name": "flow_path",
            "init-values": {
              "path": "happy-find-ap"
            },
            "children": [
              {
                "type": "TextInput",
                "name": "name",
                "required": true,
                "input-type": "text",
                "label": "Name"
              },
              {
                "type": "TextInput",
                "name": "email",
                "required": true,
                "input-type": "text",
                "label": "email"
              },
              {
                "type": "Footer",
                "label": "Continue",
                "on-click-action": {
                  "name": "navigate",
                  "next": {
                    "type": "screen",
                    "name": "CONFIRMATION"
                  },
                  "payload": {
                    "name": "${form.name}",
                    "email": "${form.email}"
                  }
                }
              }
            ]
          }
        ]
      },
      "title": "Login",
      "data": {}
    },
    {
      "terminal": true,
      "data": {
        "name": {
          "type": "string",
          "__example__": "John"
        },
        "second_name": {
          "type": "string",
          "__example__": "Kane"
        }
      },
      "id": "CONFIRMATION",
      "title": "Confirmation",
      "layout": {
        "type": "SingleColumnLayout",
        "children": [
          {
            "type": "TextHeading",
            "text": "Confirm details"
          },
          {
            "type": "TextSubheading",
            "text": "Name"
          },
          {
            "type": "TextBody",
            "text": "${data.name}"
          },
          {
            "type": "TextSubheading",
            "text": "email"
          },
          {
            "type": "TextSubheading",
            "text": "${data.email}"
          },
          {
            "type": "Footer",
            "label": "Continue",
            "on-click-action": {
              "name": "complete",
              "payload": {
                "name": "${data.name}",
                "second_name": "${data.email}"
              }
            }
          }
        ]
      }
    }
  ]
}
﻿
2. Ticket Booking
JSON
{
 "version": "3.1",
 "screens": [
   {
     "id": "SIGN_UP",
     "title": "Finish Sign Up",
     "data": {},
     "terminal": true,
     "success": true,
     "layout": {
       "type": "SingleColumnLayout",
       "children": [
         {
           "type": "Form",
           "name": "form",
           "children": [
             {
               "type": "TextInput",
               "name": "firstName",
               "label": "First Name",
               "input-type": "text",
               "required": true
             },
             {
               "type": "TextInput",
               "label": "Last Name",
               "name": "lastName",
               "input-type": "text",
               "required": true
             },
             {
               "type": "TextInput",
               "label": "Email Address",
               "name": "email",
               "input-type": "email",
               "required": true
             },
             {
               "type": "Footer",
               "label": "Done",
               "on-click-action": {
                 "name": "complete",
                 "payload": {
                   "firstName": "${form.firstName}",
                   "lastName": "${form.lastName}",
                   "email": "${form.email}"
                 }
               }
             }
           ]
         }
       ]
     }
   }
 ]
}
{
 "version": "3.1",
 "screens": [
   {
     "id": "SIGN_UP",
     "title": "Finish Sign Up",
     "data": {},
     "terminal": true,
     "success": true,
     "layout": {
       "type": "SingleColumnLayout",
       "children": [
         {
           "type": "Form",
           "name": "form",
           "children": [
             {
               "type": "TextInput",
               "name": "firstName",
               "label": "First Name",
               "input-type": "text",
               "required": true
             },
             {
               "type": "TextInput",
               "label": "Last Name",
               "name": "lastName",
               "input-type": "text",
               "required": true
             },
             {
               "type": "TextInput",
               "label": "Email Address",
               "name": "email",
               "input-type": "email",
               "required": true
             },
             {
               "type": "Footer",
               "label": "Done",
               "on-click-action": {
                 "name": "complete",
                 "payload": {
                   "firstName": "${form.firstName}",
                   "lastName": "${form.lastName}",
                   "email": "${form.email}"
                 }
               }
             }
           ]
         }
       ]
     }
   }
 ]
}
﻿
﻿