Adding Components to Flex UI

All Flex accounts created on or after May 26th, 2022 are using Flex UI 2.x.x. Some screenshots and required software versions on this page may only be compatible with Flex UI 1.x.x and are therefore no longer accurate. We are working to update the page to reflect the new UI experience. Learn more about Flex UI 2.x.x here.

In this guide, we’ll add a custom component to the TaskInfoPanel that features a simple to-do list for the Agent. This component will appear at the bottom of the info panel, and will render some simple HTML.

Flex TaskInfoPanel with new component


In order to complete this activity, you’ll need the following:

  • A local Flex Plugin development environment setup (start here)

Development Environment

Start your local development environment by running twilio flex:plugins:start inside your Flex Plugin's directory. An instance of Flex should now be open and initialized in your browser at localhost.

Creating a Task for Development

Since we'll be modifying the content within the Task Information Panel (TaskInfoPanel), let's start by creating a Task to view our ongoing development. Each Flex installation is setup with a phone number to develop with. To create a test task, do the following:

  1. Find your preprovisioned phone number on the console phone numbers page.
  2. Text or Call the phone number.
  3. Open your Flex instance and accept the new task.
  4. In the Task Panel, click Complete in the top right.
  5. Now open Task's Info tab.

This is where we'll be working to add the Todo List.

The default Flex TaskInfoPanel is populated with information about the Task, such as the type, priority, and customer context. It should look something like this:

Flex TaskInfoPanel initial state

We’re going to add a little bit of additional information for our Agent in the form of a brief to-do list. For now, this will just be static HTML, and it will be the same for every Task.

Creating the component

Let’s start with the HTML we’d like to render in the info panel. We’ll include a line break and a horizontal rule for visual consistency with the existing info panel components, and then add a heading and a brief unordered list filled with items for our Agent.

    <br />
    <hr />
    <h3>TO DO</h3>
        <li>Answer the task</li>
        <li>Locate the customer's record in the CRM</li>
        <li>Find relevant account details</li>
        <li>Resolve the customer's support issue</li>
        <li>Complete the task</li>

Organization of your components is up to you, but to keep things simple for this example, we’re going to create this component in a new file in src called MyCustomTaskInfoPanelItem.js. Open this file in your editor and add the following component code:

import React from 'react';

const MyCustomTaskInfoPanelItem = () => (
             <br />
             <hr />
             <h3>TO DO</h3>
               <li>Answer the task</li>
               <li>Locate the customer's record in the CRM</li>
               <li>Find relevant account details</li>
               <li>Resolve the customer's support issue</li>
               <li>Complete the task</li>

export default MyCustomTaskInfoPanelItem;

You’ll see the HTML from above, wrapped in a render() method in the class component MyCustomTaskInfoPanelItem (New to React components? Learn more here!).

Adding the component to the canvas

Now that we have a component, it’s time to bring it into the canvas. First, we need to import the component. Open your main plugin file (example: TodoPlugin.js) and add the following line:

import MyCustomTaskInfoPanelItem from "./MyCustomTaskInfoPanelItem";

Next, let’s use the add() method to add our component to the canvas.

We can tell from the Flex Component guide that the area of the canvas we’re concerned with is the TaskInfoPanel. Add the following line to your app’s init() method:

flex.TaskInfoPanel.Content.add(<MyCustomTaskInfoPanelItem key="to-do-list"/>);

Here, we’re following the schema of Component.Content.add/replace(<MyComponent />, {options}), where Flex.TaskInfoPanel is the base component and we are choosing to use the add() method to insert our new MyCustomTaskInfoPanelItem component, with a key of "to-do-list" and no additional configuration options.

If you're starting with the default plugin and have not changed anything else yet, your TodoPlugin.js will look like this:

import { FlexPlugin } from 'flex-plugin';
import React from 'react';
import { MyCustomTaskInfoPanelItem } from './MyCustomTaskInfoPanelItem';

const PLUGIN_NAME = 'TodoPlugin';

export default class TodoPlugin extends FlexPlugin {
  constructor() {

   * This code is run when your plugin is being started
   * Use this to modify any UI components or attach to the actions framework
   * @param flex { typeof import('@twilio/flex-ui') }
   * @param manager { import('@twilio/flex-ui').Manager }
  init(flex, manager) {
    flex.TaskInfoPanel.Content.add(<MyCustomTaskInfoPanelItem key="to-do-list"/>);

Save the file, and switch to your instance of Flex UI. To see the todo list, click on the Info tab.

custom component, zoomed in

What next?

Congratulations, you’ve created your first component and added it to Flex UI! Here are some ideas of where to go next:

  • Make this component more dynamic with props (the Task object is a good place to start). To explore component props, go to Flex UI API Reference.
  • Reconfigure the canvas by using the replace() method to swap in your custom components.
  • Try creating a custom component that uses a third-party API.
John Giannakos Ruma Nair Tony Smith Ricky Holtz Ben Getson Maria Bermudez Swarnava Sengupta Daria Fokina
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 Twilio's Stack Overflow Collective or browsing the Twilio tag on Stack Overflow.

Thank you for your feedback!

Please select the reason(s) for your feedback. The additional information you provide helps us improve our documentation:

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