Menu

Rate this page:

Thanks for rating this page!

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

Overview of Flex UI

Flex UI gives you a programmatic access to the user experience that is the Agent Desktop and Supervisor Desktop.

The Flex UI Component Library is built in React, and published in NPM (Node Package Manager). This provides all the individual elements of the UI at the component level.

This documentation guide gives you an overview of how to:

  1. Programmatically customizing the UI using Plugin Builder or Sample project
  2. Configure the UI or manipulate default properties for standard Flex components - this is done in the code and in the future through and administration interface.
  3. Customize themes and styles.
  4. Control localization and templates.
  5. Add, replace or remove components.
  6. Take advantage of UI actions by listening, intercepting and manipulating UI events.
  7. Customize notifications using Notifications Framework
  8. Alter native channels and define your custom ones with Task Channel Definition API

Flex customization models

Flex can be programmatically customized by using a Plugin Builder (preferred way) or a sample project. Both ways include @twilio/flex-ui npm package that contains all of the flex ui components and api's.

Plugin Builder

You can find description on how to use plugin builder here.

Flex UI Sample Project Overview

The sample code enables a quick way to run the standard Flex UI application and demonstrate different programmability options within Flex with examples on configuration, custom components, actions framework and others.

Sample project is available on GitHub - https://github.com/twilio/flex-ui-sample

It is based on create-react-app.

To get started with the sample project do the following steps

1. Clone the sample project from GitHub

$ git clone git...

2. Go to flex-ui sample, install and run the sample project

cd flex-ui-sample
npm install
npm start

3. Your local Flex UI will be running on http://localhost:8080

Structure of the Sample project:

  • folder public
    • Contains the sample app configuration file (to use with your Twilio account, copy appConfig.sample.js in public/assets folder and configure accordingly)
    • Contains the index.html file where our application is rendered to.
  • folder src
    • Contains the main file to render our application.
    • App.js file is the example in this sample to configure, implement programmatic changes and render our application using React. Start with this file to explore customizing Flex UI.
    • Contains index.js which initilizes default configuration and app.js
  • root folder
    • Contains various configuration files such as for webpack and changelog.
import React from "react";
import * as Flex from "@twilio/flex-ui";

class App extends React.Component {
  render() {
    const { manager } = this.props;

    if (!manager) {
      return null;
    }

    return (
      <Flex.ContextProvider manager={manager}>
        <Flex.RootContainer />
      </Flex.ContextProvider>
    );
  }
}

export default App;
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 browsing the Twilio tag on Stack Overflow.