Flex 2.0: Configure Facebook Messenger with Flex Conversations

November 21, 2022
Written by
Leroy Chan
Reviewed by
Paul Kamp
Aymen Naim


Twilio Flex natively supports sending and receiving messages from Facebook Messenger users. This guide showcases how to configure Facebook Messenger for Flex UI 2.x and Flex Conversations. Messages from Facebook Messenger will first flow into Twilio Studio before hitting Twilio Flex.

If you're using Flex Legacy Messaging, follow this guide instead. Also note that the integration of Facebook Messenger is currently in beta.


Before you can complete this tutorial, you'll need to set up a few things:

  1. Twilio Flex Account with Console Access
  2. Twilio CLI installed (v5.2.1 or above) along with Node.js
  3. Facebook Page (Ready to be integrated)

Step-by-Step Guide

  1. Step 1: Install and Configure Facebook Messenger Channel
  2. Step 2: Create Studio Flow
  3. Step 3: Create a Conversations Address

Step 1: Install and configure the Facebook Messenger Channel

First, open your browser and login into Twilio Console

Next, click on Explore Products

Explore Products in the Twilio Console

Under Marketplace, click on the Pin icon (for easy access) followed by Channels

Channels in the Twilio Marketplace

Click on Enable Facebook Messenger, and press Log in with Facebook

Set up to log in with Facebook

Follow through and complete the steps to integrate your Facebook Page with Twilio.

Once your Facebook account has been linked to Twilio, you should be seeing the Create your first sender popup window in your Twilio Console.

Flex FBM - Create FB Sender

After submitting your sender, take note of the Facebook Page ID as it will be required for setting up a Conversations Address.

Flex FBM - FB Page ID

Great work – you have successfully configured the integration between Facebook Messenger and Twilio! Please move on to Step 2.

Step 2: Create a Studio Flow

In the Twilio Console, navigate to Studio and then Flows. Once the page loads, click + to create a new flow.

Flex GBM - Create Studio Flow

Enter the Flow Name (for example, Flex 2 FBM Flow) and click Next

Flex GBM - Studio Flow Name

Select "Start from scratch" and click Next

Start from scratch in a Studio flow

Your flow should now be created and you will be presented with a blank Studio canvas, with only a trigger ready to configure:

A Blank Studio Flow

Under the WIDGET LIBRARY, search for Send to Flex and drag it onto the canvas.

An empty Send to Flex widget

Click on the Send to Flex widget. Under WORKFLOW, select your desired TaskRouter Workflow. Under TASK CHANNEL, select Chat. If you do not see Chat, please select Programmable Chat. After that, click Save

Filling out the Send to Flex widget

Under Trigger, connect Incoming Conversation to the Send to Flex widget. After that click Publish.

Publish button for a Studio flow

Navigate back to the Flows page and take note of your newly created Flow SID.

Flex FBM - Studio Flow SID

And with that, you're ready to move on to step 3!

Step 3: Create a Conversations Address

Open up your terminal (Terminal or iTerm on a Mac for instance) and verify that you have both the Twilio CLI and Node.js installed by running:

If this is your first time using the Twilio CLI, run twilio login before proceeding. Log in using the Account SID and Auth Token of the Twilio account you used in the previous steps. 

twilio -v
twilio login // if you have not configured Twilio CLI before

Next, prepare the following:

  1. Facebook Page ID (from Step 1)
  2. Twilio Studio Flow SID which starts with FWxxxxxx (from Step 2)

Run the following command:

twilio api:conversations:v1:configuration:addresses:create --address messenger:<facebook_page_id> --type messenger --friendly-name FBM --auto-creation.enabled --auto-creation.type studio --auto-creation.studio-flow-sid FWxxxxx

Once the Conversations Address has been successfully created, you are all set! You should see an Address with type messenger being added to your Conversations Addresses:

Flex FBM Convo Address


Congratulations! You have successfully integrated Facebook Messenger into Flex 2.0.

Now, let's see the integration in action!

  1. Start by logging onto your Flex’s agent interface
  2. Set the your availability to Available
  3. Using the Facebook Mobile App or Facebook Web, search for your Facebook Page and try sending a message from your Facebook account to your connected Facebook Page.
  4. You should see the task coming into Flex!
  5. Accept the incoming messenger request as a Flex agent, type your reply, and see it come in on your Facebook Messenger.

Flex FBM - Conclusion

Now that you've learned to integrate Facebook Messenger with Flex Conversations, you can explore the other guides we have for Flex Conversations. We can't wait to see what you build!

Leroy is a seasoned solution architect with a knack for designing scalable architectures on the cloud. He is currently part of the Flex Solution Engineering team for APJ, focusing on driving joint Go-to-Market motions with partners. Leroy can be reached at lechan [at] twilio.com.