Cloud Ace Blog

Nov 11, 2019 | GCP Tutorial

by Shivam Kohli

Developer

Deploy a Chatbot on Messenger using Dialogflow

Chatbot00

Dialogflow

A chatbot is an Artificial Intelligence-powered program that can answer user queries. Some of the most used applications are Messenger, Slack, Alexa, etc. The main purpose is to engage customers to answer their queries and later this data can be used to gather some important insights from it.

Many customers inquiries that are received revolves around the same types of queries, what sort of products do we sell, what services we have, etc. They are mostly questions that can be easily answered, but the repetitiveness and volume of these questions still mean it’s time out of your (or your staff’s) day to address them. But sometimes chatbots are only restricted to answer only some of the limited queries. To make it more intelligent and make it feel like a human, the chatbot should be trained on large data.

In this tutorial, we’ll see how to integrate your Dialogflow agent with your facebook page. So, let’s get started.

The first step would be to create a Facebook Page. To create a facebook page the best documentation available is https://www.facebook.com/business/help/104002523024878. You can go through this and create your own page.

 

Create a facebook app

The next step is to create a facebook app on the facebook developer page. To connect Dialogflow agent with Facebook Page, we’ll need a Facebook app. For that, go to https://developers.facebook.com/apps/ and create a new app.

You have to provide the App name and Email id and finally click Create App ID button.

Chatbot01

After creating your App. The following page will appear:

Chatbot02

Now we need to set up the Messenger. Click on “Set Up” button for the messenger.

When you click on setup, something like this will appear:

Chatbot03

If you haven’t created a Facebook page, you can click by adding on “Create New Page”. You can skip this if you have already have a facebook page or if have already created one.

The next step after this would be to link your facebook page with the App. To do this you need to click on “Add or Remove Pages”. After clicking this you will be prompted to another page and there you can authorise the page you want to select.

After linking the facebook page with the facebook app, the next step is to generate a Token. To do so simply click the “Generate Token” button and you are set.

 

Integrating Facebook Messenger in Dialogflow

Chatbot04

Integrating Facebook Messenger in Dialogflow

To publish Dialogflow agent on our Facebook app, we need to enable Facebook Messenger integration under the Integration tab of Dialogflow.

Go to the console of Dialogflow. You will need to create and an Agent and then something like this would appear.

Chatbot05

Go to the Integrations and the click on Facebook Messenger.

Chatbot06

You will have to enter the “Page Access Token and the “Verify Token”(anything you want to enter). Before clicking START, copy the “Callback URL”. After doing this click “START”.

Now We will go back to the Facebook App and now we will configure the Webhooks.

On your Facebook App console. Click on “Add Webhook” and something like this would appear:

Chatbot07

Paste the “Callback URL” that you copied and the “Verify Token” that you created. Click “Verify and Save”.

After this, you need to “Subscribe” the page for this Webhook. Select the page and Click “Subscribe”.

If you don’t receive the message then make sure that Default Welcome Intent has Facebook Welcome added as Event. Also, confirm that the Default Welcome Intent has proper training phrases to invoke the intent. To do so you can go on the Dialogflow console and create them.

Finally, you are all set.

You created your Facebook Messenger chatbot in just 10 min.

We also publish articles on Medium. Read this article on Medium and follow us to see when we publish new articles.

Contact Us