Skip to contentSkip to navigationSkip to topbar
Rate this page:
On this page

Core Concepts: Flex UI


(information)

Info

Please note that this article uses Flex UI 2.0 screenshots.

The fastest way to try out Flex is to sign up for Twilio(link takes you to an external page) and create a new Flex account from the Twilio Console, with the Flex UI running on Twilio's cloud platform.

flex-setup.

After the initial setup, you can access your Flex instance at flex.twilio.com.


Requirements

requirements page anchor

To view a list of hardware, software (including the browser), and networking requirements for running the Flex UI, refer to Flex UI requirements. Also refer to the network connectivity requirements for Voice if your agents are utilizing the Voice channel.

While you have the option to host the Flex UI on your own infrastructure, all the backend services associated with Flex continue to run on Twilio's platform. You will still need network connectivity with Twilio.


Agent Desktop

agent-desktop page anchor

The Agent Desktop is where agents can accept and work on incoming voice, conversation, or messaging tasks. This view is where agents spend most of their time, since this is where actual engagements with your customers happen. Depending on your Flex UI configuration, agents can also interact with your contact center's CRM UI on this page. Admins can enable the Flex Dialpad, which will then render in the Agent Desktop, allowing agents to make outbound calls to customers.

The following views are available in the Flex UI for respective user roles:

The Flex Admin user interface allows administrators to perform basic configuration tasks, including changing the active version of the Flex UI(link takes you to an external page), defining agent skills, and enabling pre-release features. The Admin UI also provides a central entry point for admin settings that are located within the Twilio Console.

Flex UI 2.x admin dashboard.

Teams View is visible for supervisors and administrators and displays a maximum of 200 agents. It provides a real-time view of contact center agents' activity. This gives supervisors a high-level overview of the Tasks individual agents are working on, with the ability to read a chat history or listen in on individual conversations.

Real-time Queues View is visible for users with a supervisor or administrator role. It gives visibility into inbound and outbound tasks on your contact center. This view updates every 1 to 3 seconds and displays real-time metrics across both the whole contact center and the individual queues.

Flex Insights is a reporting tool which provides insight into your contact center's performance. It gives team leads and supervisors the ability to assess conversations and provide feedback on performance.

To enable the Flex Insights View in the Flex UI, you need to have a paid plan. When enabled, you get a couple additional views in the Flex UI including the Dashboards view which displays historical data about your contact center.


Settings of Flex UI control the way the overall UI loads, as well as the look and feel and behavior of individual Flex Components.

  • Access the settings via the Flex Configuration API, updating the JSON in the ui_attributes property.
  • Alternatively, you can specify those same settings in the appConfig.js file. Values specified in appConfig.js will take precedence over values in the Flex Configuration API. This option will be easier to use when you are self-hosting the Flex UI.

Further details are available in the developer documentation.


By default, all accounts are configured to automatically update to new Flex UI minor releases. On the Flex Versioning Page(link takes you to an external page), you can opt out and pin your account to a particular minor version, as well as review the changelog before upgrading.

Flex UI Versioning.

We won't automatically enroll you in a new major release because it may contain breaking changes. You'll be able to control when to apply that update. See How We Release Flex for more details on the Twilio-hosted Flex UI.


Single sign-on (SSO) is an authentication scheme that allows a user to log in with one set of credentials to any software system that is configured to work with an identity provider (IdP).

Flex integrates with your existing IdP to authenticate users (agents, supervisors, or admins). Flex supports any IdP that uses SAML 2.0 (such as Google, Active Directory, and Okta), enabling you to use your primary corporate account as the identity provider for Flex.


This page helps administrators stay up-to-date and interact with new Pilot and Beta features for Flex.

Beta Features (public and private betas) deliver core capabilities while Twilio continues to invest in their architecture for a generally available (GA) release. The Twilio SLA or Twilio Support Plans do not cover these features.

Pilot Features give you an early peek at potentially upcoming new features. These features are subject to change or removal while under development. Due to known limitations and no guarantees on backward compatibility, we don't recommend using these features in production environments.


By default, Twilio provides some preset themes or skins, and customization options for the left and top navigation panes. From the Admin panel, you can click Edit under Configure Design and make your changes in the UI Configuration(link takes you to an external page) page. More fine-grained customizations are available on the code level.


Flex UI supports plugins - self-contained React components that allow users to extend, modify or add new functionality to the Flex frontend. Plugins have access to all the Flex frontend APIs.

(information)

Info

Check out the Flex Plugin Library. It requires Flex UI 2.x.x and gives you access to ready-to-install plugins without using the CLI.

View installed plugins in the Flex UI

view-installed-plugins-in-the-flex-ui page anchor

You can view and manage the plugins on your Flex application by navigating to the Custom Plugins Dashboard ( Admin > Plugins > Custom plugins).

Manage Plugins.

If you have plugins that are currently using an older version of the platform, you can view them on the Developer Setup(link takes you to an external page) Page.

How plugins are deployed

how-plugins-are-deployed page anchor

The simplest method for deploying a plugin is to use the Plugins CLI. The Plugin Builder stores the plugin as a Twilio Asset and registers it with Flex.

You can alternatively deploy the plugin to your own infrastructure and register your external asset for Flex to load. Once you have deployed your plugins, Flex will identify and serve the assets during the UI's initialization. Learn more about the Flex Plugins CLI.


Rate this page: