Dialogflow Tutorial – Create Facebook Messenger Bot Using Dialogflow Integration

Chatbots, Python Development, Machine Learning, Natural Language Processing (NLP)

There are multiple chatbot development platforms available if you are looking to develop Facebook Messenger bot. While each has their own pros and cons, Dialogflow is one strong contender. Offering one of the best NLU (Natural Language Understanding) and context management, Dialogflow makes it very easy to create Facebook Messenger bot.

In this tutorial, we’ll see how to integrate your Dialogflow agent with your facebook page. If you haven’t created a Dialogflow agent then first you need to create it (here is a detailed Dialogflow tutorial on how to develop Resume Chatbot) or if you already have one then let’s get started.

Create Facebook Page

First of all, we need to create a Facebook page. Open https://www.facebook.com/pages/ and click on Create Page button.

On next page, select the page type and click on Get Started

Select the page name, page category and click on Continue to create page. Optionally upload profile picture and cover image for fb page.

Create Facebook App

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.

Provide App name and Email id and hit Create App ID button.

Click on Skip button on the next step and App will be created.

Connect Facebook Page to the App

Our Facebook app is created, now we need to connect our Facebook page to the app. For that, we need to generate Page Access Token.

Clicking on PRODUCTS on left side bar will open a page with many options. Under “Add A Product” section, select “Set Up” for Messenger.

Now, select the page you want to connect from the Dropdown.

And our Page Access Token is generated. This will be required in next steps.

Enable Facebook Messenger Integration in Dialogflow

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

Clicking on Toggle of Facebook Messenger will open up a popup. In this popup we need to provide the Verify Token which can be any random string. We also need to provide the Page Access Token of Facebook App which we generated in earlier steps.

After filling up Verify Token and Page Access Token click on “START” button which will activate the Dialogflow webhook for our agent.

Setup Webhook in Facebook App

We are done with configuration of Dialogflow agent. Now, we need to setup webhook in Facebook App which will communicate with Dialogflow Agent.

To setup webhook, open Settings page of Facebook App and click on “Setup Webhooks” button.

Clicking on Setup Webhooks will open up a popup window where we need to input Callback URL, Verify Token and select Subscriptions which we will require for our bot.

To copy Callback URL and Verify Token from the Dialogflow agent, open Integrations page and click on Facebook Messenger. That will provide us with the required values. Copy from there and paste it in the popup.

For Subscription Fields, “messages” and “messaging_postbacks” are sufficient to get started with basic bot. So, we select only those 2 for now.

Next step in Webhook Setup is selecting the Facebook Page to listen to the events. Select the page from Dropdown and click Subscribe.

Activate Facebook App

Now, last step in configuration is to Activate the Facebook App. To do that, browse to Basic Settings of the page (from left sidebar) and provide Privacy Policy URL.

Another mandatory setting is selecting category. Clicking on “Choose a Category” will open up a popup where we can select appropriate category of our app.

Minimum required settings of App is in place. Click on Save Changes to save the settings and then click on Status toggle of app to activate it.

We are done with all the settings! Time to test the bot on our page.

Setup Message Button Facebook Page

Open your Facebook Page and click on Add A Button.

It will open a popup. In first step, select “Send Message” and click Next

In second step, select “Messenger” and click Finish.

You will see “Send Message” button on the page now. Your visitors can click it and start chatting with your page. As you are admin, you will need to mouse over the “Send Message” button and click on “Test Button” option.

It will open up the chat window. Click on “Get Started” button and you should receive the Welcome message of your Dialogflow agent.

Awesome! The bot is working now!

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.


Bot is not live for visitors yet

Please keep in mind that this bot is not yet live for your page visitors yet. You can access it as you are admin of the page. To make it available for your visitors, you will need to go through Messenger Bot approval process of Facebook. We’ll cover that approval process in next tutorial.


Do let us know your feedback about this tutorial in comment section. Also, you can post your doubts in comments section if you have any question or get stuck anywhere. We would love to provide further help.

Do share the tutorial if you found it useful.

13 Responses

  1. Tan Zi Jing says:

    How to set up the get started button

  2. ckr says:

    Hi,

    I did all the mentioned steps and activated my app. Next I go to the facebook page and not able to see “Add a button” under the cover page. I checked everything but not able to figure out what is the problem. Please help. Thanks

    • Hello CKR,
      Make sure you are the admin of the page. If you have already added a button then mouse over the existing button and you will see Edit Button option there.

      Hope this helps. If not, then kindly share the screenshot of the page.

      Thanks

  3. Arwa says:

    Thank you so much for the AMAZING super easy tutorial ?????? I’m waiting for your next tutorial to make the bot public ???

  4. Aditya says:

    how to setup the news chatbot which updates user with news of different category that can be imported via rss feeds.

    • Hello Aditya,
      For that, you can create a conversation flow using Dialogflow and to provide with news updates, you will need to create webhook in your preferred language. Using webhook, you can pass on the data from your server to user conversation.

  5. Johan says:

    Hello! Great tutorial. Did you publish the next step for that approval process?

  6. Pilar says:

    Hey guys, thanks for this amazing tutorial, however I’m a little bit confused. What’s the main difference between use this approach and use the library? I saw few examples using the library and adding this:

    import dialogflow
    from google.api_core.exceptions import InvalidArgument

    DIALOGFLOW_PROJECT_ID = ‘xxxx-xkxcta’
    DIALOGFLOW_LANGUAGE_CODE = ‘en-US’
    GOOGLE_APPLICATION_CREDENTIALS = ‘credentials/google-credentials.json’
    SESSION_ID = ‘yana-user-id’

    So I don’t understand how do you use the credentials as suggested by Google.

  7. porton07 says:

    Bots answered only the owner But others don’t answer

Leave a Reply

Your email address will not be published. Required fields are marked *