Interface

Theme

Theme

Theme options. Material UI theme options are also valid - see https://material-ui.com/customization/themes/
Properties:
Name Type Attributes Description
name string <optional>
UserActivityControls Object
Divider CSSProps
Items CSSProps
Item CSSProps
LoginView Object
Container CSSProps
LoginButton CSSProps
Logo CSSProps
RuntimeLoginView Object
Container CSSProps
LoginButton CSSProps
LoginFormView Object
Container CSSProps
LoginButton CSSProps
RootContainer CSSProps
AgentDesktopView Object
Panel1 CSSProps
Panel2 CSSProps
ContentSplitter CSSProps
MainHeader Object
Container CSSProps
Button Theme.ButtonThemeProps
MainContainer CSSProps
SideNav Object
Container CSSProps
Button Theme.ButtonThemeProps
Icon Theme.ButtonThemeProps
TaskCanvas Theme.TaskCanvasThemeProps
TaskCanvasHeader Object
Container CSSProps
EndTaskButton Theme.ButtonThemeProps
WrapupTaskButton Theme.ButtonThemeProps
IncomingTaskCanvas Theme.IncomingTaskCanvasThemeProps
ConnectingOutboundCallCanvas Theme.ConnectingOutboundCallCanvasThemeProps
CallCanvas Object
Button CSSProps
HangUpButton CSSProps
TaskInfoPanel Theme.TaskInfoPanelThemeProps
TaskDetailsPanel Theme.TaskDetailsPanelThemeProps
TaskList Object
Filter Object
Filter.Container CSSProps
Filter.EntryButton CSSProps
Filter.Menu Object
Filter.Menu.Items CSSProps
Filter.Menu.Item CSSProps
Item Object
Item.Container CSSProps
Item.SelectedContainer CSSProps
Item.Icon CSSProps
Item.Buttons Object
Item.Buttons.DefaultButton CSSProps
Item.Buttons.AcceptButton CSSProps
Item.Buttons.RejectButton CSSProps
TaskCard Object
Container Object
Container.Default CSSProps
Container.Selected CSSProps
Container.Hover CSSProps
IconArea Object
IconArea.Default CSSProps
ContentArea Object
ContentArea.Default CSSProps
ContentArea.Inactive CSSProps
TaskCardPlaceholder CSSProps
NoTasksCanvas Theme.NoTasksCanvasThemeProps
CRMContainer Object
Container CSSProps
Placeholder Object
Placeholder.Container CSSProps
Placeholder.Icon CSSProps
Placeholder.Button CSSProps
Placeholder.Hint CSSProps
Supervisor Object
Container CSSProps
TaskCanvas Theme.SupervisorTaskCanvasThemeProps
WorkerCanvas Object
WorkerCanvas.Container CSSProps
WorkerCanvas.Header CSSProps
WorkerCanvas.SectionCaption CSSProps
FilterButton CSSProps
Search Object
Search.Container CSSProps
Search.Button CSSProps
WorkerDirectory Object
Container CSSProps
Header Object
Header.Button CSSProps
Header.Container CSSProps
ItemsContainer CSSProps
Item CSSProps
ItemActionButton CSSProps
QueueItem Object
QueueItem.Avatar CSSProps
WorkerSkills Object
SaveButton CSSProps
CancelButton CSSProps
DeleteButton CSSProps
LoadingView Object
Container CSSProps
ErrorPage Object
Container CSSProps
Actions Object
Actions.RetryButton CSSProps
Actions.DownloadReportButton CSSProps
ParticipantsCanvas Theme.ParticipantsCanvasThemeProps
OutboundDialerPanel Theme.OutboundDialerPanelThemeProps
colors Theme.CoreThemeColors | Theme.BaseThemeColors theme colors
calculated Object Calculated properties
lightTheme boolean Whether theme is dark or light
textColor string Color for text
Chat ChatTheme Chat components theme properties
SidePanel Theme.SidePanelThemeProps components theme properties
Badge Theme.BadgeThemeProps components theme properties
FormComponents Theme.FormComponentsThemeProps FormComponents theme properties
Button Theme.ButtonThemeProps Button theme properties
Menu Theme.MenuThemeProps Menu theme properties
Progress Object Container for the Circular progress bar theme properties
Circular Theme.CircularProgressThemeProps Circular progress bar theme properties
Dialpad Theme.DialpadThemeProps Dialpad theme properties
Dialer Theme.DialerThemeProps Dialer theme properties
Avatar Theme.AvatarThemeProps Avatar theme properties
Tabs Theme.TabsThemeProps Tabs theme properties
UserCard Theme.UserCardThemeProps UserCard theme properties
SidePanel Theme.SidePanelThemeProps SidePanel theme properties
FilterList Theme.FiltersListThemeProps FilterList theme properties
Badge Theme.BadgeThemeProps Badge theme properties
CountrySelector Theme.CountrySelectorThemeProps CountrySelector theme properties

Type Definitions

# AgentDesktopViewThemeProps

Agent desktop theme props
Properties:
Name Type Description
Panel1 CSSProps panel 1 styles
Panel2 CSSProps panel 2 styles
ContentSplitter CSSProps content splitter styles

# AvatarThemeProps

Properties:
Name Type Description
Container CSSProps container
AvailabilityIcon CSSProps availability icon

# BadgeThemeProps

Properties:
Name Type Description
OuterCircle CSSProps external part of the circle that takes care of position and spacing around main inner circle
InnerCircle CSSProps main part of the circle - takes care of badge size, font and colors

# BaseThemeColors

Base Flex colors
Properties:
Name Type Description
holdColor string Color of the hold button
declineColor string Color of the decline button
declineTextColor string Color of the decline text
acceptColor string Color of the accept button
acceptTextColor string Color of the accept text
completeTaskColor string Color of the "complete task" button
flexBlueColor string FlexBlue color
agentAvailableColor string Color that indicates available agent status
agentBusyColor string Color that indicates busy agent status
agentUnavailableColor string Color that indicates unavailable agent status
agentOfflineColor string Color that indicates offline agent status

# ButtonThemeProps

Properties:
Name Type Attributes Description
disabledColor string <optional>
 Use the disabled color
lightHover boolean <optional>
 Use the light hover effect
CSSProps

# CircularProgressThemeProps

Properties:
Name Type Description
staticBackgroundBorderColor string color for static background border
animatingBackgroundBorderColor string color for animating background border
animatingForegroundBorderColor string color for animating foreground border

# ConnectingOutboundCallCanvasThemeProps

Properties of outbound call canvas theme.
Properties:
Name Type Description
CancelCallButton CSSProps Styles cancel call button.

# CoreThemeColors

Core theme colors Extends CoreThemeBaseplates
Properties:
Name Type Description
defaultButtonColor string The default button color
lightTextColor string The color for the light texts
darkTextColor string The color for the dark texts
buttonHoverColor string The color for the buttons hover state
tabSelectedColor string The color for the selected tabs
connectingColor string The color for the connecting copy
disconnectedColor string The color for the disconnected copy
notificationBackgroundColorInformation string The color for the information notifications background
notificationBackgroundColorSuccess string The color for the success notifications background
notificationBackgroundColorError string The color for the error notifications background
notificationIconColorWarning string The color for the icons in the warning notifications
notificationBackgroundColorWarning string The color for the warning notifications background
notificationIconColorError string The color for the icons in the error notifications
userAvailableColor string The color for available users
userUnavailableColor string The color for unavailable users
errorColor string Error color
errorGlow string Error glow
circularProgressColor string Color of the circular progress bar
disabledColor string Color the disabled elements
focusColor string Color for the focused elements
focusGlow string Color of the glow for the focused elements

# CountrySelectorThemeProps

Properties:
Name Type Description
CountryList CSSProps Style for the dialer's country list component
CountryItem CSSProps | Object Style for the dialer's country list component item
Flag CSSProps Style for the dialer's country list flag component

# DialerThemeProps

Properties:
Name Type Description
CallButton CSSProps Style for the dialer's Call Button

# DialpadButtonThemeProps

Properties:
Name Type Description
Container CSSProps | Object Style for the dialpad button's container
Caption CSSProps Style for the dialpad button's caption
Description CSSProps Style for the dialpad button's description

# DialpadThemeProps

Properties:
Name Type Description
Button Theme.DialpadButtonThemeProps Style for the dialpad's buttons

# FileAttachmentDropThemeProps

Properties:
Name Type Description
MainDropArea CSSProps Styles for the main attachment drop area
Icon CSSProps Styles for the icon
Title CSSProps Styles for the main line of text
SubTitle CSSProps Styles for the secondary line of text

# FiltersListThemeProps

Properties:
Name Type Description
ApplyButton CSSProps Styles for the main "Apply" button
ResetButton CSSProps Styles for the secondary "Reset" button
ItemContainer CSSProps Styles for the filter item wrapper element
ItemContainerExpanded CSSProps Styles for the expanded filter item wrapper element

# FormComponentsThemeProps

Properties:
Name Type Description
Input CSSProps Styles for the form input component
TextArea CSSProps Styles for the form textarea component
Select CSSProps Styles for the form select component

# IncomingTaskCanvasThemeProps

Properties of incoming task canvas theme.
Properties:
Name Type Description
AcceptTaskButton CSSProps Styles accept task button.
RejectTaskButton CSSProps Styles reject task button.

# MenuThemeProps

Properties:
Name Type Description
Items CSSProps Items container for menu items
Item CSSProps Item properties for an item

# MessageCanvasTrayThemeProps

Properties:
Name Type Description
Container CSSProps Style for the message canvas tray container
Button Theme.ButtonThemeProps Style for the message canvas tray's button

# MessageInputThemeProps

Properties:
Name Type Description
Container CSSProps Styles for the message input's container
Button Theme.ButtonThemeProps Styles for the message input's button
FileBox CSSProps Styles for the file box that appears when a file gets attached to chat input
RemoveFileButton Theme.ButtonThemeProps Styles for "remove attached file" button.
AttachFileButton Theme.ButtonThemeProps Styles for "attach file" button.

# MessageListItemThemeProps

Properties:
Name Type Description
FromMe Theme.MessageThemeProps Styles that represent how user sees their own messages
FromOthers Theme.MessageThemeProps Styles that represent how user sees messages from everyone else
ReadStatus CSSProps Styles for the "read" status text

# MessageListThemeProps

Properties:
Name Type Description
DateSeparatorLine CSSProps Styles for the line for date separators
DateSeparatorText CSSProps Styles for the text for date separators
TypingIndicator CSSProps Styles for the typing indicator

# MessageThemeProps

Properties:
Name Type Description
Avatar CSSProps Styles for the message avatar component
Bubble CSSProps Styles for the message bubble component
Header CSSProps Styles for the header of the message

# MessagingCanvasThemeProps

Properties:
Name Type Description
Container CSSProps Styles for the messaging canvas container

# NoTasksCanvasThemeProps

Properties of no task canvas theme.
Properties:
Name Type Description
Container CSSProps Styles container.
Hint CSSProps Styles hint text container.

# OutboundDialerPanelThemeProps

Properties of OutboundDialerPanel theme.
Properties:
Name Type Description
Container CSSProps Styles container in OutboundDialerPanel.
disabled CSSProps Styles disabled state.
Header CSSProps Styles header in OutboundDialerPanel.
HeaderButton CSSProps Styles header button in OutboundDialerPanel.

# ParticipantCanvasThemeProps

Properties of participant canvas theme.
Properties:
Name Type Description
Container CSSProps Styles participant container.
Avatar CSSProps Styles participant avatar.
StateHover CSSProps Styles hover state on participant avatar.
ConnectingAnimation CSSProps Styles participant connecting state.
Button CSSProps Styles button in participant canvas.
HangUpButton CSSProps Styles hang up button in participant canvas.

# ParticipantsCanvasNotificationThemeProps

Properties of participants canvas theme.
Properties:
Name Type Description
Container CSSProps Styles participants container.

# ParticipantsCanvasThemeProps

Properties:
Name Type Description
ParticipantCanvas Theme.ParticipantCanvasThemeProps Styles for a single participant.
Notification Theme.ParticipantsCanvasNotificationThemeProps Styles for notification in participants canvas.

# SidePanelThemeProps

Properties:
Name Type Description
Container CSSProps Main container
Header CSSProps Header element
HeaderButton CSSProps Close button in header element

# TabsThemeProps

Properties:
Name Type Description
Container CSSProps Styles for the tabs container
LabelsContainer CSSProps Styles for the container for the tab header labels
Button Theme.ButtonThemeProps Styles for the icon based tab headers
Active CSSProps Styles for the active tab header container
Inactive CSSProps Styles for the inactive tab header container

# TaskCanvasHeaderThemeProps

Properties of task canvas header theme.
Properties:
Name Type Description
Container CSSProps Styles task canvas header container.
EndTaskButton Theme.ButtonThemeProps Styles end task button.
WrapupTaskButton Theme.ButtonThemeProps Styles wrap up task button.

# TaskCanvasThemeProps

Properties of task canvas theme.
Properties:
Name Type Description
Container CSSProps Styles task canvas container.

# TaskDetailsPanelThemeProps

Properties of taks details panel theme.
Properties:
Name Type Description
Container CSSProps Styles task details panel container.
IconContainer CSSProps Styles icon container in task details panel.
SecondLine CSSProps Styles second line container in task details panel.

# TaskInfoPanelThemeProps

Properties of taks info panel theme
Properties:
Name Type Description
Container CSSProps Styles task info panel container.

# ThemeProps

Properties:
Name Type Attributes Description
theme Theme <optional>

# UserCardThemeProps

Properties:
Name Type Description
AvatarContainer CSSProps Styles for the container for the avatar
AvailabilityContainer CSSProps Styles for the container for the availability badge

# WelcomeMessageThemeProps

Properties:
Name Type Description
Container CSSProps Styles for the container for the chat welcome message
Icon CSSProps Styles for the container for the chat welcome message icon