How to integrate Dialogflow with Messenger?

How to integrate Dialogflow with Messenger?

Today I’d like to show you how to integrate Dialogflow bots with Messenger. Messenger is one of the most popular communicators in the world, so it is reasonable to have integration with this sort of platform.

Dialogflow allows us to integrating bots with other platforms, such as:

  • Google Assistant
  • Slack
  • Viber
  • Twitter
  • Twilio
  • Skype
  • Telegram
  • Kik
  • Line
  • Amazon Alexa
  • Microsoft Cortana

What does such a large amount of integrations mean? The main advantage is the fact that one chatbot can be run on many platforms and it doesn’t require extra effort to adjust it to them.

Creating an application on Facebook

The first steps we need to take to integrate the chatbot with Messenger are:

  • Creating a Facebook account
  • Creating a Facebook Fan Page, to which we will integrate a Dialogflow agent

Once we have a Facebook page created, we need to add a Facebook application. To do this, we have to take the following steps:

  • Log in to  Facebook Developer Console
  • Click My Apps menu and choose Create App
  • A pop-up should appear. Provide the name of your application and click Create App ID.
  • On the next page select Set-up Messenger (Messenger should appear under submenu – Products)
  • In the Messenger settings for the newly added application, select the page where to connect the agent and generate a token for it
How to integrate Dialogflow with Messenger?
  • Copy generated Access Token (we’ll need it soon)

Dialogflow’s configuration

Then we should go to Dialogflow console and finish Messenger integration:

  • Open Integrations tab
  • Select Messenger
  • After clicking, a pop-up
    with information to be completed should appear (Access Token, etc.)
  • Paste Page Access Token 
  • Set Verify Token  (it will be used to verify our agent)
  • Copy Callback URL (it will be useful later)
How to integrate Dialogflow with Messenger?

Webhook

The next step will be the configuration of webhooks in the Facebook application. Follow these steps:

  • Back to Facebook console
  • Go to Webhooks section in Messenger section
  • Click Subscribe to events
  • Paste Callback URL (copied from Dialogflow)
  • Fill selected Verify Token
  • Select events: messages i messaging_postbacks
  • Click Verify and Save
  • Webhook should be added correctly

Our chatbot is now ready for use. Indeed, the application is not yet published, and only a limited group of people have access to it (those who have the right role), but we now we can start testing our Dialogflow bot.

To verify that the application has been integrated correctly, we can search our site on Messenger and start a conversation. As a result, the chatbot should respond with a default greeting.

How to integrate Dialogflow with Messenger?

As you can see, the integration worked correctly – the site started responding via the Dialogflow agent.

Share: