Customize the Virtual Agent Service Portal icon (Agent chat configuration)

Mark Roethof · ‎01-03-2021

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!

C	If this content helped you, I would appreciate it if you hit bookmark or mark it as helpful. Interested in more Articles, Blogs, Videos, Podcasts, Share projects I shared/participated in? - Articles, Blogs, Videos, Podcasts, Share projects - Experiences from the field

Kind regards,

Mark Roethof

ServiceNow Technical Platform Architect @ Quint Technology
1x ServiceNow Developer MVP

1x ServiceNow Community MVP

---

Tim Hannah · ‎02-05-2021

Evening, I have tried this to change the background colour only and it still stays with the original ?

any ideas?

Mark Roethof · ‎02-05-2021

Hi there,

Can you share more details? The image with the CSS looks like a theme record, though also a bit empty? Is this theme record actually used on any of your portals?

I assume you are using Agent Chat Configuration? Or are you using a method like embedding the Service Portal widget to a header/footer?

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

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

---

LinkedIn
Community article, blog, video list

Tim Hannah · ‎02-06-2021

I'm not sure as we inherited this portal from the previous people who looked after it.

The main menu is customised version of the SP Header Menu, and the theme appears to be a customised version of the Customer Service.

The Live chat widget is initiated from the menu bar yes. there is no icon down the bottom right until you click it from the menu.

The theme CSS was far more extensive (see below) however I added the line you mentioned at the top. The theme header is based on the CSM Stock Header

Let me know if you need any more snippets,

Thanks or your assistance.

Theme CSS

$sp-logo-margin-x: 		15px !default;
$sp-agent-chat-bg: white;

$brand-primary:			#0574DE !default;
$brand-success:         #0a5d0c !default;
$brand-info:            #0F7D8B !default;
$brand-warning:         #9E6817 !default;
$brand-danger:          #B12F2C !default;
$state-danger-text:     #64201a;

$accessible-placeholder-gray:       #565656;

$primary:				$brand-primary !default;

$sp-logo-margin-x: 		15px !default;
$sp-tagline-color:		$text-color !default;
$navbar-inverse-bg: 	#22273C !default;
$navbar-inverse-link-color: #bdc0c4 !default;
$navbar-inverse-link-hover-color: #ffffff !default;
$navbar-inverse-link-hover-bg: $brand-primary !default;
$navbar-inverse-link-active-bg: $brand-primary !default;
$body-bg: 				#fff !default;
$dropdown-link-disabled-color: #ccc;
$sp-disabled-breadcrumb: #1a1a1a;

$no-issue-border-color: $brand-success;
$planned-maintenance-border-color: $brand-info;
$service-degredation-border-color: $brand-warning;
$service-outage-border-color: $brand-danger;

//** Global textual link color.
$link-color:            #045AAE !default;
//** Link hover color set via `darken()` function.
$link-hover-color:      darken($link-color, 15%) !default;
//** Link hover decoration.
$link-hover-decoration: underline !default;

//** Panel styles
$panel-primary-heading-bg: #CCE5FF !default;
$panel-primary-border: #CCE5FF !default;
$panel-primary-text: #2E2E2E !default;

$text-muted:			#646567 !default;


.label {
	font-weight: normal !important;
    font-size: 12px !important;
}

/* alert overrides */
.alert-success {
    color: $brand-success !important;
}
.alert-info {
    color: $brand-info !important;
}
.alert-warning {
    color: $brand-warning !important;
}
.alert-danger {
    color: $brand-danger !important;
}

[accessibility="true"] {
	a {  
      &:hover {
          text-decoration: underline !important;
      }
      &:focus {  		
          text-decoration: underline !important;
      }
	}
    
    .sp-announcement-root {
    	a {
        	text-decoration: underline !important;
          }
     }
           
    [uib-rating] {
    	.glyphicon-star {
        	color: black !important;
        }
    }
    
    input::-webkit-input-placeholder {
		color: $accessible-placeholder-gray !important;
	}
	input::-moz-placeholder {
    	color: $accessible-placeholder-gray !important;
	}
	input:-ms-input-placeholder {
		color: $accessible-placeholder-gray !important;
	}
}

