Twilio Flex Quickstart: Getting Started with Flex Plugin Development

1. Navigate into the folder created for plugin-sample (or the name you picked)

2. Open the file src/SamplePlugin.js

3. Replace the code in that file with the following

   Copy code block

   1
   import React from "react"
   2
   import { FlexPlugin } from "@twilio/flex-plugin"
   3
   
   4
   import CustomTaskList from "./components/CustomTaskList/CustomTaskList"
   5
   
   6
   const PLUGIN_NAME = "SamplePlugin"
   7
   
   8
   export default class SamplePlugin extends FlexPlugin {
   9
     constructor() {
   10
       super(PLUGIN_NAME)
   11
     }
   12
   
   13
     /**
   14
      * This code is run when your plugin is being started
   15
      * Use this to modify any UI components or attach to the actions framework
   16
      *
   17
      * @param flex { typeof import('@twilio/flex-ui') }
   18
      */
   19
     async init(flex, manager) {
   20
       flex.CRMContainer.defaultProps.uriCallback = (task) => {
   21
         return task
   22
           ? `https://www.bing.com/search?q=${task.attributes.name}`
   23
           : "https://www.bing.com"
   24
       }
   25
     }
   26
   }

4. Save it

5. Your browser will automatically reload. Now your instance should look like the following:

   Expand image

6. (Optional) Text in and see if there are any Bing results for your phone number!

   You might notice that all we changed was a couple of lines of code:

   Copy code block

   1
   const options = { sortOrder: -1 };
   2
   flex.AgentDesktopView.Panel1.Content.add(<CustomTaskList key="SamplePlugin-component" />, options);

   is replaced by

   Copy code block

   1
   flex.CRMContainer.defaultProps.uriCallback = (task) => {
   2
         return task
   3
           ? `https://www.bing.com/search?q=${task.attributes.name}`
   4
           : "https://www.bing.com"
   5
   }

   This tells Flex to target the CRMContainer (instead of the CutomTaskList). Instead of adding a component to the CustomTaskList, we update the URI that the CRMContainer uses as a default prop to render its contents. In this case, we also add a bit of logic to make the container dynamic. We check to see if there's an active task. If there is an active task, we search for the task's name attribute, otherwise, we just show the https://bing.com landing page.

   Flex allows you to add, remove, and replace components so that you can tailor your contact center to your business needs. As you build more complex plugins, your workflow will remain similar. When you save files, your environment will reload and you can see the changes locally. To use the Twilio Paste UX library in your plugins, please see Use Twilio Paste with a Flex Plugin.

   Next up, you'll build the plugin and deploy it to your hosted instance.

1. Navigate into the folder created for plugin-sample (or the name you picked)

2. Open the file src/SamplePlugin.js

3. Replace the code in that file with the following:

   Copy code block

   1
   import React from 'react';
   2
   import { VERSION } from '@twilio/flex-ui';
   3
   import { FlexPlugin } from 'flex-plugin';
   4
   
   5
   import CustomTaskListContainer from './components/CustomTaskList/CustomTaskList.Container';
   6
   import reducers, { namespace } from './states';
   7
   
   8
   const PLUGIN_NAME = 'SamplePlugin';
   9
   
   10
   export default class SamplePlugin extends FlexPlugin {
   11
     constructor() {
   12
       super(PLUGIN_NAME);
   13
     }
   14
   
   15
     /**
   16
      * This code is run when your plugin is being started
   17
      * Use this to modify any UI components or attach to the actions framework
   18
      *
   19
      * @param flex { typeof import('@twilio/flex-ui') }
   20
      * @param manager { import('@twilio/flex-ui').Manager }
   21
      */
   22
     init(flex, manager) {
   23
       this.registerReducers(manager);
   24
   
   25
       flex.CRMContainer.defaultProps.uriCallback = (task) => {
   26
         return task 
   27
           ? `https://www.bing.com/search?q=${task.attributes.name}`
   28
           : 'https://www.bing.com';
   29
       }
   30
     }
   31
   
   32
     /**
   33
      * Registers the plugin reducers
   34
      *
   35
      * @param manager { Flex.Manager }
   36
      */
   37
     registerReducers(manager) {
   38
       if (!manager.store.addReducer) {
   39
         // eslint: disable-next-line
   40
         console.error(`You need FlexUI > 1.9.0 to use built-in redux; you are currently on ${VERSION}`);
   41
         return;
   42
       }
   43
   
   44
       manager.store.addReducer(namespace, reducers);
   45
     }
   46
   }
   47
   

4. Save it

5. Your browser will automatically reload. Now your instance should look like the following:

   Expand image

6. (Optional) Text in and see if there are any Bing results for your phone number!

You might notice that all we changed was a couple of lines of code:

1
const options = { sortOrder: -1 };
2
  flex.AgentDesktopView
3
    .Panel1
4
    .Content
5
    .add(<CustomTaskListContainer key="demo-component" />, options);

is replaced by

1
flex.CRMContainer.defaultProps.uriCallback = (task) => {
2
  return task 
3
    ? `https://www.bing.com/search?q=${task.attributes.name}`
4
    : 'https://www.bing.com';
5
}

This tells Flex to target the CRMContainer (instead of the TaskList). Instead of adding a component to the TaskList, we update the URI that the CRMContainer uses as a default prop to render its contents. In this case, we also add a bit of logic to make the container dynamic. We check to see if there's an active task. If there is an active task, we search for the task's name attribute, otherwise, we just show the https://bing.com landing page.

Flex allows you to add, remove, and replace components so that you can tailor your contact center to your business needs. As you build more complex plugins, your workflow will remain similar. When you save files, your environment will reload and you can see the changes locally.

Next up, you'll build the plugin and deploy it to your hosted instance.