Styling the Widgets

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.

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)

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