Virtual Agent button icon customizations

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

Hi there,

A popular request on Virtual Agent is on changing the button icon. Often the Virtual Agent widget is cloned and edited to fulfill such a request. Though as you might have seen in the last Virtual Agent Academy Live webinar: cloning and editing of the Virtual Agent Service Portal widget is not necessary, within minutes you could change the button icon just using CSS! Also with this, you could still use the preferred ServiceNow method: using the Service Portal Agent Chat Configuration.

Within this article I will follow-up on the Virtual Agent Academy Live webinar with some additional examples on replacing the button icon.

Note: The examples shown are made using a Chrome browser.

Live Agent Chat Configuration

In this article I will only share thoughts on how to change the button icon, using the Service Portal Agent Chat Configuration. This is the preferred ServiceNow method for adding the Virtual Agent to your Portal(s).

Out-of-the-box

The button icon which we are referring to, out-of-the-box looks like:

Theme > CSS Include > Stylesheet

First thing when we would like to work on the look and feel of the button icon, is adding a CSS Include and Stylesheet to the Theme of the Portal where you would like to see changes made. This is demonstrated in the Virtual Agent Academy Live webinar of june-30:
https://www.youtube.com/watch?v=100DtpGLBVo&t=1124

Changing the button icon

Icon image

In the Virtual Agent Academy Live webinar of june-30 I've demonstrated how to apply a different Icon. Let's just do this again.

First we would need to know which CSS we are actually after. On the Virtual Agent button icon, right-mouse click, inspect. You would need to find the correct Element(s), and then the Styles you are after are shown.

In this case, we are specifically after the background-image used. The background-image can be found within .sp-ac-root button.sp-ac-btn-closed.

Within the Stylesheet created, you could now just apply:

.sp-ac-root button.sp-ac-btn.closed {
  background-image: url(general.svg);
}

general.svg could be anything you'd like. Just add a new Image to the Images table. The general.svg is just an out-of-the-box image.

After applying this, a new image will be visible. Though, it doesn't look really nice yet. You could just add an image with the same sizing of the out-of-the-box image and a transparent background, then you would be done already! Though in this case, we would need to do a little bit more.

We know the size of the out-of-the-box button has 60px height and width. So let's add CSS to resize the image used. Because the image used is actually bigger than 60px, we will also change the position.

.sp-ac-root button.sp-ac-btn.closed {
  background-image: url(general.svg);
  background-position: center 0px;
  background-size: 60px 60px;
}

This would already result in:

Icon size

So what if you would like to have a larger button icon? Sure, can be done also. We would just need to change the 60px height and width used within the .sp-ac-root button.sp-ac-btn which we saw earlier (obviously we would also need to change the background-size which we added in the previous step). In this case I will be doing this in the element above, .sp-ac-root button.sp-ac-btn.closed so only the button icon size will be changed, and not the button shown when the Virtual Agent chat client is opened.

.sp-ac-root button.sp-ac-btn.closed {
  background-image: url(general.svg);
  background-position: center 0px;
  background-size: 120px 120px;

  height: 120px;
  width: 120px;
}

This would result in:

While the button shown when the Virtual Agent chat client is opened, still has it's original size:

Icon shape

The button icon is always shown as a circle. So what if that is not what you are after? Well your stuck, though luck!

No 😀.

For this we could change the border radius. Two examples:

.sp-ac-root button.sp-ac-btn.closed {
  background-image: url(general.svg);
  background-position: center 0px;
  background-size: 120px 120px;

  height: 120px;
  width: 120px;

  border-radius: 15px;
}

.sp-ac-root button.sp-ac-btn.closed {
  background-image: url(general.svg);
  background-position: center 0px;
  background-size: 120px 120px;

  height: 120px;
  width: 120px;

  border-radius: 0;
}

Icon border

What if you would like to apply a border? And what about the out-of-the-box shadow shown, can we remove that? The border you would not have seen when inspecting your browser. Though, it's just a valid CSS element, so you could add this yourself.

.sp-ac-root button.sp-ac-btn.closed {
  background-image: url(general.svg);
  background-position: center 0px;
  background-size: 120px 120px;

  height: 120px;
  width: 120px;

  border-radius: 0;
}

.sp-ac-root button.sp-ac-btn {
  border: 2px solid black;
  box-shadow: none;
}

If added the border and the box-shadow to the .sp-ac-root button.sp-ac-btn class so it will be applied on both the button shown when the Virtual Agent chat client is opened and closed.

Wrap-up

So here you have it. A lot more examples of what you could do on the button icon for the Virtual Agent. All with just using out-of-the-box configuration and using the preferred ServicenNw method of using the Service Portal Agent Chat Configuration.

A lot more can still be achieved. If you are wild on CSS - or good with Google 😀 - you could do a lot more on customizing the look and feel of the Virtual Agent chat client and the button icon.

---

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

Kind regards,

Mark Roethof

ServiceNow Technical Consultant @ Quint Technology

1x ServiceNow Developer MVP

1x ServiceNow Community MVP

---

LinkedIn