Styling the Widgets

Custom Colors, Styles, and Fonts

You can customize the look and feel of the widget to match with the style of your hosting web page. To do so, create another .CSS file with the styles that you want to overwrite the default .CSS file for the widget. Ensure that when you specify the new .CSS style sheet in the HTML code for the web page that you list the second .CSS file after the default .CSS file.

Warning

Exercise caution when you make changes to the CSS to make sure functionality is retained.

Warning

If you use a custom Cascading Style Sheet (CSS) file, the styles defined in Genesys Widget may be overwritten and therefore the appearance of the Widgets user interface might be altered.

Important

By default, the Widgets CSS refers to the Roboto font, available at https://fonts.googleapis.com

Styling the Widget

The root CSS selector for the Widget is:

.cx-webchat or .cx-widget.cx-webchat

The following is a list of CSS selectors for the different sections of the Widget:

• .cx-webchat .cx-titlebar
• .cx-webchat .cx-body
• .cx-webchat .cx-body .form
• .cx-webchat .cx-body .transcript
• .cx-webchat .cx-body .input-container
• .cx-webchat .cx-body .confirmation
• .cx-webchat .cx-footer

The following is a list of CSS selectors for the different chat participant types in the transcript:

• .cx-webchat .transcript .system (for system messages)
• .cx-webchat .transcript .them (for agent messages)
• .cx-webchat .transcript .you (for customer messages)

Example

The following is an example of a custom .CSS:

.cx-widget.cx-theme-dark.cx-theme-dark.cx-widget{
	background-color: olive;
	color: blue;
}

.cx-common-container .cx-body{
	font-size: 120%;
}

Changing the Master Font for All Widgets

The following is an example on how to override the .CSS in order to refer to a local font:

.cx-widget{

    font-family: Roboto;
}