Dan H
Tera Guru

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.

find_real_file.png to find_real_file.png

 

Step 1. Locate your Service Portal Theme.

Service Portal -> Themes in the navigator.

find_real_file.png

 

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:

find_real_file.png

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.

 

find_real_file.png

 

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]

 

 

Comments
Dawid Kowal
Tera Contributor

This was helpful. Other ways to change that did not work.

Version history
Last update:
‎06-21-2020 09:25 AM
Updated by: