Menu

Core Concepts: Flex UI

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

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 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-admin-ui.png

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

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

flex-versioning.png

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

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

View installed plugins in the Flex UI

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

plugins-dashboard

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:

Need some help?

We all do sometimes; code is hard. Get help now from our support team, or lean on the wisdom of the crowd by visiting our Twilio Community forums or browsing the Twilio tag on Stack Overflow.

Thank you for your feedback!

We are always striving to improve our documentation quality, and your feedback is valuable to us. How could this documentation serve you better?

Sending your feedback...
🎉 Thank you for your feedback!
Something went wrong. Please try again.

Thanks for your feedback!

Refer us and get $10 in 3 simple steps!

Step 1

Get link

Get a free personal referral link here

Step 2

Give $10

Your user signs up and upgrade using link

Step 3

Get $10

1,250 free SMSes
OR 1,000 free voice mins
OR 12,000 chats
OR more