When needing to change the colour of the Virtual Agent widget myself for the first time, it proved difficult to find a fast and simple way to do this.

Although there are a few methods of doing this posted online. This is the simplest method I could find.

This article will describe how to change the Virtual Agent icon from the OOTB colour to a new colour.

to

Step 1. Locate your Service Portal Theme.

Service Portal -> Themes in the navigator.

Step 2. In the CSS variable field for the theme, add the line:

$sp-agent-chat-bg: #50de37;

And change the HTML colour code to the colour of your choice.

The css variables field will now look something like:

Step 3. Save and update the theme. Refresh the Service Portal.

You will now see the colour of the Virtual agent widget changed to your chosen HTML colour.

And that's it!

To see how to change the appearance of the Virtual Agent OOTB widget to the one shown above check out my article:

[Link coming following moderation]