Connecting DialogFlow with Facebook application | Messenger Chatbot
Introduction
This tutorial is about connecting Dialogflow with Facebook application. The key part of this tutorial is to train questions and responses using Dialogflow and assisting answering questions asked by users on facebook page using bot. We will proceed step by step like creating Facebook account, creating Facebook page, creating an app in Facebook developer account, creating Dialogflow account as well as training phrases and responses. After this, there will be guidance on how to connect Dialogflow with the Facebook application. Visitors will ask the questions to the messenger on the Facebook page and Dialogflow bot will answer the question. I will hope that readers will gain some useful insights after reading this tutorial.
Creating Facebook Developer Account
One needs to create a Facebook account for this. Once an account has been created type the url https://developers.facebook.com/ on your favorite browser and log in with Facebook account created above. One can see the screen like below
Creating Facebook Page
The next step is to create the Facebook page because in the end, visitors will interact with the bot from this page. I had created my own whose screenshot I am adding below. You can upload the profile image and cover photo. Have a look at the below screenshot
Figure 2: Creating Facebook Page
Creating Facebook Application
Create Facebook application. To create a Facebook application, sign in your Facebook developer account and click on My Apps. From the drop-down menu, click on Create App. One needs to create a new app id from the pop-up windows appearing. Have a look at the below screenshot
Figure 3: Creating a New APP ID
After filling the details and performing a security check, one can get the dashboard of the newly created app as below.
Figure 4: Facebook Application dashboard
Creating Dialogflow Account
Since Facebook messenger will send a query to Dialogflow which will return the response to it. Hence, one needs to create a Dialogflow account. To sign in in dialogflow one can you google account to sign in. Once you sign in, you will see the below screenshot
Figure 5: Google Dialogflow
Integrating Facebook application with Dialogflow
Step 1- Login to your newly created app using a Facebook developer account.
Step2 — Set up Messenger product which one can see in the dashboard. If one is facing any doubt in this step have a look at the below screenshot
Figure 6: Setting Messenger in the Facebook application dashboard
Step 3 — When one clicks on Set Up, a new page will appear and just proceed to Access Tokens and add the Facebook page there. Have a look at the below screenshot
Figure 7: Facebook Application accessing Facebook page permissions
Now, after clicking on Done, one can generate the token. See the below screenshot
Figure 8: Generating token for Messenger Product added in Facebook Application
Step 4 — Token generated is to be copied to Dialogflow so that it can communicate with the messenger. Sign in your Dialogflow account again if it is signed out and go to Integrations option which is present on the left side of the Dialogflow. Turn on Facebook Messenger. Have a look at the below screenshot
Figure 9: Facebook Messenger Integration in the Dialogflow
Step 5 — Paste this token in the pop-up window which opens when you click on Facebook Messenger in Dialogflow. Also, create a verify token there. Have a look at the below screenshot
Figure 10: Facebook Messenger Integrations from Google Dialogflow
Step 6 — Copy CallbackURL and Verify Token from above and go to webhooks inside the settings of messenger (Facebook application). Paste the callback URL and verify token there. Have a look at the below screenshot
Figure 11: Pasting CallbackURL and Verify Token inside the webhook section of Messenger in Facebook Application Dashboard
Step 7 — Go to Pages inside the webhook and tick the below two fields. Have a look at the below screenshot
Figure 12: Edit Page Subscriptions
Training Bot in DialogFlow
Go to Dialogflow and create an agent there. You can choose any name that you like. You will see two default intents named as
- Default Fallback Intent
- Default Welcome Intent
Intents are the main idea of the text or phrase with which you are training the bot. Like if you are training the bot to respond to query like where do you live, location can be intent. You will see the below parameters for an agent named Training phrases, Action and parameters, Responses, and fulfillment. Have a look at the below screenshot.
Figure 13: Options available with an agent
One can train phrases. Please create an intent name for the training phrases. For single intent (like location) there may be different training phrases and different text responses. Like if you need to train it with the training phrase location, you may write below sentences
- Where is your location?
- Where do you live?
- Where do you reside?
- Tell me your location
In the same way, there may be multiple responses. Have a look at the below responses
- I live in Malout.
- My location is Malout.
- Malout is the place where I live.
Note: Please remember to select the Facebook messenger for the responses. Have a look at the below screenshot
Figure 14: Selecting Facebook Messenger for the response in Dialogflow
Doing the first Conversation with Bot
Everything is set. It is time for more fun. Let us have our first conversation with the chatbot. Go to the Facebook page and click on View as Page Visitor by clicking on three dots. Have a look at the below screenshot
Figure 15: View as Page Visitor in Facebook Page
Click on the send message button appearing on the right-hand side and start chatting with the chatbot with the question one has trained in the dialogue flow. Have a look at the below screenshot.
Figure 16: Chating with the bot
Conclusion
In this tutorial, I have tried to show how to connect Dialogflow with Facebook Application. Conversation with the Dialogflow bot has been done at the end. Every step is explained with proper steps. If readers face any problem in any step please feel free to ask questions in the comment section.
