Discover how to build a Dialogflow-WhatsApp chatbot using Landbot’s no-code interface and WhatsApp campaign manager to cut costs and streamline the process.

‍The world pandemic and the consequential race for digitalization have resulted in an unprecedented rise in the use of chatbot technologies, artificial intelligence, and machine learning algorithms bringing the future of chatbots closer to our daily reality than ever before.

While, in recent years, more and more chatbots have been popping up, most of them are scripted linear conversations where users’ natural input is limited or non-existent. These kinds of bots, too, can be powerful and incredibly useful. However, there are times - and channels - when the use of natural language processing (NLP) can make a positive difference in customer experience. One of these channels is the most popular messaging app in the world, WhatsApp.

Since WhatsApp has a fairly limited interface when compared to other messaging apps such as Facebook Messenger, the conversation largely relies on text rather than rich UI elements. Hence, WhatsApp is a perfect canvas for NLP-driven conversations.

The problem, however, is that most companies, especially the smaller ones stay away from NLP bots thinking their production is too expensive and time-consuming to balance the investment. Therefore, this article will show you how to build a chatbot using Google’s NLP software Dialogflow in combination with Landbot builder and do so quickly, efficiently and without losing overview and control.

So whether you are a developer looking for simplifications and hacks to make your work easier or a person with little to coding knowledge, this article is for you.

What Do You Need to Make a Dialogflow-WhatsApp Assistant with Landbot?

In order to put together a WhatsApp Dialogflow bot, you will need:

‍1) WhatsApp Business API. Unlike the basic WhatsApp Business App, the API for WhatsApp enables you to send bulk notifications - also called highly structured messages (HSM) - to an unlimited number of users as well as integrate your channel with chatbot(s). To be able to get access, you first need to apply for WhatsApp API directly or via a provider (recommended).

‍2) Dialogflow Account. If you don’t have one yet, you will also need to create an account on Google’s Dialogflow console. The service is free unless you are interested in more advanced features such as sentiment analysis.

‍3) Landbot Account. To tie it all together, you will need a Landbot account of which the visual builder and WhatsApp campaign manager will streamline the parts of WhatsApp-Dialogflow bot creation that still require coding. Thus, making the development process quicker and more efficient. Hence, you can use Landbot to quickly set up 3rd-party integrations or perform calculations that would have otherwise required coding. And, better yet, it enables you to test the bot end-user experience on a secure WhatsApp channel as you go along, in real-time:

How to Build a Dialogflow WhatsApp Chatbot with Landbot

To follow along with the tutorial, sing up with Landbot (for free).

NOTE: If you are new to Dialogflow and would appreciate a more detailed account of the basics of using the software, check out our article guide to using Dialogflow and its integration in Landbot or check out a Dialogflow video course on Landbot Academy.

1. Build Your Dialogflow Agent

First and foremost, you need to create your Dialogflow agent.In short, “agent” is Dialogflow is, essentially, the bot you are building. Its main building components are intents which help the agent identify what the user actually wants to do.

