Virtual agent icon

[maryc]

Hi,

How do I change the Virtual agent icon displayed on the Virtual agent widget. I want to change the attached icon to my own image

[Mark Roethof · Accepted solution]

Hi,

This can be done within the Virtual Agent widget. Unfortunately, this is not under the options so you have to clone the widget. From there, have a look at the CSS part.

It contains something like this:

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

Just replace the url with an uploaded image.

Kind regards.
Mark

[Brian S5]

Hi Mark,

I have changed the URL to a image i uploaded into system images in the CSS portion, however it doesn't show. The only thing that seems to work is if i change the HTML on the widget to something other than -open (below its set to 'help-icon icon-bot sn-va-widget-icon')

[Brian S5]

NVM Mark,

I found this article on HI https://hi.service-now.com/kb_view.do?sysparm_article=KB0726500 

It states the image must be a SVG file

1. Go to System UI > Images and create a new image.
2. Name the file sn-va-sp-widget-icon.svg and add the image you want to display in the chat bubble. This image needs to be .svg format only. Attached is an example of a .svg file. 
3. Clone the Virtual Agent Service Portal Widget and change the follow in the widget css:

[Mark Roethof]

Hi there,

Of course, if not cloning the widget and not changing the image name, it should be a svg with exact the same name. Though, for sure, guaranteed, you can have a different image/different format/different size/etc.. In that case you do have to modify the widget.

For example this is what we have in our environment (= working for months now in both London and Madrid).

    .sn-va-widget-icon {
      background-image: url('qt-va-widget-icon.png');
      height: 124px;
      top: 12px;
      left: 0px;
      width: 124px;
      display: block
    }

Kind regards,
Mark

---

LinkedIn