Page tree

Versions Compared


  • This line was added.
  • This line was removed.
  • Formatting was changed.


UI Tabs
UI Tab

In the customer portal, it is impossible to directly modify the portal's HTML source code, so when placed there, chat adds two classes to its elements:

  • support-chat-sd-icon-class to the chat icon
  • support-chat-sd-chat-class to the toplevel element of the chat itself

Using the Settings → Chat → Translate and Customize ("Customize Appearance on Service Desk Portal" tab), you can insert CSS rules that you define into the portal pages. This is done in the Icon CSS and Chat CSS input boxes:

For example, to change the color of the chat icon to darkcyan, provide the following in the Icon CSS box:

Code Block
	background-color: darkcyan !important;

This will result in the change in appearance of the chat icon on the customer portal:

UI Tab

In the customer portal, you can set up how the chat button will look like. You can select one of the built-in styles ("normal" and "subtle"), or you can define your own style of the button, setting the text and background color. Note that the custom button style does not display chat icon. 

You can also define the dominant color of the chat widget itself

Image Modified


Cloud version of chat allows setting the customizations of the look of the chat widget in each project separately, in the Project Settings page.

External Web Sites

On external web sites, the way to customize appearance of the chat differs - it is based on the snippet of HTML code placing the widget on the web site, paired with CSS rules placed on the page.