Virtual Agent - Custom Icon

[Paul Curwen]

I'm looking to use a custom image for the standard Virtual Agent Icon. Should be simple enough I thought. 

It's still not a Widget option for some reason (come on ServiceNow), so I followed the following related posts (some great articles by Mark Roethof (Thanks Mark) 😞

https://community.servicenow.com/community?id=community_article&sys_id=8bbd6a92dbd8ffc42be0a851ca961...

https://community.servicenow.com/community?id=community_question&sys_id=e6bfd9c4db1fa300107d5583ca96...

https://community.servicenow.com/community?id=community_question&sys_id=5a02ca82db91e7401089e15b8a96...

I've managed to get it changed using a fav-icon as below:

What I would like to do is use a custom image as the above posts mention doing as below.

.sn-va-widget-icon {
    	background-image: url('sn_virtual_agent.png');
}

However, when I attempt this all I am getting a white square. My image is in the image library and has the correct name and format. CSS is: 

    .sn-va-widget-icon {
    	background-image: url('/sn-va-sp-widget-icon.svg');
      height: 90px;
      top: 1px;
      left: 4px;
      width:50px;
      display: block
    }

I've tried both PNG and SVG formats to no avail. Brian S. mentions the same issue in his Reply on this post:

https://community.servicenow.com/community?id=community_question&sys_id=e6bfd9c4db1fa300107d5583ca96...

According to this HI article it needs to be an SVG:

https://hi.service-now.com/kb_view.do?sysparm_article=KB0726500

What I'm after is as below. Anyone care to advise?

[Mark Roethof]

Hi there,

If it's only a different Icon, then maybe this could be achieved with CSS override. Though this is a pretty precise job... if the image is too big for example, you'll just see a small piece, a square, etc.. So if going for CSS override, the height/width should exactly match.

Also see for example:
https://community.servicenow.com/community?id=community_article&sys_id=a856535cdbb74494190dfb2439961...

If my answer helped you in any way, please then mark it as helpful.

Kind regards,
Mark
2020 ServiceNow Community MVP
2020 ServiceNow Developer MVP

---

LinkedIn
Community article list

[Paul Curwen]

Thanks for the quick reply Mark. Thinking it may simply be the image size. I’ll kick myself if it is 🙂

I’ll try a few sizes and let you know. Appreciate your VA articles by the way, very useful.

[Paul Curwen]

it was indeed just the size of the images. Lots of resizing attempts later, and now looking a treat.

[Mark Roethof]

Hi there,

Did this solve your question? Or do we need to follow-up on this?

Please mark this answer as correct if it solves your question. This will help others who are looking for a similar solution. Also marking this answer as correct takes the post of the unsolved list.
Thanks.

Kind regards,
Mark
2020 ServiceNow Community MVP
2020 ServiceNow Developer MVP

---

LinkedIn
Community article list