Hi there,
Replacing the Virtual Agent client icons is a commonly asked question by customers while implementing Virtual Agent. It's well described on the ServiceNow Product Documentation, and I've written articles on this before for both Service Portal Agent Chat configuration and the (legacy) Service Portal widget. Though what if you don't want to change the minimize chat icon with an image, though just with another character? Because actually the minimize chat icon, is not an icon but just a character.
Let's dig into this!
Virtual Agent client minimize chat icon
Just to be on the same page, what I mean with the Virtual Agent client minimize chat icon:
CSS
If using the (legacy) Service Portal widget, you could clone and edit it. With Service Portal Agent Chat configuration, cloning and editing the widget is not an option. Anyway, in both cases, we actually also don't need such an approach. I do come across a lot of situations where I see widgets being cloned, also for what we are after in this article. Though why clone, if we can apply CSS. For example through the CSS variables field on the Portal record, or applying a CSS Include on the Theme associated with the Portal record.
The first thing would be finding out where the minimize chat icon technically is located, and what the CSS element and its contents concerned is. Open the Virtual Agent client on the Portal (it doesn't matter if it's Employee Center or Service Portal), right mouse click on the Virtual Agent minimize chat icon and select from the context menu Inspect. Something like the below should be visible when inspecting the Virtual Agent minimize chat icon:
On the top right, notice element .sp-ac-root button.sp-ac-btn.open:after. That's the CSS element we are after. Within that element, pay attention to the part concerning content: "\f153". That's the part we would like to influence to change the Virtual Agent minimize chat icon. If you would change this manually to any other value, you would directly see the effect. This is also a nice method to test any changes and possibilities quickly. For example change the value to content: "\f148". Now a different icon will be shown. Also notice the font-family: "retina-icons", you could also change this to have different characters available! Just play around with it to get a feeling for the possibilities.
CSS Variables
To make the changes tested above permanent, we could add CSS through the methods mentioned earlier. For this article, we'll go for applying CSS within the CSS variables field on the Portal record. Navigate to "Service Portal > Portals" and select the Portal on which this should be applied. Here you will find the CSS variables field mentioned and where you can add the CSS element which we want to override including new content. Something like the below would work:
.sp-ac-root button.sp-ac-btn.open:after {
content: "\f148"
}
Result
After saving the Portal record, and refreshing the Portal, the Virtual Agent client minimize chat icon should display similar like:
The added CSS is immediately effective. You just changed the Virtual Agent client minimize icon!
---
And that's it actually. Hope you like it. If any questions or remarks, let me know!
| If this post helped you in any way, I would appreciate it if you hit bookmark or mark it as helpful. Interested in more articles, blogs, videos, and Share projects on Virtual Agent I published? - Virtual Agent |
Kind regards,
Mark
2020-2022 ServiceNow Community MVP
2020-2022 ServiceNow Developer MVP
---
The styles part has changed(we are in Xanadu). You now have to scroll all the way down, before you can find the content part.
And the code 148 does not give me a -, but code 114 gives an arrow down(see below), so I went with that
Also the css code slightly changed:
.sp-ac-root button.sp-ac-btn.open .icon-cross:before {
content: "\f114"
}
