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