RuntimeLoginView: object

Theme properties for RuntimeLoginView component

Container: CSSProps - CSS properties for the RuntimeLoginView container
LoginButton: CSSProps - CSS properties for the login button on the login form

LoginFormView: object

Theme properties for the login form

Container: CSSProps - CSS properties for the login form wrapper
LoginButton: CSSProps - CSS properties for the LoginButton

RootContainer: CSSProps

CSS properties for the upmost application wrapper

AgentDesktopView: object

Theme properties for the AgentDesktopView component

Panel1: CSSProps - CSS properties for the panel containing the task list and task detail
Panel2: CSSProps - CSS properties for the panel containing the CRM view
ContentSplitter: CSSProps - CSS properties for the component splitter, the element that, once dragged, resizes the view

MainHeader: object

Theme properties for the MainHeader component, the banner at the top of the UI

Container: CSSProps - CSS properties for the header wrapper element
Button: Theme.ButtonThemeProps - Style Properties for the MUI buttons used in header like "Toggle Side nav", "Toggle mute", "Toggle dialpad sidebar"

disabledColor?: string - Use the disabled color
lightHover?: boolean - Use the light hover effect

MainContainer: CSSProps

CSS properties for the element wrapping sideNav and views

SideNav: object

Theme properties for the sidebar elements

Container: CSSProps - CSS properties for the sidebar wrapper
Button: Theme.ButtonThemeProps - Style properties for the sidebar buttons

disabledColor?: string - Use the disabled color
lightHover?: boolean - Use the light hover effect

Icon: Theme.ButtonThemeProps - Style properties for the sidebar icons

disabledColor?: string - Use the disabled color
lightHover?: boolean - Use the light hover effect

TaskCanvas: Theme.TaskCanvasThemeProps

Style Properties for the component that renders the task canvas.

Container: CSSProps - Styles task canvas container.

TaskCanvasHeader: object

Theme properties for the TaskCanvasHeader component

Container: CSSProps - CSS properties for the TaskCanvasHeader container
EndTaskButton: Theme.ButtonThemeProps - Style properties for the end task button

disabledColor?: string - Use the disabled color
lightHover?: boolean - Use the light hover effect

WrapupTaskButton: Theme.ButtonThemeProps - Style properties for the wrap up task button

disabledColor?: string - Use the disabled color
lightHover?: boolean - Use the light hover effect

IncomingTaskCanvas: Theme.IncomingTaskCanvasThemeProps

Style Properties for the IncomingTaskCanvas

AcceptTaskButton: CSSProps - Styles accept task button.
RejectTaskButton: CSSProps - Styles reject task button.

ConnectingOutboundCallCanvas: Theme.ConnectingOutboundCallCanvasThemeProps

Style Properties for the outbound call canvas

CancelCallButton: CSSProps - Styles cancel call button.

CallCanvas: object

Theme properties for the CallCanvas component

Button: CSSProps - CSS properties for all the buttons on the call canvas
HangUpButton: CSSProps - CSS properties for the hang up call button

TaskInfoPanel: Theme.TaskInfoPanelThemeProps

Style properties for the task info panel

Container: CSSProps - Styles task info panel container.

TaskDetailsPanel: Theme.TaskDetailsPanelThemeProps

Style properties for the task details panel

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.

TaskList: object

Theme properties for the TaskList component

Filter: object - Theme properties for the task list filter component

Container: CSSProps - CSS properties for the filter wrapper component
EntryButton: CSSProps - CSS properties for the filter entry button
Menu: object - Theme properties for the filter menu

Items: CSSProps - CSS properties for menu items
Item: CSSProps - CSS properties for menu item

Item: object - Theme properties for the TaskList items

Container: CSSProps - CSS properties for all item containers
SelectedContainer: CSSProps - CSS properties for the selected item container
Icon: CSSProps - CSS properties for all icons
SelectedIcon: CSSProps - CSS properties for selected icon
Buttons: object - Theme properties for the Item buttons

DefaultButton: CSSProps - CSS properties for the default button
AcceptButton: CSSProps - CSS properties for the accept button
RejectButton: CSSProps - CSS properties for the reject button

TaskCard: object

Theme properties for the TaskCard component

Container: object - Theme properties for the wrapper component

Default: CSSProps - CSS properties for the wrapper component
Selected: CSSProps - CSS properties for when the wrapper is selected
Hover: CSSProps - CSS properties for when the wrapper is hovered on

IconArea: object - Theme properties for the task card icon

Default: CSSProps - CSS properties for the task card icon

ContentArea: object - Theme properties for the TaskCard content

Default: CSSProps - CSS properties for the content
Inactive: CSSProps - CSS properties for when the content area is inactive

TaskCardPlaceholder: CSSProps

CSS properties for placeholder component when there are no tasks to display

NoTasksCanvas: Theme.NoTasksCanvasThemeProps

Style properties for the NoTasksCanvas component

Container: CSSProps - Styles container.
Hint: CSSProps - Styles hint text container.

CRMContainer: object

Theme properties for the CRMContainer

Container: CSSProps - CSS properties for the wrapper component
Placeholder: object - Theme properties for the placeholder component

Container: CSSProps - CSS properties for the wrapper
Icon: CSSProps - CSS properties for the icon
Button: CSSProps - CSS properties the button
Hint: CSSProps - CSS properties the hint

