Messenger from Facebook

Using the Dialogflow Facebook Messenger integration, you can create a Facebook Messenger bot to interact with your end-users.

How it works

This is how the integration works:

Setup

To set up the integration:

  1. Follow the steps to create a Facebook app: Facebook App Development.

  2. Set up the Facebook app to use the Facebook Messenger Platform. Follow the steps in the Setting Up Your Facebook App documentation to accomplish the following:

    • Add the Messenger Platform to your Facebook app.
    • Subscribe your app to a Facebook page. Make sure messages and messaging_postbacks are enabled in the page subscription.
    • You are provided with an access token at this step. Copy this value. This token will be used to configure the integration from the Dialogflow Console.
    • Do not configure the webhook or test your integration yet.
  3. Configure the integration from the Dialogflow Console:

    1. Go to the Dialogflow CX Console.
    2. Click the Manage tab on the left panel.
    3. Click Integrations in the left sidebar menu.
    4. Click the Connect button on the Facebook Messenger tile.
    5. A configuration dialog opens:

      • App secret: Enter the app secret from Facebook App Dashboard Basic Settings.

      • Verify token: You can enter any private token you desire. Copy this value. This will be used to configure the Facebook Messenger Webhook.

      • Page access token: Enter the access token you copied during the Facebook app setup above.

      • Enable get started button: Please see Get started button section.

      • Webhook URL: Copy this value. This will be used to configure the Facebook Messenger Webhook.

      • Start: Click to start this integration service for your agent.

  4. Finish setup of the Facebook app and test it. Follow steps in the Setting Up Your Facebook App documentation to accomplish the following:

    • Configure the Facebook webhook for your app. Use the Webhook URL and Verify token values you copied above. Be sure to enable messages and messaging_postbacks in the page subscription.
    • Test your app.

Events

The following events are invoked by this integration. You can create custom event handlers to define what to do when the events are triggered.

Event Description
FACEBOOK_WELCOME Triggered when an end-user clicks the Facebook Messenger Get Started Button.
FACEBOOK_MEDIA Triggered when the message from an end-user contains attachments (E.g., audio, image, video, etc).

Get started button

To set up Facebook Messenger Get Started Button:

  1. Toggle Enable get started button when enabling this integration service.

    • This integration service will enable the button for you by calling Facebook Messenger Profile API.

      curl -X POST \
      -H "Content-Type: application/json" \
      -d '{"get_started": {"payload": "FACEBOOK_WELCOME"}}' \
      "https://graph.facebook.com/v10.0/me/messenger_profile?access_token=${PAGE_ACCESS_TOKEN}"
      
  2. Create a custom event handler for FACEBOOK_WELCOME event.

To test it:

  1. Delete the previous conversation with your Facebook page (if applicable).

    • The Get Started button only shows up on new conversations.
  2. Start a new conversation with your Facebook page.

  3. Click the Get Started button, and verify the response from the custom event handler.

You can always call Facebook Messenger Profile API to manage the Get Started button. This might be helpful for testing.

For example, the following request checks the status of Get Started button:

curl -X GET \
"https://graph.facebook.com/v10.0/me/messenger_profile?fields=get_started&access_token=${PAGE_ACCESS_TOKEN}"

The following request disables the Get Started button:

curl -X DELETE \
-H "Content-Type: application/json" \
-d '{"fields": ["get_started"]}' \
"https://graph.facebook.com/v10.0/me/messenger_profile?access_token=${PAGE_ACCESS_TOKEN}"

Rich response messages

The rich response messages are supported via Custom Payload in Fulfillment. Please see Facebook Messenger Send API Message Object for the message format.

For example, the following custom payload provides a simple text message:

{
  "text": "Hello, world"
}

The following custom payload provides an image message:

{
  "attachment": {
    "type": "image",
    "payload": {
      "url": "https://example.com/test.jpg"
    }
  }
}