button:focus {
     outline:none; 
     border:1px solid #4D90FE;
     -webkit-box-shadow: 0px 0px 5px  #4D90FE;
     box-shadow: 0px 0px 5px  #4D90FE;
}

[tabindex]:focus {
	outline:none; 
	border:1px solid #4D90FE;
	-webkit-box-shadow: 0px 0px 5px  #4D90FE;
	box-shadow: 0px 0px 5px  #4D90FE;
}


.navbar-nav {
	.open {
    	a {
        	.label {
            	background-color: #F5F5F5;
                color: $brand-primary;
            }
        }
    }
    
    li {
    	a:hover,
	a:focus {
          .label {
          	background-color: #F5F5F5;
            color: $brand-primary;
          }
        }
    }
}

.panel-primary {
	.label {
    	background-color: #F5F5F5;
        border: 1px solid #dcdcdc;
        color: #2E2E2E;
    }
}

.breadcrumbs-container {
    background-color: #f0f3f4 !important;
}

.timeline-badge {
	&.success {
		background-color: $brand-success !important;
    }
	.avatar-large {
		background-color: $accessible-placeholder-gray !important;
    }
}

.select2-results {
	.select2-highlighted {
    	background: $brand-primary !important;
    }
}

.CodeMirror-linenumber {
	color: #4c4c4c !important;
}

.help-block {
	color: #545454 !important;
}

.selected {
	background-color: #707070;
}



@media (max-width: 767px) {
  .navbar-inverse .navbar-nav .open .dropdown-menu > li > a {
  	.text-muted {
		color: $navbar-inverse-link-color !important;    
    }
  }
}

//** Panel footer is a light gray background, so text color should be dark.
.panel-footer {
	color: #515151 !important;
}

Tim Hannah · ‎02-06-2021

So i have done some digging and i can see that it IS being triggered from the menu bar at the top. Once you click it it appears on the bottom right.

It also looks like its the virtual agent widget rather than the Chat widget...

I have read through a lot of your articles and have tried to control Right click the instance however obviously that doesnt work as its not on the page itself.

I have cloned the VA widget and changed the colours and manually in the CSS and it works when I add it to the index page.

So my next question is can i set the values of the VA widget from another CSS field somewhere on the theme or the menu or ?? if i cant how can i set which VA widget is being used by the menu bar?

Mariana H · ‎02-09-2021

Hi Mark,

Do you know a way to hide this Agent chat icon based on the users location?

I'm not using the Virtual Agent service portal widget as I want this icon to display on all pages in the portal when the page is changed, for assistance in navigating users around the portal for example.

Thanks in advance

kgupta · ‎02-11-2021

HI Mark,

Thanks for posting such great stuff. Very helpful.

I have a question, how can i get list of direct reports of Manager in virtual agent conversation?

Let's say i create a choice picker called "Is this for you or your direct report"? so the moment direct report is clicked user should get names of user who direct report to that manager. I tried it uing script ourput after choice picker, but didnt help. Please help.

Mohamed Rahim1 · ‎08-16-2021

hi,

I'm a little confused, when tried to implement this it didn't work!! also when I used KB0726500 also didn't work, any clue which procedures to use and why both are not working?

How to change the Virtual Agent Icon in the Service Portal widget (sn-va-sp-widget) - Support and Tr...

Mark Roethof · ‎08-16-2021

Can you share what you tried?

Kind regards,
Mark

Mohamed Rahim1 · ‎08-16-2021

Hi Mark,

First I uploaded an svg image to the images table, then followed your procedures and updated the La Jolla theme with the following:

$sp-agent-chat-bg: white;
$sp-agent-chat-btn-close: url("/VA2.svg");
$sp-agent-chat-btn-open: url("/VA2.svg");

then nothing!! same icon

Mark Roethof · ‎08-16-2021

Just reproduced once more, instantly works here within a few seconds.

Please open a new topic and share your exact set up. I can help you from there (or someone else if they spot your question first).

Kind regards,
Mark

RodGallegos · ‎11-11-2021

Does this also work for instances of the va widget when we place the widget on specific pages? In other words, should the instance inherit what is defined on the theme our portal is using? Or do we need to define the background image on the widget instance?

ayman_h · ‎03-03-2022

For some reason this didn't work for me.

