Chatbots are a computer program that simulates a conversion between the user and computer through auditory or textual methods. We are going to understand how to integrate a Dialogflow Chatbot with Facebook Messenger in this blog.

Few steps involved in the integration of a chatbot with Facebook messenger are:

  1. Create your Dialogflow bot.
  2. Create a Facebook page.
  3. Create an App in Facebook Developer Account.
  4. Connect your Facebook App with Dialogflow Agent.
  5. Test the Chatbot on Facebook Page or Messenger.

Let’s start.

Create your Dialogflow Agent

  • The first step is to create your Dialogflow agent. For this, you need a google account to login to Dialogflow.
  • Click on the CREATE AGENT button to create agents.
  • Let’s give a name, for example: FacebookMessengerBot. Then click on the CREATE button.
  • After the agent gets created, the page is redirected to the indents page.
  • In the Indents page, you can see a Default welcome indent and Default fallback indent. There are already some training phrases and some text responses if you see the welcome indent and fallback indent.

Create a Facebook Page

  • Log into your Facebook account. Click on pages and click on the create page option and give any name and category that you want. Thus you created a test page in the Facebook account.

  • Add a send message button on the page that will be your Facebook messenger button.
  • If you will test the button by click on it, it will open the messenger chat but will not respond to your messages by the bot because you did not integrate the Dialogflow agent to this app.

Create an App in Facebook Developer Account

  • Click on the Create App button.

  • Choose a name for the app and enter your email id. There will be a security check for finishing this procedure. Thus you created your app in the Facebook Developer account by submitting the security check.

Connect your Facebook App with Dialogflow Agent.

  • Click on the PRODUCTS button and setup Messenger.
  • After clicking on the setup Messenger button, you will go to the above-given page. You will have to do some things here. First of all, switch back to your Dialogflow agent. Click on the INTEGRATIONS button on the sidebar menu and use Messenger From Facebook.

  • On clicking that button, you will redirect to the below-given page.

  • Follow the steps given in the image.
  • You can get the Facebook Page Access Token from the Facebook developer account. Create the token from the page’s option by selecting the Facebook page that you just created. Thus you create the page access token, copy that and paste it in the Page Access Token field. Just give any name that you wish in the Verify Token field and provide a secure name. Then click on the START button. Thus your bot gets started.
  • Then go back to the Facebook Developer account, you can see a webhooks section. Paste the Facebook Verify Token that you created in there. Also, paste the callback URL from the Dialogflow agent to the Facebook developer account.
  • Check messages and messaging_postbacks checkboxes.
  • Finally, click Verify and save.
  • Also, select the Facebook page you just created in the webhooks section to integrate with the Dialogflow and click on the subscribe button. Thus you connected the Facebook page with the Dialogflow agent.  

Test the Chatbot in Facebook Page or Messenger

  • Click on the Facebook page. Click on View as Page Visitor from the options in the top bar. This chatbot will not be publicly accessible. That means only admins or one who created the Facebook app can chat with the chatbot. You need to publish the app to make it available to everyone.
  • Then hover on the send message button and click the test button option. Then proceed with the chat with the intents that you have given in the Dialogflow agent.
  • Now our Dialogflow agent is connected with the Facebook chatbot.