---
title: "Customizing Chat Style"
canonical: "https://support.appfire.com/space/CFSD/147784141/Customizing%20Chat%20Style"
format: markdown
---
# Overview

It is possible to customize the look of the chat widget (both the icon and the chat itself) by modifying the CSS rules for classes used for chat HTML elements. 

The methods to do it are different for chats placed on the customer portal and on the external web sites. In both cases, it is necessary to have a knowledge of CSS and to have some HTML inspection tools available (the ones built into browsers, like [Chrome Developer Tools](https://developer.chrome.com/devtools) or [Firefox Developer Tools](https://developer.mozilla.org/en-US/docs/Tools/Tools_Toolbox) can be used).

> ℹ️ 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](media://e1e88a77-692f-441d-8d41-ae1128609f2e)

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

```css
.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](media://63505a5c-7467-48a0-ba6b-6d55e12e03e0)

## External Websites

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](https://appfire.atlassian.net/wiki/spaces/CFSD/pages/147784136), paired with CSS rules placed on the page.

For example, to change the icon color to **darkcyan**, add the following to your web page where you placed the chat widget:

**Add iconClass to the chat configuration Javascript:**

```javascript
var spartezSupportChat = {
        url: 'https://jira.spartez.com',
        portal: 2,


		// ######## ADDED ############
        iconClass: 'my-chat-icon-class'
		// ######## END OF ADDED #####
    }
```

**Add CSS rules:**

```css
.my-chat-icon-class.support-chat-icon {
	background-color: darkcyan !important;
}
```