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.x screenshots.

The fastest way to try out Flex is to sign up for Twilio 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

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.


Structure of Flex UI

Agent Desktop

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:

Flex Admin UI

The Flex Admin user interface allows administrators to perform basic configuration tasks, including changing the active version of the Flex UI, 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.x admin dashboard.

Teams View

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

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 View

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.


Flex UI Settings

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.


Flex UI Versioning

UI version updates are applied to your account based on your configurations on the Flex Versioning and updates page.

By default, all accounts are configured to automatically update to new Flex UI minor releases. If you prefer not to receive automatic updates, deselect Update minor versions to keep the your current Flex version. If you choose not to receive automatic updates, remember to manually update your Flex version regularly to receive the latest features and updates and to ensure that you remain on a supported version.

Flex UI Versioning.

Because new major versions may include breaking changes, we won't automatically update your Flex instance to new major versions. You control when to apply those updates.

For more details, see How We Release Flex.


Single Sign-On

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.


Pre-release Features

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.


Themes

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 page. More fine-grained customizations are available on the code level.


Flex Plugins

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

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 Page.

How plugins are deployed

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: