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.
Twilio Flex makes it easy to deploy and augment omni-channel customer experiences with the launch of Flex Conversations and Flex User Interface 2.0.
Improve your customer engagement with Click To Text using Programmable SMS and Twilio Flex
Your small business needs a call center solution, but which one should you pick? Here are the top things to look for in a small business call center software.
本ブログ記事では、Google Cloud Dialogflow CXとTwilio Voiceとの1-クリック統合の仕組みをデモンストレーションし、同統合機能の優位性を皆さんに理解いただき、Twilioが提供する強力なコミュニケーション機能の活用方法と、拡張性が高く堅牢・安全なバーチャルエージェントをDialogflow CX上に構築するためのベストプラクティスを紹介します。
Google Cloud Contact Center AIやDialogflow CXをTwilioソリューション（Twilio Voice、Twilio Flex）と連携し導入することで、バーチャルエージェント、インテリジェントな自動化、プログラマビリティを提供し、体験を差別化して主要なビジネス目標を達成し、ダイナミックなデジタル環境とともに進化するために必要なものが提供されま す。
How to set your team up for an optimal Twilio Flex WhatsApp integration.