Flex 2.0: Configure Facebook Messenger with Flex Conversations
Time to read: 3 minutes
![facebook-messenger-flex-conversations facebook-messenger-flex-conversations](/content/dam/twilio-com/global/en/blog/legacy/2022/configure-facebook-messenger-flex-conversations/facebook-messenger-flex-conversations.png)
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.
Requirements
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-by-Step Guide
- 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
![Explore Products in the Twilio Console](/content/dam/twilio-com/global/en/blog/legacy/2022/configure-facebook-messenger-flex-conversations/image2_RmpVnx8.png)
Under Marketplace, click on the Pin icon (for easy access) followed by Channels
![Channels in the Twilio Marketplace](/content/dam/twilio-com/global/en/blog/legacy/2022/configure-facebook-messenger-flex-conversations/image16_k8CRzRG.png)
Click on Enable Facebook Messenger, and press Log in with Facebook
![Set up to log in with Facebook](/content/dam/twilio-com/global/en/blog/legacy/2022/configure-facebook-messenger-flex-conversations/image15_BJyK7pS.png)
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](/content/dam/twilio-com/global/en/blog/legacy/2022/configure-facebook-messenger-flex-conversations/image4_Wcl1tAs.png)
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](/content/dam/twilio-com/global/en/blog/legacy/2022/configure-facebook-messenger-flex-conversations/image8_PGaNOmZ.png)
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](/content/dam/twilio-com/global/en/blog/legacy/2022/configure-facebook-messenger-flex-conversations/image11_dEGa4js.png)
Enter the Flow Name (for example, Flex 2 FBM Flow
) and click Next
![Flex GBM - Studio Flow Name](/content/dam/twilio-com/global/en/blog/legacy/2022/configure-facebook-messenger-flex-conversations/image5_0CEl1h0.png)
Select "Start from scratch" and click Next
![Start from scratch in a Studio flow](/content/dam/twilio-com/global/en/blog/legacy/2022/configure-facebook-messenger-flex-conversations/image7_u0hwh9v.png)
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](/content/dam/twilio-com/global/en/blog/legacy/2022/configure-facebook-messenger-flex-conversations/image14_yJaEKbv.png)
Under the WIDGET LIBRARY, search for Send to Flex and drag it onto the canvas.
![An empty Send to Flex widget](/content/dam/twilio-com/global/en/blog/legacy/2022/configure-facebook-messenger-flex-conversations/image3_rZcSKKs.png)
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](/content/dam/twilio-com/global/en/blog/legacy/2022/configure-facebook-messenger-flex-conversations/image6_s1UPzb8.png)
Under Trigger, connect Incoming Conversation to the Send to Flex widget. After that click Publish.
![Publish button for a Studio flow](/content/dam/twilio-com/global/en/blog/legacy/2022/configure-facebook-messenger-flex-conversations/image13_0MknXs2.png)
Navigate back to the Flows page and take note of your newly created Flow SID.
![Flex FBM - Studio Flow SID](/content/dam/twilio-com/global/en/blog/legacy/2022/configure-facebook-messenger-flex-conversations/image12_ss1G4TH.png)
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:
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:
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](/content/dam/twilio-com/global/en/blog/legacy/2022/configure-facebook-messenger-flex-conversations/flexfbm_convo_adress.png)
Conclusion
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.
![Flex FBM - Conclusion](/content/dam/twilio-com/global/en/blog/legacy/2022/configure-facebook-messenger-flex-conversations/image10_lZMW5Wo.png)
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.
Related Posts
Related Resources
Twilio Docs
From APIs to SDKs to sample apps
API reference documentation, SDKs, helper libraries, quickstarts, and tutorials for your language and platform.
Resource Center
The latest ebooks, industry reports, and webinars
Learn from customer engagement experts to improve your own communication.
Ahoy
Twilio's developer community hub
Best practices, code samples, and inspiration to build communications and digital engagement experiences.