# Flex UI configuration

> \[!NOTE]
>
> For the Flex UI 2.x.x version of this content, see [Configuration](/docs/flex/developer/ui/overview-of-flex-ui-programmability-options#configuration) in the overview of Flex UI programmability options.

> \[!WARNING]
>
> For Customers building HIPAA-compliant workflows with Flex UI, Customers are required to ensure that there is no PHI in any Properties of Configuration Objects. Details on Configuration Objects and Properties can be found on the official Flex UI [documentation](https://assets.flex.twilio.com/docs/releases/flex-ui/latest/overview/Config). To learn more about building for HIPAA compliance, please visit the latest requirements [here](/documents/architecting-for-HIPAA.pdf).

There are two main ways to define Flex configuration:

* For Twilio-hosted Flex deployments (flex.twilio.com), use the [Flex Configuration API](/docs/flex/developer/config/flex-configuration-rest-api) to set the configuration attributes.
* For customer self-hosted Flex deployments, you can define configuration via both the appConfig.js configuration object or via Flex Configuration API. **appConfig.js takes precedence.**

Flex UI's configuration allows you to control the way the overall app loads, as well as the behavior of individual Flex components.

Here's how you can modify Flex components:

* Using `componentProps` in the [Configuration Object](#appconfigjs-configuration-object)
* Using the [defaultProps API](#react-defaultprops-api)

## Modifying configuration for flex.twilio.com

The [appConfig.js configuration object](#appconfigjs-configuration-object) detailed in this article isn't directly accessible when using Twilio-hosted Flex (flex.twilio.com). However, you can set the same values as `ui_attributes` using the [Flex Configuration REST API](/docs/flex/developer/config/flex-configuration-rest-api).

## appConfig.js configuration object

In the configuration object, you can define the default properties of your Flex components. You can also configure properties that aren't tied to specific components.

*Example: public/assets/appConfig.js*

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

Some configuration options are *only* available through the configuration object. The list of all available configuration options is as follows.

### colorTheme: string | object

Redefines the color scheme.

```javascript
appConfig.colorTheme = {
  baseName: "GreyDark",
  colors: { base2: "red"},
  light: true,
  overrides: {
    MainHeader: {
      Container: {
        background: "green"
      }
    }
  }
};
```

### componentProps: object

Adjusts the properties of separate Flex components. For a list of available components, see [Flex UI 1.x.x Components](/docs/flex/developer/ui/v1/components).

```javascript
appConfig.componentProps = {
  AgentDesktopView: {
    showPanel2: false
  }
};
```

### dinableTransfers: Boolean

Disables conference transfers.

```javascript
appConfig.disableTransfers = false;
```

### logLevel: string | number (Default: 'error')

Sets the specificity of log output. Can be either a number or a string matching:

* `trace` or `0`
* `debug` or `1`
* `info` or `2`
* `warn` or `3`
* `error` or `4`
* `silent` or `5`

```javascript
appConfig.logLevel = 'info';
```

### pluginService: object

Sets whether to load [plugins](/docs/flex/developer/ui-and-plugins) to modify the Flex UI. Provides an optional URL to override Flex's default plugins source.

```javascript
appConfig.pluginService = {
  enabled: true,
  url: "https://example.com/plugins-list.json"
};
```

### router: object

Sets whether to use browser or in-memory routing for Flex.

```javascript
appConfig.router = {
  type: "memory",
  history: {
    initialEntries: [ "/agent-desktop" ]
  }
};
```

### sdkOptions: object

Flex initializes four standard Twilio server-side SDKs, which are accessible via the Flex Manager. These `sdkOptions` pass through as parameters used when initializing those SDKs. For example,  [Twilio.Device](/docs/voice/sdks/javascript/twiliodevice) parameters for `voice`.

```javascript
appConfig.sdkOptions = {
  chat: {},
  insights: {},
  voice: {},
  worker: {}
};
```

### serviceBaseUrl: string

Currently not used. This value defaults to the [runtime domain](/docs/serverless/functions-assets/functions) associated with your Twilio account. This is a reference to Functions you may be hosting to power backend API requests.

### sso: object

Enables support for authentication and single sign-on (SSO) using 3rd party identity providers like Okta.

```javascript
appConfig.sso = { 
  accountSid: "ACxxx" // AccountSid of your Twilio project 
};
```

### language: string

Currently not used.

## React defaultProps API

You can also configure default properties for components within a plugin by using the React `defaultprops` API programmatically:

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

*Example*

```javascript
flex.CRMContainer
  .defaultProps
  .uriCallback = (task) => 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";
```

The following is a list of Flex components and their `defaultProps`, which you can modify.

### Flex Agent and Supervisor UI

#### CRMContainer

**uri: string**

The URI that's displayed in the CRM container. This URI must be generated by the `uriCallback`.

**uriCallback: (task: Task) => string**

A callback that returns a URI to display in the CRM container based on a selected task. If you want to replace the CRMContainer component entirely, use the replace method instead.

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

#### MainHeader

**logoUrl: string**

The logo URL displayed in the main top header.

#### LoginView

**logoUrl: string**

The URL for the login view image (by default the Twilio Logo).

#### TaskListContainer

**staticTaskFilter: (task: Task) => Boolean**

A callback function describing a tasks' presence and order in the Flex UI. If a task returns `true` (for example, if it's a static or "pinned" task for the User's Flex UI), it appears in the upper section of the TaskList Container.

By default, Flex treats both live and incoming calls as static tasks.

#### TaskListItem

**itemSize: 'Small' | 'Large' | 'LargeSelected'**

The task list item size. Legal values include:

* `Small` (default): regular task list item size
* `Large`: all task list items are 156px 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 the Sidebar preview panel should be always visible. Default is `false`, which shows the preview only after the whole app is wide enough.

**showNotificationBar: Boolean**

If set to `false`, NotificationBar notifications isn't shown. See [Notifications Framework](/docs/flex/developer/ui/v1/notifications) for more information about notifications.

**showLiveCommsBar: Boolean**

Displays an incoming call bar for views different from Agent UI.

#### TaskList

**compareFunction: (task1: Task, task2: Task) => number**

Callback to control how Flex sorts tasks in the task list. A negative number means `task1` should be above `task2`. A positive number that `task1` should be below `task2`. The number 0 indicates equal priority.

#### AgentDesktopView

**showPanel2: Boolean**

When set to `false`, completely removes the right side area of the Agent View, where the CRM usually appears, including the splitter control separating left and right side areas.

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

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

#### AgentDesktopView.Panel1

**splitterOrientation: 'auto' | 'vertical' | 'horizontal' (Default: auto)**

Determines whether the orientation of the content is `vertical`, `horizontal`, or `auto` (automatic) based on the content size.

#### AgentsDataTable

**tablePlaceHolder: ReactNode**

The React element to display when the list of agents is empty.

**initialCompareFunction: (worker1: IWorker, worker2: IWorker) => number**

Callback to control how Flex sorts agents in the agent list. A negative number means `worker1` should be above `worker2`. A positive number that `worker1` should be below `worker2`. The number 0 indicates equal priority.

#### WorkerCanvas

**showSkill: Boolean**

Displays the skills section for the agent details.

#### WorkerProfile

**details: Array\<WorkerProfileDetail>**

Adds details to the agent's profile.

#### TaskCanvasHeader

**icon: string | ReactNode**

An image displayed in the task header of a task. If you provide an icon string, it needs to match an icon name from a list of [Flex UI icons](/docs/flex/developer/ui/v1/icons).

**ActionsComponent: ComponentType`<{ task: ITask }>`**

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

**titleTemplateContext: object**

Context object used for rendering the task title template.

#### Tabs

**alignment: 'left' | 'center'**

Defines how the tab header is aligned.

### Chat/Messaging Component for Flex UI

These properties apply to both the Flex Agent Desktop UI and the [Twilio WebChat UI](/docs/flex/developer/messaging/webchat/setup) - everywhere the Chat/Messaging component is used.

#### MessagingCanvas

**avatarCallback: (identity: string) => string**

Callback function to return the avatar URL of a member.

**memberDisplayOptions: object**

Allows overriding chat participant names, like setting agent to Agent and customer to Customer.

```javascript
{
  yourDefaultName?: string;
  theirDefaultName?: string;
  yourFriendlyNameOverride?: boolean;
  theirFriendlyNameOverride?: boolean;
}
```

**messageStyle: 'Rounded' | 'Squared' | 'Minimal'**

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

**showReadStatus: Boolean**

Controls whether to show the message read indicator.

**showTypingIndicator: Boolean**

Controls whether to show "\[Someone] is typing" in chat.

**showWelcomeMessage: Boolean**

Controls whether to show the welcome message at the beginning of the conversation.

**welcomeMessageText: string**

The welcome message text to display.

**showTrayOnInactive: Boolean**

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

#### MessageListItem

**useFriendlyName: Boolean**

Overrides the chat participant name with a friendly name.

#### MessageInput

**areaStyle: 'Bubble' | 'Line' | 'Boxed'**

The visual style of the text input element. Options are `Bubble`, `Line`, `Boxed`.

**returnKeySendsMessage: Boolean**

Sets whether pressing the return key sends a message.

#### MessageCanvasTray

**showButton: Boolean**

Displays a "Start new chat" button in the tray.

**onButtonClick: () => void**

A handler for a "Start new chat" button click.

## Configure Authentication and Single Sign-On

To configure an integration with an identity provider and enable single sign-on, set the `appConfig.sso` property as described in the following code sample.

```javascript
appConfig.sso = {
  accountSid: string; // AccountSid of your Twilio Project
  loginPopup: Boolean; // whether to launch IdP login in new window
  loginPopupFeatures: string; // standard window.open() features param to be applied to popup window
};
```

The session state in Redux Store contains:

* `loginState` - state of the login
* `ssoTokenPayload`: the token payload from the Identity Provider
* `identity`: user identity used for SSO procedure
* `loginError`: an error occurred 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 function that's called every time an active task is changed. You can provide a CRM URI for that particular task or a constant URI.

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