To make it work, I cloned the 'Virtual Agent Service Portal Widget' widget and updated the CSS to add the background-color tag - I followed this KB Article - https://support.servicenow.com/kb?id=kb_article_view&sysparm_article=KB0726500

And also added the 'background-color' tag on the '&::before' definition

.help-button {
    position: relative;
    width: 60px;
    color: #fff;
    float: right;
    border: none;
    height: $button-height;
    border-radius: 60px;
    box-shadow: 0px 2px 11px #ababab;
    -moz-box-shadow: 0px 2px 11px #ababab;
    -o-box-shadow: 0px 2px 11px #ababab;
    padding: 0;
    background-color: #FFFFFF;

    &::before {
      background-color: #FFFFFF;
      content: "";
      width: 60px;
      height: 60px;
      border-radius: 50%;
      position: absolute;
      top: 0;
      left: 0;
    }

Mark Roethof · ‎03-03-2022

This article is about using Agent Chat configuration, not about cloning and editing the legacy Service Portal widget.

What is the reason for using the legacy Service Portal widget? (there are some valid use cases)

If using the Service Portal widget, I did wrote some older articles on this. Also some on which you might not need to clone the widget.

Kind regards,
Mark

JPery · ‎03-31-2022

I am experiencing the same issue with the background color. I cloned the 'Virtual Agent Service Portal Widget' widget and updated the CSS to add the background-color tag as well. It is updating in Service Portal Designer but not on the Portal. Any ideas?

Thank you!

Mark Roethof · ‎03-31-2022

Hi there,

This article is about applying Agent Chat configuration. Not about using a (cloned) legacy Service Portal widget.

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

---

LinkedIn
Community article, blog, video list

RodGallegos · ‎04-01-2022

With respect Mr. Roethof, these two gentlemen pointed out they were not seeing the expected results by following the blog instructions and were simply stating that they found a workaround, even though they would have preferred to have avoided this work around. User JPery even asked for some suggestions, and I myself have posted questions with no response. With the understanding of the purpose of this article, is it frowned upon to seek help here while offering some context to help others who are reading this thread?

Mark Roethof · ‎04-01-2022

Like I mentioned, this article is about applying Agent Chat configuration, not about using a (cloned) legacy Service Portal widget.

Kind regards,
Mark

RodGallegos · ‎04-01-2022

This is unfortunate. Thank you for your time.

Tim Boelema · ‎06-28-2022

Thanks Mark, that helped a lot.

a116170 · ‎12-03-2022

This is what I call a gold nugget of information. You just saved me cloning the widget. Thanks!

sergiomonva · ‎04-19-2023

Hello Mark, just to thank you, this was really helpful for me. Do you know if it´s possible to edit the html of the pop-up chat? Thanks in advance.

Sergio M

Mark Roethof · ‎04-19-2023

Hi there,

Can you specifiy what you mean by HTML of the pop-up chat?

Kind regards,
Mark

JLeong · ‎06-02-2023

Hi Mark,

We upgraded to Utah and our VA portal icon is gone and got replaced by the default icon. I can't seem to bring it back. A lot changed since I worked on it.

I followed this instruction and it didn't help - https://support.servicenow.com/kb?id=kb_article_view&sysparm_article=KB0726500

Could you help pls.

Before the upgrade

After the upgrade

Mark Roethof · ‎06-02-2023

Can you post a new question for this and share as much as possible details about your situation?

Kind regards,
Mark

sai12 · ‎07-10-2023

Hi @JLeong , I have found a similar issue after upgrading to utah. May I know if you got answer for this.

Kindly share .

JLeong · ‎07-18-2023

Hi @sai12 , the chat pop-over feature was causing the issue so we removed and it fixed the issue.

sai12 · ‎07-19-2023

Hi @JLeong ,

I made that property true and observed that the chat screen is broadening up from the entire screen and its not showing entire chat and hiding close button and title on header. So I made style sheet changes and able to get back my close (X) button.

suvro · ‎10-03-2023

How to make it visible only on the homepage of the portal rather than being on every page of the portal?

Grant Rowh · ‎10-10-2024

@Mark Roethof Is the icon limited to SVG file type, as stated in some documentation? Is there any way to use an animated .GIF?