A guide to building WhatsApp chatbots using Dialogflow and FireBase | by Aissam Outchakoucht | Towards Data Science

ChatBots are conversational agents, programs capable of conducting a conversation with an Internet user. In this tutorial I’ll walk you through an implementation of WhatsApp chatbot using Twilio platform.
In addition to static chatbots, we will also benefit from the power of Google’s Dialogflow to create intelligent bots, capable of understanding human language.
WhatsApp is the most popular OTT app in many parts of the world. Thanks to WhatsApp chatbots you can provide your customers with support on a platform they use and answer their questions immediately.
Using Twilio, Flask and Heroku, as well as many other advanced platforms like DialogFlow, we can build amazing chatbots as we will do in this tutorial.
Twilio is a cloud communications platform as a service (CPaaS) company which allows software developers to programmatically make and receive phone calls, send and receive text messages, and perform other communication functions using its web service APIs.
With the Twilio API for WhatsApp, you can send notifications, have two-way conversations, or build chatbots.
For free, and without waiting for your Twilio number to be approved for WhatsApp, Twilio Sandbox for WhatsApp enables you to create your chatbot immediately as we are about to see in this project.
1. Create a Twilio account
2. Create a new project
3. On project console, open Programmable SMS Dashboard
4. Select WhatsApp Beta
When you activate your sandbox, you will see the phone number associated with it (here +1 415 ...) as well as its name (here regular-syllable)
1. Create a new Python virtual environment :
In a new folder open terminal and execute : python -m venv myvenv
2. Activate your virtual environment :
Windows : myvenv\Scripts\activate
Linux : source myvenv/bin/activate
3. Install these two Python packages :
Twilio : pip install twilio
Flask : pip install flask
Flask is a micro web framework written in Python. This means flask provides you with tools, libraries and technologies that allow you to build a web application.
4. Create a Flask App :
In your folder, create a file named app.py then copy&paste the following code:
from flask import Flask, requestfrom twilio.twiml.messaging_response import MessagingResponseapp = Flask(__name__)@app.route("/")def hello():    return "Hello, World!"@app.route("/sms", methods=['POST'])def sms_reply():    """Respond to incoming calls with a simple text message."""    # Fetch the message    msg = request.form.get('Body')    # Create reply    resp = MessagingResponse()    resp.message("You said: {}".format(msg))    return str(resp)if __name__ == "__main__":    app.run(debug=True)
This is a basic flask web app which enables us to get Hello, world! in / route, and get back our message if we POST it to /sms route as we can see in the following steps
5. Run the app : python app.py
Your application is now running.
You can check that by typing http://127.0.0.1:5000/ in your browser. (You'll get Hello, world!)
However, it wouldn’t be possible for distant machines to access your app, hence the need for Ngrok
Ngrok will enable us to have a public URL for our application running locally.
1. Download Ngrok and unzip it
2. Run it from the command line by executing : ./ngrok http 5000
3. Now you can access your app running locally from a distant machine using the provided URL (something like this https://******.ngrok.io)
4. Go back to Twilio sandbox and paste it as the URL for incoming messages :
5. You can now open WhatsApp in your phone, add the number you’ve got from Twilio in previous steps (+1 415 ...), and start the conversation by the code they told you to start with (here join regular-syllable)
6. You can now send whatever WhatsApp message you want and the bot will reply by sending back the same message. It is kind of a parrot bot 😃
However, we still have a major problem here, your machine should remain running all the time to allow the application to answer users’ requests.
Thanks to Heroku we will be able to deploy our application, and all the requirements it needs to run effectively, in the Cloud. Hence our machine will benefit from the luxury of being turned off. To do so we need to :
1. In our virtual environment, install gunicorn: pip install gunicorn
2. Create these files in your folder :
Procfile: then save this content in it web gunicorn app:app
runtime.txt: then save this content in it python-3.7.2
requirements.txt: You can simply type pip freeze > requirements.txt to fill it with all 3rd party libraries required by your app.
.gitignore: then save this content in it
myvenv/*.pyc
3. Download & install Git; then in your virtual environment:
Initialize a new git repository in your project folder : git init
Add all untracked files to git repository : git add .
Commit the changes to git repository : git commit -m "first commit"
4. Create a new Heroku account if you don’t have one. Then download Heroku Command Line Interface (CLI) which makes it easy to create and manage your Heroku apps directly from the terminal.
5. Connect to your Heroku account from your virtual environment using heroku login then you will be forwarded to a web-based interface in the browser to complete the authentication phase.
6. Create a new Heroku app heroku create <app-name>
7. Deploy your app by pushing your local git repository to the remote Heroku app’s git repository : git push heroku master
Finally, when the deployment is done, you will see in the terminal the address where you can reach to your app. -something like https://<app-name>.herokuapp.com/sms- Copy it and go back to your sandbox to replace the Ngrok URL by the new Heroku one.
Congratulations your parrot WhatsApp Bot is now running 24/7, it does not need assistance from your machine anymore 😃 you can turn it off.
Say, you come up tomorrow with another idea rather than this parrot bot which you’ve made, all you need to do is to make the changes in your code (in the file app.py. You can also add more files if the project is complex) then:
# connect to your virtual environment<virtual_environment_name>\Scripts\activate #Windowssource <virtual_environment_name>/bin/activate #Linux# connect to your heroku accountheroku login# prepare all the modified files and push them to Herokugit add .git commit -m "first change"git push heroku master
⚠️ In case you have installed new packages in your virtual environment, you have to tell Heroku about them by updating the file requirements.txt too: Just type pip freeze > requirements.txt before git add . to do so.
If you want to create a serious business WhatsApp bot, the approach I presented earlier presents two drawbacks for you :
(1) In order to use the bot, your clients must kick off the conversation with a certain bizarre message 😑 (here join regular-syllable);
(2) The bot comes up with the logo of Twilio instead of yours.
This is due to the fact that we used the Twilio sandbox and the number we were provided with is not ours. However, Twilio offers you the possibility to own a number and consequently get rid of the aforementioned problems. To do so, here are the steps you need to follow :
Step 1: Buy a Twilio number
Step 2: Request access to enable your Twilio number for WhatsApp by filling out Twilio’s “Request Access” form (make sure you have your Facebook Business Manager ID beforehand)
When your request will be approved, Twilio will notify you by an email which will walk you through the next steps to follow for submitting your sender Profile and WhatsApp Message Templates, then another email will show you how to approve Twilio to send messages on your behalf and to verify your Facebook Business Manager account.
So, after sending the request, make sure you check your emails frequently for the next steps. The whole process takes 2 to 3 weeks.
Further information about the process
So far, we created a chatbot which have the capability to manage simple conversations and repeat what one says😅 isn’t that cool 🙄. Actually, what we focused on in previous sections is to have this bot working over the popular chat platform WhatsApp.
In fact, we didn’t use any of our data to train or personalize the bot. In this section, we will train and fine-tune our chatbot and have it interact with the backend. Let’s take a shopping/delivery store case study for instance.
A Dialogflow agent is a virtual agent that handles conversations with your end-users. It is a natural language understanding module that understands the nuances of human language. DialogFlow’s agents use Intents to categorize end-user intentions for each conversation turn and Entities to identify and extract specific data from end-user expressions (We’ll use them to send data to the backend).
So first things first .. Login into DialogFlow Console and create a new agent .. In the left-side menu, you can enable “Small talk”. Basically your bot is now able to automatically handle the ‘hi, hello, how are you, bye, ...’-kind of things. Try it! (there is a “Try it now” section in the right)
When an end-user writes or says something, Dialogflow matches the end-user expression to the best intent in your agent. In order to do that, your agent have to be trained on some training phrases (example phrases for what end-users might say). When an end-user expression resembles one of these phrases, Dialogflow matches the intent. You don’t have to define every possible example, because Dialogflow’s built-in machine learning expands on your list with other, similar phrases.
In your left-hand menu, select Intent and create a new one.
In the training phrases section, add some expressions that will trigger this intent. While you are adding them you will see that some entities are automatically highlighted (like location or date-time etc); you can also add custom entities if you want.
Under the action and parameters section, you can mark some entities as required so that the agent will always ask for them when the intent is triggered. Note that if you mark a parameter as required you have to add the question(s) the agent will ask end users in the prompts column.
Moreover, you have to possibility to add a default answer(s) under the Responses section or let the back-end generate custom answers.
We’ll be using Google’s Firebase real time database, which is a cloud-hosted NoSQL database that lets you store and sync data between you and your users in real time using JSON format.
1- Go to Firebase website and add a new project.
2- In the left-hand menu, select Database then choose realtime database in test mode.
In order to be able to access your DB, add and delete data, you have to have the DB credentials.
3- Click on the gear icon next to the Project overview, then select Project settings. In the Firebase SDK snippet choose config and copy the credentials in a separate file in your computer.
4- In your computer/virtual environment, create an app.py file and import these credentials, together with other useful libraries.
5- Add your products and their characteristics to the realtime database:
5.1. In a separate file configure the authentication to Firebase:
import pyrebase            #install pyrebase first using pip installfrom firebaseconfig import config # firebase credentialsfirebase = pyrebase.initialize_app(config)db = firebase.database()
5.2. Prepare your products in JSON format and add them to the DB using the following commands:
prod1 = {"ID":"0","order":"0","number": 10,"color": "black","size":"S","address":"-","date":"-"}# add a productdb.child("products").push({"shirt":prod1})# update a productdb.child("products").update({"shirt":prod2}) #define prod2 before# remove the whole chain of productsdb.child("products").remove()
You can check (in realtime) your DB’s web interface to see the updates you are making.
In the usefulfunction.py file, we define the functions we are about to use in our implementation, among them there is the is_available() function, which checks whether a given product exists in the realtime DB
The characteristics of the user’s order come from Dialogflow in a JSON format. The following function extracts these characteristics and checks whether there is a product satisfying these requirements.
You might note the presence of two undefined functions: all_fields() function just checks if all the required fields are filled by the end user, while the location_format() function adapts the format of the location variable to a readable one.
In your file app.py we set up the Flask API.
The / main root shows just a hello world .. Professionals have standards ;)
The /check path is where we receive the POST request, extract data from Dialogflow, process it, check the availability of the product in the realtime DB and reply the user always using JSON format.
Now, you can run the app.py locally and use Ngrok to get a public address, or push your application to Heroku as we’ve done previously.
In Dialogflow, by default, your agent responds to a matched intent with a static response. In order to use dynamic answers, you have to enable the fulfillment option.
Go back to your Dialogflow console, in the left-hand menu click on fulfillment, enable webhook, change the URL to the one where your app is hosted and save the changes.
When an intent with fulfillment enabled is matched, Dialogflow sends a request to your webhook service (backend app) with information about the matched intent.
Now go to the intent you’ve created previously (under the Intents section), on the bottom of that page you’ll see a fulfillment section, enable webhook call for intent and for slot filling.
Congratulations .. Your chatbot is now running as expected, check it under the Try it now section.
When an end-user starts a conversation with the chatbot, this latter tries to match the incoming expressions to one of its Intents. When it manages to do so, it will try to fill in all the required entities, and it sends all these entities (the characteristics of the product in our case) to the link we mentioned in the Fulfillment section.
After our Flask web application receives the characteristics, it verifies if the requested product is available in the database, and if so, it adds the command in the Firebase RT DB. Then, an appropriate response is sent to the end-user.
You can follow the steps mentioned in the above sections to use this chatbot on WhatsApp, just as you can use the DialogFlow’s Integration option to integrate it with Facebook Messenger, Slack, your own website and many other platforms.