Twilio Flex 2.0 was made generally available in December of 2022, as the next generation of Twilio’s programmable contact center. If you need a refresher on some of the major new features and capabilities of 2.X compared to 1.X, check out our article here. To summarize, Flex 2.0 brings a more unified framework for handling text or chat tasks with Flex Conversations, a more standardized UI with Twilio Paste, and Accessibility improvements.

If you started using Flex in 2022 or earlier, there’s a good chance you’re still running one of the 1.X releases. With Twilio announcing that they will drop support for 1.X versions of Flex in the Summer of 2024, now is the time to plan and execute a migration to 2.X. This article will go over everything you need to determine the level of effort, potential risks, and new possibilities that this upgrade will bring.

If you are currently using Twilio Flex UI 1.X, you need to plan your migration to Twilio Flex UI 2.0 before June 30, 2024, when Twilio will drop support for Flex UI 1.X.

Overview of the Flex Upgrade Process

The complexity of the migration process depends on whether you have any custom plugins or not. If you’re not sure if you have custom plugins, then just log in as an admin, then click on the “Manage” button on the admin panel where it says “Plugins”

Screenshot of Twilio Flex 1.0 Plugin Admin Screen

If you see anything listed on that screen (see above), then you will need to follow steps to upgrade each individual plugin to ensure compatibility.

If you don’t have any custom plugins, you can simply enable Flex UI 2.0 on your account and start using it, once you confirm that Flex Conversations Prerequisites are met. You can disregard most of the rest of this article, although I would recommend looking into the Flex Plugin Library for adding new features you hadn’t considered before. There is one exception, though – Flex Web Chat.

Flex Web Chat

Twilio Flex 1.X included a pre-built WebChat component that could be installed on any website. It had limited configurability, but could support a pre-engagement form to collect data prior to routing an inquiry to a chat-skilled agent. This component was built with the Twilio Chat API, which is being retired. Twilio has not built an official equivalent for this quickly deployable web client for Flex 2.0 yet.

Twilio has two recommendations on how to proceed with similar chat capabilities for Flex 2.0 –

  1. Build whatever chat component you want using the Conversations API – this is infinitely flexible, but could be a daunting task depending on your web team’s capabilities.
  2. Use their open source WebChat React App – This is very similar in capabilities to the Flex 1.X WebChat client, and is actually quite easy to deploy as well. Twilio is not hosting it on their CDN, so the app will need to be hosted on your internal servers or converted to be served from Twilio Serverless Functions.

Understanding Twilio Flex Plugins – What are They?

Twilio Flex Plugins are modular units of code that are installed in a Flex environment to add specific functionality that is not included in the base Flex product. For example, this could include a custom brand theme, enhancements to task control or display, or direct integration for what displays in the CRM panel when a new task comes in. Flex plugins are written with ReactJS using a standardized framework created by Twilio.

Plugins for 1.X versions of Flex typically come from a couple different sources:

  1. Custom developed by an in-house development team or a third-party Twilio Partner to meet a specific need of your business.
  2. Included as part of a packaged accelerator for Flex deployments, built by Twilio Partners.

In the case where your organization got started with Flex using a partner accelerator package, now’s a great time to evaluate whether or not it makes sense to continue using that package. Often these packages require subscriptions with monthly or annual fees, and require a connection to a remote server hosted by the partner. It’s quite possible that with Flex 2.0, there may be an alternative solution available or coming soon that doesn’t require a financial commitment or dependency on a third party. Our team at VPS is happy to discuss this.

In the case where your plugins are custom for your organization, either developed in-house or by a partner, the first step is again to evaluate whether or not you need the custom plugin going forward.  It’s possible some of your original custom functionality is now available with Twilio- or Community-provided plugins, through the Flex 2.0 Plugin Library. See our article here for more information on this new feature. We recommend you take this opportunity to simplify your code-base and move to supported versions of common functionality such as canned responses or chat transfer.

When you confirm that you do in fact need custom plugins to power your organization’s contact center workflows with Flex, then you’re ready to start the migration process. One bit of caution here, we’ve seen some customers “lose” access to the original source code for plugins. (From before the time VPS helped support them, of course.) Another good reminder to make sure plugin code is being tracked in your organization’s code repository. Having the original Flex 1.x source code will certainly speed up the migration process, otherwise the developer responsible for building the 2.x version will have to start from scratch.

Evaluating Plugin Migration Complexity

Twilio provides developers with a migration guide here, but this is technical guide designed to be used by the ReactJS developers with hands on keyboards. In this article we’ll try to break it down at a higher level, so any system owner can understand the process that determines what the level of effort will be for each plugin.

At VPS, we’ve established the following framework for evaluating Flex 1.0 plugins:

    • Required theming and branding updates – Twilio introduced a new theming structure. Generally the capabilities are the same, but code needs to be converted to the new format.
    • Messaging Channels – Move from Programmable Chat and Proxy to Flex Conversations and Interactions SDK. This could be one of the heavier lifts in the migration, especially when considering the corresponding changes required for the Flex Chat Client.
    • User and Activity Controls – This applies to any customizations to how the user sets their activity. This is also no longer available when the user has no active task.
    • Messaging UI – The UI component used by agents sending messages has a new structure, with new capabilities added.
    • Core AppConfig Updates  – Specific structural updates around WarmTransfer, Notifications, and Theme
    • Voice SDK – The twilio-client SDK has been changed to the twilio-voice SDK, and event handling around voice events has been changed.
    • InsightsPlayer – InsightsPlayer Action names have changed.
    • Other Flex Updates – A few other minor updates have been made throughout the platform such as download media
    • MaterialUI -> Paste – While Flex will still support any custom ReactJS components, The introduction of Twilio Paste provides a much more fluid and composable user interface. We would recommend looking at rebuilding any custom UI previously developed with materialUI over to Paste
    • Other customizations – Again, every customer using Flex is unique, and we see a lot of creative implementations of agent or supervisor functionality contained within Flex, that maybe doesn’t directly manipulate the Flex UI. These customizations are still at risk because of the required dependency updates with Flex 2.x and should be evaluated.

Going Forward

Twilio is setting end-of-life for Flex 1.X at the end of June 2024, so obviously that’s compelling enough of a reason to upgrade on its own, but VPS would recommend looking ahead at what’s possible with Flex 2.x as the foundation going forward. We’ve heard from Twilio at past Signal Conferences that email in Flex is on the near-term roadmap, and the new messaging framework that comes with Flex 2.0 is setting the table to make that happen. We also just heard at this year’s Signal, that Flex Unify is due out soon, bridging the Golden Customer Profile with a unified agent experience. We would also recommend looking at Flex 2.0 compatible plugins on the market, such as VPS’s Internal Chat for Flex, creating a secure and convenient way for your contact center staff to communicate with each other in parallel with their customer conversations.

If you have your own developers on staff, we hope this is a good guide that they can use to execute the Flex 2.0 migration process. If you don’t have the proper resources in place to tackle this yourself, our team at VPS is available, and happy to assist in any part of the process. We offer basic packages for evaluation and impact assessment, or can also offer full service development to plan, build, test, deploy, and support the entire journey