Styling the Widgets

You can apply your own format to the Widgets by overriding CSS properties.

Warning

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

Styling the Chat Widget

The root CSS selector for the Chat Widget is:

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

The following is a list of CSS selectors for the different sections of the Chat 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

Custom Colors, Styles, and Fonts

You can customize the look and feel of widget to match with the style of the hosting web page. To do so, you need to 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.

The following CSS selectors in the default CSS file can be overwritten:

• insert selectors here

In the following sample code, we change the:

• font size;
• typeface and color;
• background color;
• rounded corners;
• border thickness; and
• height and width

Insert code sample here