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:
- Twilio Flex Account with Console Access
- Twilio CLI installed (v5.2.1 or above) along with Node.js
- Facebook Page (Ready to be integrated)
- Step 1: Install and Configure Facebook Messenger Channel
- Step 2: Create Studio Flow
- 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
Under Marketplace, click on the Pin icon (for easy access) followed by Channels
Click on Enable Facebook Messenger, and press 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.
After submitting your sender, take note of the Facebook Page ID as it will be required for setting up a Conversations Address.
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.
Enter the Flow Name (for example,
Flex 2 FBM Flow) and click Next
Select "Start from scratch" and click Next
Your flow should now be created and you will be presented with a blank Studio canvas, with only a trigger ready to configure:
Under the WIDGET LIBRARY, search for Send to Flex and drag it onto the canvas.
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
Under Trigger, connect Incoming Conversation to the Send to Flex widget. After that click Publish.
Navigate back to the Flows page and take note of your newly created 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:
- Facebook Page ID (from Step 1)
- 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:
Congratulations! You have successfully integrated Facebook Messenger into Flex 2.0.
Now, let's see the integration in action!
- Start by logging onto your Flex’s agent interface
- Set the your availability to Available
- 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.
- You should see the task coming into Flex!
- Accept the incoming messenger request as a Flex agent, type your reply, and see it come in on your Facebook Messenger.
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.
Measuring customer engagement helps businesses identify which tactics perform best. Discover how to measure customer engagement with these 11 metrics.
Customer experience has a large impact on customer loyalty. Discover the top challenges (and opportunities) in retail customer experience.
Discover how to measure customer experience by aggregating metrics and KPIs you likely already track throughout your business.
Implementing automations at your contact center can help improve efficiency and productivity. Learn more about how contact center automation can benefit your business.
Customer service is one of the pillars of customer-centric industries like retail. Learn 6 strategies to improve retail customer service.
Call center CRM software allows agents to manage and track customer data. Learn more about contact center CRM and why it's an invaluable tool.