Dialogflow Integration with Facebook Messenger

Abhijeet Singh Verma
5 min readDec 17, 2020

We develop chatbots or virtual agents in order to automate the responses or to assist your users well, but at the same time, we want them to be available to a wide variety of users. In this blog, I'll guide you guys on how to integrate your Dialogflow virtual with Facebook messenger and providing all the necessary setups involved in the integration.

But before we get started let's have a look at what all we need to perform this integration.

Dialogflow Virtual Agent
We would require to create our virtual agent using Dialogflow. To create a virtual agent using Dialogflow you can follow this quick start.

An App on Facebook For Developers platform
In order to perform the integration, we would require an app on the Facebook App Development platform to consume its products like webhook and messenger.

Now that we have all the necessary components in order to continue with the integration so let’s get started.

Getting Started

  1. Open the Facebook app development platform create a new app.

2. Once your Facebook app is created in the dashboard section select the messenger product and click on setup

3. Now you can browse to the setting section of your messenger product and scroll down to the Access token section then click on the create new page button (optional) to create a new Facebook page on which you need to integrate your Dialogflow Virtual Agent or you can use an existing page also.
Once you are done with setting up your page click on the Add or Remove Page Button.

4. After you have added your page successfully in the messenger product you’ll be able to see an option to generate token.

Click on the generate token button, copy the token, and save it for further use.

5. Now open your agent in the Dialogflow console and select integrations from the left panel. Then enable the toggle button for Messenger for Facebook in the integrations section.

6. Now click on the Messenger from the Facebook card. You have to provide a Verify token (which can be any string) and remember not to share it with anyone. Next, provide the page access token we generated in step 4 and copy the callback URL.

7. Click on the Start button. On successful integration, you will see a Bot was started message.

8. Now Navigate back to your app at the Facebook App Development platform. Scroll down to the webook section in the messenger product setting. Click on the Add Callback URL button paste the Callback URL we have copied from the Dialogflow console and also provide the same verify token we provided in the Dialogflow console while integration then click on verify and save.

9. After that you’ll be able to see your Facebook page with an option of Add Subscription.

On clicking that you’ll be able to see different available subscription fields, select messages, and messages_postbacks subscription fields, and click on save.

Hooray!!! we have successfully completed the integration.

Now to check your integration follow the steps given below.

  1. Go to your Facebook page which you have used for integration.
  2. Click on Add a Button.

3. Select Send Message Action for the page visitors to take.

4. Now select the option to view as visitor.

Then click on Send Message. The messenger widget of your page will pop up.

Now you can chat with your virtual agent and see that the responses are automated using Dialogflow. Below you can see a sample conversation created using Dialogflow.

For making your app public so any visitor on your page can chat with the bot you can submit your app for review, once reviewed it will be available publically for all your users.

Here we have successfully integrated and tested our Dialogflow Virtual Agent with Facebook Messenger. Using this we can make our virtual agent available to a wide variety of users and help our business grow.

😊If you liked my blog and found it helpful, please hit the little clap 👏 and press the follow button. This will encourage me to bring to you more articles of this kind. If you have any questions, feel free to use the comment box :).

Thanks for reading😊.

--

--

No responses yet