How to Integrate DialogFlow to Facebook Messenger

This is a quick and easy step-by-step guide for the first-time DialogFlow chat bot builders with no programming background to integrate their DialogFlow chat bot to Facebook Messenger.

In order to set up the Facebook integration for your agent, you’ll need a Facebook account, and a DialogFlow agent. Here we will carry on with the assumption that you already have them.

Create a Facebook App

1. Log into the Facebook Developer Console.
2. Click on My Apps in the upper right hand corner.
3. Click on Create App

Click on My Apps, then Create App (marked in orange)

4. Enter a name for the app and contact email address

5. Click Create App ID

Enter the name and email in the pop up section, then click Create App ID (marked in orange)

6. On the left side of the next page, click the add button beside PRODUCTS

7. Click Set Up in the Messenger card of Add a Product section

Click the “+” icon, then click Set Up

8. In the next page, scroll sown to Access Tokens

9. (Skip this step if you are connecting your bot to an existing page)
If you want to connect your chat bot to an new Facebook page, click on Create New Page, then it will lead you to an new tab.
Follow the instruction to create an new Facebook page

Scroll down to Access Tokens section, then click on Create New Page

10. Go back to Facebook Developer Console tab, and click on Add or Remove Pages to add a Facebook page

11. Follow the pop-up window to confirm the Facebook account, then choose the Facebook page you’d like to connect your chat bot with

Scroll down to Access Tokens section, then click on Add or Remove Pages

12. Click on Generate Token to generate an access token.

13. After reading the information, check the I Understand box, then click Copy, and Done

Check the I Understand box → click Copy → click Done

Setting Up Dialogflow

1. Open DialogFlow Console in an new tab
2. Select the agent you want to connect to Facebook Messenger
3. Click on the Integrations option in the left menu and click to switch on Facebook Messenger

Select the agent, go to Integrations, then click to switch on Facebook Messenger

4. In the dialog that opens, enter the following information:

• Verify Token — You can assign any string to be your own verify token
• Page Access Token — Paste the token generated in the Facebook Developer Console, which we just copied

5. Click START

Create Verify Token, paste Page Access Token from Facebook Console that we just copied, then click START

6. Click on the copy icon in Callback URL to copy the URL

Webhook Configuration

1. Go back to your Facebook Developer Console tab
2. Click the Add Callback URL button under the Webhooks section (which is right under the Access Tokens section)

Click the Add Callback URL button under the Webhooks section

3. In the dialog that opens, enter the following information:

• Callback URL — Paste the URL provided on DialogFlow Console, which we just copied
• Verify Token — The token you just created in DialogFlow Console

4. Click Verify and Save

Enter Callback URL, Verify Token, then click Verify and Save

5. Click Add Subscriptions

Click Add Subscriptions

6. Check messages and messaging_postbacks under Subscription Fields, then click Save

Check messages and messaging_postbacks, then click Save

Testing

1. Open Facebook
2. Open your Facebook page by clicking the arrow icon on the top right side of Facebook. It should be listing in Your Pages section, or click on See More… to find it.

3. Click on the … button right beside Share, and select View as Page Visitor

4. Click Send Message, and the message box should pop up.

Your chat bot should be up and running! Congratulations! :-)

Make it Public

Now your chat bot is working for you… but only for you.
It will not be able to reply to other visitors unless you make it public.
Follow the steps below if you want to publish your bot:

1. Go back to your Facebook Developer Console tab
2. Enter Privacy Policy URL
   (If you need one, there are some privacy policy URL generators online. Here is the one that I used.)
3. Choose a Category
4. Click Save Changes

5. Click the switch on the bar and switch your chat bot to Live Mode

6. Sorry, not done yet…

You might think the green little ON and Status: Live means it’s already published to all the visitors, but no.

Unfortunately, toggling the Publish button will NOT make your bot public.
You need to submit your Messenger App to Facebook for reviewing in order to really make it public. Here’s Facebook’s submission guide. Once approved by Facebook, your chat bot should be able to work on your Facebook page Messenger smoothly for all the visitors!

Reference:
Google’s Guide
Blog Post — “Build a Personal Facebook Messenger Bot in 10 minutes with Nodejs and Standard Library”
GitHub — “Facebook Messenger Bot only replies me not others on my page”