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?

UI Configuration

Configuration options

You can override any of the default configuration values. There are 2 ways to configure Flex UI: the configuration object and defaultProps API.

Configuration object

In the configuration object, you can define default properties to Flex Components and also configure properties that are not tied to specific Components.

public/assets/appConfig.js

var appConfig = {};
appConfig.serviceBaseUrl = "https://random-word-1234.twil.io/";
appConfig.sso = { accountSid: "ACXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX" };
appConfig.sdkOptions = { insights: {productId: "flex_insights"}};
appConfig.logLevel = "debug"
appConfig.colorTheme = {
    baseName: "GreyDark",
    colors: {},
    light: false,
    overrides: {}
};
appConfig.componentProps = { CRMContainer: { uriCallback: (task) => { return task ? "https://www.bing.com/search?q=" + task.attributes.name : "http://bing.com/"; } } }
appConfig.router = {
    type: "memory",
    history: {
        initialEntries: [ "/agent-desktop" ]
    }
};

Some configuration options are only available through the configuration object:

Variable name

Type

Description

language

string

Not used

colorTheme

string | object

Redefine color scheme

{
baseName: "GreyDark",

colors: { base2: "red"},

light: true,

overrides: {

MainHeader: {

Container: {

background: "green"

}

}

}

serviceBaseUrl

string

Base URL of Flex backend service

sso

Object

Enables support for authentication and Single Sign-On using 3rd party Identity Providers such as Okta.

sso = {
accountSid: string; // AccountSid of your Twilio project
}

logLevel

string | number

Specificity of log output

0 – 'trace'

1 – 'debug'

2 – 'info'

3 – 'warn'

4 – 'error'

5 – 'silent'

sdkOptions

Object

Tailor SDK parameters
{
voice: {},
worker: {},
chat: {},
insights: {}
}

pluginService

Extract list of plugins from remote plugin service
{
enabled: true
}

componentProps

Adjust properties of separate components
{
AgentDesktopView: {

showPanel2: false

}
}

router

Use browser or in-memory routing for Flex
{

type: "memory",

history: {

initialEntries: [ "/agent-desktop" ]

}

}

disableTransfers

Disable conference transfers

React defaultProps API

You may also configure default properties for components using the React defaultprops API.

componentProps: { [Component Name]: { [Prop Name]: [PropValue] } }

Examples of setting props for Components:

flex.CRMContainer.defaultProps.uriCallback = (task) => {
            return task ? "https://www.bing.com/search?q=" + task.attributes.name : "http://bing.com/";
}

flex.MainHeader.defaultProps.logoUrl = "https://static0.twilio.com/marketing/bundles/archetype.alpha/img/logo-wordmark--red.svg";

Flex Agent and Supervisor UI

Component name

Prop Name

Type

Description

CRMContainer uri string

URI that is displayed in CRM container

CRMContainer uriCallback (task: Task) => string

A callback that returns an URI to be displayed in CRM container based on a selected task

(task) => {
return task ? "https://www.bing.com/search?q=" + task.attributes.name : "http://bing.com/";
}
MainHeader logoUrl string

URI for the logo displayed in the main top header

LoginView logoUrl string

URL for an image to be displayed at the login view instead of Twilio Logo

TaskListContainer

taskFilters

Array<TaskFilter>

Filter tasks displayed in the list

TaskFilter {

callback: (task: Task) => boolean; // callback to test if task belongs to this filter

text: string; // caption of the filter
}

TaskListContainer

staticTaskFilter

(task: Task) => boolean Callback to test if a task belongs to the static area (upper area before filters) in the task list
TaskListItem itemSize string

"Small" (default) - regular task list item size

"Large" - all task list items are 88px bigger in height, allowing for custom info below the default task list item content via `TaskExtraInfo` template.

"LargeSelected" - selected tasklist item is shown as "Large", others as "Small"

MainContainer keepSideNavOpen boolean Indicates whether Sidebar preview panel should be always visible. Default is false, which makes the preview show only after the whole app is wide enough.
MainContainer showNotificationBar boolean

if set to false, no notifications in NotificationBar will be shown

Read more about Notifications in Notifications Framework

MainContainer

showLiveCommsBar

boolean

Display an incoming call bar for views different from Agent UI

TaskList compareFunction (a: Task, b: Task) => number Callback to control how tasks should be sorted in task list. Negative number means task a should be above task b, positive number that a should be below b. 0 indicates equal priority.
AgentDesktopView showPanel2 boolean When set to false, will completely remove the right side area of the Agent View, where usually CRM resides, including the splitter control separating left and right side areas.
AgentDesktopView showFeedback boolean Show Ytica Feedback widget in main Agent Desktop view.
AgentDesktopView splitterOptions object

Allows specification of the default values for the main horizontal splitter in Agent Desktop view (separates the left view from the CRM area to the right). Values can either be pixels or % values, as in CSS.

{
initialFirstPanelSize?: string;
minimumFirstPanelSize?: string;
minimumSecondPanelSize?: string;
}

AgentsDataTable

tablePlaceHolder

ReactNode

A React element that is displayed when list of agent is empty

AgentsDataTable

initialCompareFunction

(a: IWorker, b: IWorker) => number

Determines agents order in the list

AgentsDataTable

filters

Array<AgentListFilter>

Filters agents displayed in the list

AgentsDataTable

taskFilter

string

An expression used to filter out agents tasks

WorkerCanvas

showSkill

boolean

Display skills section for the agent details

WorkerProfile

details

Array<WorkerProfileDetail>

Add details to the agents profile

TaskCanvasHeader

icon

string | React.ReactNode

An image displayed in the header of a task. If a string is provided, it should be an icon name from a list of Flex Icons

TaskCanvasHeader

ActionsComponent

React.ComponentType<{ task: ITask }>

An action component displayed in the header of a task. Defaults to end task button

TaskCanvasHeader

titleTemplateContext

Object

Context object used for rendering task title template

Tabs

alignment

"left" | "center"

Defined how tab header is aligned


Chat/Messaging Component for Flex UI and Twilio WebChat UI

These properties apply to both the Flex Agent Desktop UI and the Twilio WebChat UI - everywhere here the Chat/Messaging component is used.

Component name Prop Name Type Description
MessagingCanvas avatarCallback (identity: string) => string Callback function to return avatar URL of a member
MessagingCanvas memberDisplayOptions

MemberDisplayOptions {

yourDefaultName?: string;

theirDefaultName?: string;

yourFriendlyNameOverride?: boolean;

theirFriendlyNameOverride?: boolean;

}

Allows to override chat participant names, e.g. setting agent to Agent and customer to Customer.
MessagingCanvas messageStyle string

Defines the visual style of the message area.
Options are "Rounded", "Squared", "Minimal"

MessagingCanvas showReadStatus boolean Controls if message read indicator will be shown
MessagingCanvas showTypingIndicator boolean Controls if [SomeOne] is typing will be shown
MessagingCanvas showWelcomeMessage boolean Controls if welcome message will be shown at the beginning of the conversation
MessagingCanvas welcomeMessageText

CompiledTemplate

Text displayed as a welcome message

MessagingCanvas showTrayOnInactive boolean

Display message tray component, indicating that the chat is no longer active whenever channel status is inactive

MessageListItem useFriendlyName boolean

Override chat participant name with a friendly name

MessageInput areaStyle string Visual style of the text input element. Options are "Bubble", "Line", "Boxed"
MessageInput returnKeySendsMessage boolean Whether pressing the return key should send a message

MessageCanvasTray

showButton

boolean

Display a ‘Start new chat’ button in the tray

MessageCanvasTray

onButtonClick

() => void

A handler for a ‘Start new chat’ button click

Chat/Messaging Component for Flex UI and Twilio WebChat UI

Following components are specific to Flex Webchat UI.

Component name Prop Name Type Description

EntryPoint

tagline

string

The label at the chat entry point

EntryPoint

icon

string

The icon at the chat entry point

EntryPoint

bottom

string

Distance from widget bottom line to bottom edge of the screen

EntryPoint

right

string

Distance from widget right side to right edge of the screen

EntryPoint

color

string

Text color of the entry point

EntryPoint

background

string

Background color of the entry point

EntryPoint

entryPointBorderStyle

string

If the value is set to "Rounded", the entry point button will have round edges

MainContainer

height

string

Height of the expanded webchat

MainContainer

width

string

Width of the expanded webchat

MainContainer

bottom

string

Distance from webchat bottom to the bottom of the screen

MainContainer

right

string

Distance from webchat right side to right edge of the screen

MainHeader

titleText

string

Override header title of the expanded webchat

MainHeader

imageUrl

string

Override header logo of the expanded webchat

MainHeader

showTitle

boolean

Should the title be displayed in the header

MainHeader

showImage

boolean

Should the logo be displayed in the header

Configuring authentication and Single Sign-On

To configure integration to Identity Provider and enable Single Sign-On the following must be set.

config.sso = {
  accountSid: string; // AccountSid of your Twilio Project. Example - ACxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
}

Session state in Redux Store will contain:

loginState - state of the login.
ssoTokenPayload - token payload from Identity Provider.
identity - user identity used for SSO procedure.
loginError - an error occured during login.
loginHandler - an object that contains parameters of the login procedure.

Configuring CRM Integration

CRM integrated into an Iframe controlled by Flex.

uriCallback: (task: ITask) => string;

Callback to be called every time an active task is changed. It is possible to provide a CRM URI for that particular task or just a constant URI. Example:

flex.CRMContainer.defaultProps.uriCallback = (task) => {
            return task ? "https://www.bing.com/search?q=" + task.attributes.name : "http://bing.com/";
}
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.