Supervisor: object

Theme properties for the Supervisor component

Container: CSSProps - CSS properties for the wrapper component
TaskCanvas: Theme.SupervisorTaskCanvasThemeProps - Style properties for TaskCanvas component
WorkerCanvas: object - Theme properties for the WorkerCanvas component

Container: CSSProps - CSS properties for the wrapper
Header: CSSProps - CSS properties for the header
SectionCaption: CSSProps - CSS properties for all the section captions

FilterButton: CSSProps - CSS properties for the filter button
Search: object - Theme properties for the search input

Container: CSSProps - CSS properties for the wrapper
Button: CSSProps - CSS properties for the search button

WorkerDirectory: object

Theme properties for the WorkerDirectory component

Container: CSSProps - CSS properties for the wrapper
Header: object - Theme properties for the header

Button: CSSProps - CSS properties for the clickable header
Container: CSSProps - CSS properties for the wrapper

ItemsContainer: CSSProps - CSS properties for all the item wrapper components
Item: CSSProps - CSS properties for all the items
ItemActionButton: CSSProps - CSS properties for the action button
QueueItem: object - Theme properties for queue items

Avatar: CSSProps - CSS properties for the avatar

WorkerSkills: object

Theme properties for the WorkerSkills component

SaveButton: CSSProps - CSS properties for the save button
CancelButton: CSSProps - CSS properties for the cancel button
DeleteButton: CSSProps - CSS properties for the delete button

LoadingView: object

Theme properties for the LoadingView component

Container: CSSProps - CSS properties for the wrapper

ErrorPage: object

Theme properties for the Error Page

Container: CSSProps - CSS properties for the wrapper component
Actions: object - Theme properties for the error page action buttons

RetryButton: CSSProps - CSS properties for the retry button
DownloadReportButton: CSSProps - CSS properties for the download report button

ParticipantsCanvas: Theme.ParticipantsCanvasThemeProps

Style properties for the Participants Canvas

ParticipantCanvas: ParticipantCanvasThemeProps - Styles for a single participant.

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.

Notification: ParticipantsCanvasNotificationThemeProps - Styles for notification in participants canvas.

Container: CSSProps - Styles participants container.

OutboundDialerPanel: Theme.OutboundDialerPanelThemeProps

Style properties for the Outbound Dialer

Container: CSSProps - Styles container in OutboundDialerPanel.

disabled: CSSProps - Styles disabled state.

Header: CSSProps - Styles header in OutboundDialerPanel.
HeaderButton: CSSProps - Styles header button in OutboundDialerPanel.

colors: Theme.CoreThemeColors | Theme.BaseThemeColors

theme colors

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

Chat: ChatTheme

Chat components theme properties

SidePanel: Theme.SidePanelThemeProps

components theme properties

Container: CSSProps - Main container
Header: CSSProps - Header element
HeaderButton: CSSProps - Close button in header element

Badge: Theme.BadgeThemeProps

components theme properties

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

FormComponents: Theme.FormComponentsThemeProps

FormComponents theme properties

Input: CSSProps - Styles for the form input component
TextArea: CSSProps - Styles for the form textarea component
Select: CSSProps - Styles for the form select component

Button: Theme.ButtonThemeProps

Button theme properties

disabledColor?: string - Use the disabled color
lightHover?: boolean - Use the light hover effect

Menu: Theme.MenuThemeProps

Menu theme properties

Items: CSSProps - Items container for menu items
Item: CSSProps - Item properties for an item

Progress: object

Container for the Circular progress bar theme properties

Circular: Theme.CircularProgressThemeProps - Circular progress bar theme properties

staticBackgroundBorderColor: string - color for static background border
animatingBackgroundBorderColor: string - color for animating background border
animatingForegroundBorderColor: string - color for animating foreground border

Dialpad: Theme.DialpadThemeProps

Dialpad theme properties

Button: DialpadButtonThemeProps - Style for the dialpad's buttons

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

Dialer: Theme.DialerThemeProps

Dialer theme properties

CallButton: ButtonThemeProps - Style for the dialer's Call Button

disabledColor?: string - Use the disabled color
lightHover?: boolean - Use the light hover effect

Avatar: Theme.AvatarThemeProps

Avatar theme properties

Container: CSSProps - container
AvailabilityIcon: CSSProps - availability icon

Tabs: Theme.TabsThemeProps

Tabs theme properties

Container: CSSProps - Styles for the tabs container
LabelsContainer: CSSProps - Styles for the container for the tab header labels
Button: ButtonThemeProps - Styles for the icon based tab headers

disabledColor?: string - Use the disabled color
lightHover?: boolean - Use the light hover effect

Active: CSSProps - Styles for the active tab header container
Inactive: CSSProps - Styles for the inactive tab header container

UserCard: Theme.UserCardThemeProps

UserCard theme properties

AvatarContainer: CSSProps - Styles for the container for the avatar
AvailabilityContainer: CSSProps - Styles for the container for the availability badge
FirstLineInfoContainer: CSSProps - Styles for the container for the first line of the user card information
SecondLineInfoContainer: CSSProps - Styles for the container for the second line of the user card information

FilterList: Theme.FiltersListThemeProps

FilterList theme properties

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

CountrySelector: Theme.CountrySelectorThemeProps

CountrySelector theme properties

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

Theme

Properties: