Integrating Facebook Messenger with Twilio Flex

With Twilio’s Facebook Messenger Channel (Beta), you can quickly and easily integrate Facebook into your Flex programmable contact center. This opens your business up to the billions of Facebook users who can now trade messages with you on the platform most convenient for them. All of this is controlled through the same Twilio Programmable SMS APIs you know, and in the same Flex GUI your agents use every day. Here's what you need to know to get started.

Notice: The Facebook Messenger Channel is currently in beta, and has not yet been finalized. For more information on Support limitations for beta products, please see Twilio Beta Product Support.

Facebook Messaging Capabilities

Facebook users will need to initiate contact with you by messaging your Facebook page before you are able to contact them. Once a user’s message is received, Twilio can respond back to the user for 24 hours. One additional message is allowed after the 24-hour window has expired.

For more details, please see Facebook’s Messenger Platform Policy Overview (Facebook for Developers).

Flex Configuration Process

Here are the steps required to setup the Facebook Messenger Channel in Flex:

  1. Create a Facebook Page.
  2. Install and Configure the Facebook Messenger Channel on your Flex project.
  3. Add Facebook Messenger to Flex.

Step 1: Creating a Facebook Page

In the Facebook Messenger ecosystem, users communicate with brands and companies by messaging their Facebook Page. Similarly, the Facebook Messenger Channel requires a Facebook Page for connecting, rather than just a personal account.

To create a Facebook Page, login to your Facebook account, click Pages, and then create a new page.

Step 2: Install and Configure the Facebook Messenger Channel

To begin sending and receiving Twilio messages with Facebook Messenger, you’ll need to start by installing and setting up the Facebook Messenger Channel. Here are the instructions to get you setup:

  1. Login to your Flex project at www.twilio.com/console.
    NOTE: If your Flex project is not displayed after logging in, switch projects.
  2. Click Channels from the left-side navigation bar.
    NOTE: If Channels is not visible, click All Products & Services.
  3. Click Facebook Messenger.
  4. Click Install.
  5. Review the Facebook terms of service. If you wish to continue, check the “I agree…” box, and then click Agree & Install.
  6. From the “Configure” tab, click the Facebook Log In button, and then follow the prompts.
  7. Once logged in, make the following changes, and then click Save.
    • Properties > USE IN: Select Programmable SMS Inbound.
    • Credentials > SELECT A PAGE: Select your Facebook Page.
      NOTE: If your page is missing, you may need to sign out of Facebook, and then sign back in to provide Twilio access.
    • Configuration > CALLBACK URL: Enter this webhook URL in the following format:
      https://webhooks.twilio.com/v1/Accounts/ACxxxxx/Proxy/KSxxxxx/Webhooks/Message
      NOTE: Replace ACxxxxx with your Flex project Account SID, and KSxxxxx with the "Flex Proxy Service" Proxy SID.

Step 3: Add Facebook Messenger to Flex

Once the Facebook Messenger Channel is installed and configured on your Flex project, it needs to be added to Flex. To complete this step, make an HTTP POST request to the Flex Orchestration API. Here’s an example cURL script:

curl -X POST 'https://preview.twilio.com/Flex/FlexFlows' \
  --data-urlencode 'ChannelType=facebook' \
  --data-urlencode 'Enabled=true' \
  --data-urlencode 'ContactIdentity=messenger:xxxxx' \
  --data-urlencode 'FriendlyName=Messaging Flow' \
  --data-urlencode 'StudioFlowSid=FWxxxxx' \
  --data-urlencode 'ChatServiceSid=ISxxxxx' \
  -u ACXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX:yourAuthToken

To make this script work for you, make the following updates, and then paste it into a terminal window:

Line What to change Location in Console
Line 4 Update with your Facebook Page’s “messenger:xxxxx” PAGE ID. Facebook Messenger Channel
Line 6 Update with your Studio Messaging Flow SID. Studio Dashboard
Line 7 Update with your Chat Flex Chat Service SID. Programmable Chat Dashboard
Line 8 Update with your Flex project’s Account SID and Auth Token. Project Settings page

Additional Resources

Have more questions? Submit a request
Powered by Zendesk