Versions Compared

Old Version 18

changes.mady.by.user spg bot

Saved on

compared with

New Version 19

changes.mady.by.user Iryna Ihnatiuk

Saved on

Key

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

...

Info

When customizing the style, you will often have to use the !important CSS keyword to force your modifications, because the chat uses deeply specific CSS rules, to prevent leaking its styles into parent page's HTML content.

Customer Portal

...

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:

Image Modified


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

Code Block
languagecss
.support-chat-sd-icon-class{
	background-color: darkcyan !important;
}


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

...

Image Added

    

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.

...