Articles, Blogs, Videos, Podcasts, Share projects - Experiences from the field

Hi there,

Using Agent Chat configuration, you might wonder how to change the presentation of the Virtual Agent Service Portal widget icon. I did show some possibilities a few months ago on one of the Virtual Agent Live Academy webinars. This was still on the Orlando-release. So no need for cloning and editing the widget just for this, only CSS.

A few weeks later, ServiceNow introduced a small though very effective new way of changing the widget icon. Although it's written out clearly on the ServiceNow Docs, this is still a very common asked question. Probably because changing the widget icon is not mentioned under Virtual Agent on the Docs I also accidentally came across this.

Out-of-the-box

Docs

With the New York-release, we already had the $sp-agent-chat-bg property. With the Paris-release, $sp-agent-chat-btn-close and $sp-agent-chat-btn-open properties have been added.

Full details are mentioned on the Docs.

Customize the Agent Chat icon

A quick how-to, if we want to change the out-of-the-box look of the Virtual Agent Service Portal widget icon (or actually the Agent Chat icon).

First, locate the Service Portal you are after, and open the Theme which is being used. For example:

Within the Theme CSS Variables, you can add the properties which are mentioned on the Docs. You can use any combination of these properties, you don't specifically need to use all three properties, only applying the $sp-agent-chat-bg would also be possible.

If we would like to change the background color of the icon to white, we could use:

$sp-agent-chat-bg: white;

- OR -

$sp-agent-chat-bg: #FFFFFF;

If we would like to change the icon shown when the widget is closed, we could use:

$sp-agent-chat-btn-close: url("/tack-icon.png");

If we would like to change the icon shown when the widget is open, we could use:

$sp-agent-chat-btn-open: url("/book-icon.png");

Note: Concerning the URL, this is slightly different than mentioned on the Docs. The Docs mentions a wrong usage of the URL.

Alternatively, you can upload your own image to the images table. You would reference this simply like:

$sp-agent-chat-btn-close: url("/image-name-uploaded-to-image-table.png");

Result

And that's it! No complicated overriding CSS needed anymore. Only the usage of some very basic properties. After applying the above three properties, the result would look like:

---

And that's it actually. Hope you like it. If any questions or remarks, let me know!

Kind regards,

Mark Roethof

ServiceNow Technical Platform Architect @ Quint Technology

1x ServiceNow Developer MVP

1x ServiceNow Community MVP

---

LinkedIn