Skip to main content


Hands-On With the Twilio Flex Contact Center Platform

Do you ever get that feeling that you are on the cusp of something really cool? Something that could shake things up? That’s how we’ve been feeling after spending some time at Twilio HQ in San Francisco in late June to get up to speed on Flex, Twilio’s new contact center platform.

As one of the first companies in Twilio’s brand new partner program, we spent a few days getting certified on Flex and the rich ecosystem of pre-existing Twilio communication APIs. But to kick things off we participated in an all day “Flexathon”, Twilio’s version of a hackathon that was all about jumping in and trying to build something on Flex.

The “QuickStart”

I got my hands on some earlier builds a few weeks prior. Initially, progress was a bit slow with a lot of manual onboarding steps and so many new things to look into. At the Flexathon, I was excited to see a brand-new “quickstart” process available. The Quickstart eliminated many of the manual steps previously required.

It’s as simple as creating a new Twilio project in your console and visiting a QuickStart page. When you launch the page, it will check if the current project already has Flex installed. If not, it will run through a set of background processes to set you up. You do need to start with an empty project as the template will fail if you’ve already created Functions or TaskRouter components.

Flex makes heavy use of Twilio infrastructure already available. A big part of this is a customized TaskRouter workspace that is pre-configured to get a Flex environment up and running quickly. This includes a sample TaskQueue and Worker to start with, along with channels and a basic Workflow. In addition, Twilio Functions are created to tie everything together (task creation, channel management, communication stickiness).

Initial Developer Experience

Once the Quickstart is configured, you immediately get access to a Flex UI environment on Twilio’s servers to run some quick tests. To really start developing though, pull down the sample React code to your local machine and start hacking around. A zip file is supplied just for this purpose.

Load that into your editor of choice (for me that’s Visual Studio Code right now), run a few npm commands and you are off and running. Two different sample applications are offered in the original Quickstart: an agent console which you can treat as a typical contact center UI and a web chat application. If you are already a React expert, you’ll be able to jump in and start customizing things and adding your own components almost immediately. Keep in mind the QuickStart process is still in active development and will likely change in the general availability timeframe.

By the way, you can launch the local agent console instance from the QuickStart landing page in the Twilio Console. This provides a basic authentication flow using your pre-configured worker. In a real scenario, you are probably going to enhance your defined workers with additional metadata from your preferred identify provider and use single sign-on (SSO). But it’s nice you can just get rolling as a developer without having to do all that first.

Developer Support in the Platform

The Flex platform offers a number of other thoughtful “hooks”, such as

  • a fully-realized templating system (themes) that can be applied via configuration or in code

  • an Actions framework that hooks into various events around tasks

  • a Notifications framework to provides alerts to an agent

  • lots of other events on various TaskRouter and other Twilio objects that you can explore

You can still use Twilio libraries (NPM packages) in Flex, just like any other application. But much of that type of interaction is supported and set up for you when running inside Flex. In other words, you have context to what is going on in TaskRouter and other systems without having to create it all yourself.

Speaking of NPM, you can load any package you want, just like with any React application. So if you are already doing client-side Javascript development, your process doesn’t change a whole lot. Like a certain packaging/build/loader/linting pipeline? Just keep using it. Need to talk to any number of third-party APIs? No problem.

CRM Support

Want to load your CRM into your React application? Flex has a panel and callbacks already configured for that, assuming your CRM allows it. We’ve had various degrees of success, depending on the CRM platform. If you want to flip the script and run Flex inside your CRM, you can do that too. For instance, I was able to get a bare-bones Open CTI implementation running in Salesforce Sales Cloud® without a whole lot of effort. More on that in upcoming posts.

What’s Next?

Some parts of Flex are still in the works, such as supervisory frameworks and generally making certain operations more streamlined or easier to configure. But you can already see how powerful this framework is going to be for building rich customer care applications. The ability to customize everything makes a staggering contrast to traditional call center platforms and we think customers are going to really love what we build on Flex.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Curtis Swartzentruber, Director, Customer Engagement Solutions

Director of Customer Engagement Solutions, currently focusing on the Twilio Flex contact center platform and other Twilio services. My background spans 25 years including Microsoft and front-end application development, unified communications, enterprise architecture and services, Azure, AWS, database design and a little bit of everything else.

More from this Author

Follow Us