Each intent requires training phrases (all the different ways a user can ask for the same thing) and, of course, the responses (always create more variations to keep repeat conversations natural.Go to Dialogflow Console and simply click to create a new agent.

Next, create the name, pick the time zone and language for your agent.

When all that is set up, go to the intents section using the menu on the left and start creating the intents. For the purpose of this article, we created a simple agent which allows book and cancel appointments as well as check on opening times.

At this stage, we simply focused on creating the conversational side of intent fulfilment as we will be handling the rest of it (such as integrations) in Landbot.

2. Create a Bot in Landbot

Once you are in the Landbot dashboard, simply click on the “Build a Chatbot” button in the upper right corner of the interface and, when the channel selection pop-up appears, select WhatsApp/Messenger as the channel.

After this, you will be redirected to the template library, but don’t worry about that. Instead, click the “Start from Scratch” button:

Before you are able to access canvas, there'll be an instruction pop-up prompting you to set up your test WhatsApp channel to be able to test your bot as you build it: 

If you wish to set up the WhatsApp testing channel later, simply click "Build a multi-channel bot" to proceed to the bot-building canvas:

‍

3. Adjust the First Block

Landbot builder is often used to design structured rule-based setups that don’t rely on NLP but are incredibly flexible and powerful nevertheless.

NOTE: If interested to know more about rule-based capabilities visit the full guide to a rule-based bot for WhatsApp!

However, if you wish to rely on natural inputs, you need to make a few adjustments. The most important one is allowing the user to be the first one to talk.

As shown in the previous section, when landing inside the builder for the first time, there is a pre-set “welcome” block already in place. Delete it!

Once you do, you will see the following:

Click on the field and when the quick menu pops up, search for “Set Variable” block:

When the block editor appears on the left, set the “Create/Select a variable to modify” field to @welcome and “Type the Value” as ${body}

@welcome is the variable that stores the first user input by default. By setting its value to ${body} we are telling the bot to recognize a free user input on WhatsApp as the first activation message.

4. Integrate Dialogflow Agent with Landbot

Now it’s time to make things interesting and integrate Dialogflow with WhatsApp using Landbot.Draw an arrow from the “Set Variable” block and select “Dialogflow” from the features menu:

Now, to proceed any further, you need to upload the Google Project JSON key of your Dialogflow agent.If you have never done that before...Go back to the console > Open Agent settings > Click on the link in “Service Account” field:

You will be redirected to the Google Cloud Platform. Click on the three dots to open the options menu and select “Create key”.

When the window pops up, select JSON and click CREATE.

Now go back to the Landbot interface and upload the file! (If everything is OK, the tick sign in the upper right corner will turn purple.)

In step number two, you need to define what data (user input) you want to send from Landbot to Dialogflow. Since we defined that our user input will be saved under @welcome variable, the setup will be as follows:

Step three is all about identifying what kind of data you want to bring back from Dialogflow to Landbot. There are two major fields to define:

👉  Variable under which you want to save the agent responses you defined in Dialogflow

👉  Entities you want to pull from Dialogflow to Landbot (only if applicable)

However, you can go much deeper. By activating “Advanced Configuration” at the top of the Dialogflow block editor:

You can unlock and configure other key Dialogflow data such as context, payload, and query response:

👉  Response variable pulls in the agent response from Dialogflow to Landbot.

👉  Entities help you transfer individual pieces of information such as date, time, address, nationality, product choice.

👉  Output context, payloads (more for devs) and query response enable you to save, for instance, Dialogflow context or the name of the intent the agent identified and use them to set conditions and diversify the flow.

5. Understanding Dialogflow Integration

Once you finish the setup click SAVE.You will notice the chatbot Dialogflow integration block has three different outputs: green, yellow, and pink:

The bot takes the green output if the intent data was identified correctly; it takes the yellow output if the intent was identified correctly but in order to be fulfilled it needs the user to provide one or more required entities; Last but not least, the assistant takes the pink output when the agent fails to identify the intent (fallback).The simplest integration of the Dialogflow agent will look like this:

Draw an arrow from each output select the “Question: Text” block and instead of a static question insert whatever variable you chose to represent the DF agent’s responses (e.g., @df_response). Save the user answer under the same variable as before (@welcome), save the changes and loop the block back to Dialogflow. Do so for every block and you are set.

For instance, in the reservation sequence below, the bot identifies the intent correctly as an attempt to make an appointment. However, because there is still one required entity missing, it passes through the yellow route. Thus, when the conversation loops back to Dialogflow, it stays within that same intent and asks for the missing entity. Only after both entities are collected, the user sees the final response.Dialogflow setup:

End-user experience:

6. Use Dialogflow Params Brick for More Complex Operations

Besides the individual blocks you can use to put together a WhatsApp-Dialogflow chatbot, Landbot also offers Bricks. Bricks are clusters of blocks that you can save and reuse as many times as you want. You can either make them yourself to simply use pre-designed ones from Landbot bricks library:

One of the bricks available, which is particularly useful when working with Dialogflow, is “Dialogflow Params”. It’s a pre-designed system brick that helps you convert and clean the advanced Dialogflow data such as output context, payload, and query-response from an array to a format you can leverage in Landbot. It does so using Formulas feature that enables Excel-like calculations and processes:

The brick contains 5 setups:

• Output context array into output context string
• Payload to whatever payload param you were using
• Query response into the intent name
• Query response into a confidence score
• Query response into language code

How can you use this data to your advantage?

For instance, we wanted to pull the Dialogflow intent. So, we deleted all the other blocks in the brick we didn’t need and configured the one converting @query_response to @user_intent:

(Make sure to create the output variable - the brick proposes a name for it but you still have to click “Create” to activate it)Also, make sure you have specified the output data you want to convert in the Dialogflow integration block:

You may have noticed that the Dialogflow Params brick contains a large Message block.

As the notes inside the brick suggest, it purely exists for troubleshooting and testing purposes. So, once you make sure the formula you selected works correctly, you can delete it.Below you can see the bot correctly identify “Hi” as being “Default Welcome Intent”:

Knowing the name of the intent can help you set up additional processes within Landbot using Conditional Logic:

If the @intent_name variable EQUALS to “Make an Appointment” you can divert the flow to pass through your CRM or another integration that sends you a Slack notification or an email notification to let you know about the new booking.For example, we decided to use the identified intent and upload the appointment data to a spreadsheet before looping back to Dialogflow:

See it in action:

However, there are so many other ways you can use Dialogflow parameters to your advantage.

For instance, to improve:

‍👉  Customer experience, you can redirect all intent matches with confidence below 0.6 to a human agent

‍👉  Data collection, once a context is identified you can switch to a structured rule-based path until you have what you need to minimize NLP errors and only the loop back to Dialogflow

‍👉  User experience by easily adding rich elements such as videos, images, and files to the conversation and splitting bot answers into multiple bubbles - without coding. (For instance, your DF agent recognizes the intent as a request for more information about your company or product. It provides a response but as your Landbot setup also recognizes this intent, it redirects the user on a path containing a video or a custom audio message. Once the intent is fulfilled it loops back to the NLP set up to continue the conversation)

7. There are Always More Tricks

When it comes to Landbot, there is always more you can do for your Dialogs For-WhatsApp assistant.A good example is the “Business Open/Closed” brick. Using a webhook which is already set up, it can help you direct your customers outside office hours. All you need to do is adjust the opening times inside the webhook to reflect your business:

As you can see, you can easily identify:

• Timezone
• Closed dates
• Spacial hours on selected dates
• General opening times

To set it up, connect the “Open” output with a Human Takeover block (yes, it’s that easy!) and create an alternative path for the “Closed” output.

In this case, we are asking the user to leave a message which will be sent to the team in the form of an email notification.If your business is open, your agent will receive a notification via the centralized multi-agent chat manager.

Provided the business is open, from the user perspective the handoff will look like this:

From an agent perspective:

However, if the business is closed, the bot directs the user down an alternative path asking him or her to send a message/ticket to be dealt with when the business opens:

To Wrap Things Up…

To be honest, this article could go on and on because the possibilities are endless. Landbot gives you a unique opportunity to personalize and level-up your NLP WhatsApp assistant without adding much time and cost to the development process. It’s an opportunity to turn your WhatsApp message strategy into something more.

Chatbot developers and no-code makers alike have a lot to gain.

If you would like to give it a try, sign up (for free - no credit card required) and try all the features in a free trial!