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. For more details, please see Platform Policy Overview (Facebook for Developers) 

After the 24-hour window has expired, Facebook only lets you alert the user of a non-recurring change to their application or account. Twilio tags any messages sent to the user with the "ACCOUNT_UPDATE" tag after the 24-hour window. For more details, please see Facebook’s Messenger Message Tags documentation.

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 business messaging, rather than just a personal account.

If you do not have a Facebook page yet, you can create one by logging in to your Facebook account, clicking Pages, and then creating a new page.

Please note that if you are an Independent Software Vendors (ISV's) and Software Integrators (SI's) who is managing Facebook Messenger communications on behalf of your clients, you will need to have admin access to the Facebook 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://flex-api.twilio.com/v1/FlexFlows' \
--data-urlencode 'ChannelType=facebook' \
--data-urlencode "IntegrationType=studio" \
--data-urlencode 'Enabled=true' \
--data-urlencode 'ContactIdentity=messenger:xxxxxx' \
--data-urlencode 'FriendlyName=Facebook Messenger Flow' \
--data-urlencode 'JanitorEnabled=true' \
--data-urlencode 'Integration.FlowSid=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 5 Update with your Facebook Page’s “messenger:xxxxx” PAGE ID. Facebook Messenger Channel
Line 8 Update with your Studio Messaging Flow SID. Studio Dashboard
Line 9 Update with your Chat Flex Chat Service SID. Programmable Chat Dashboard
Line 10 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