Notifications

625 views

Description

Description


The chat bubble icon used in the virtual agent widget for service portal cannot be changed through the Branding setup. Customization to the widget code is required.

Please note that this is customization and not supported directly by ServiceNow.  Please test these changes thoroughly in sub production instance and then implement them in production. 

Procedure


  

  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:

Change

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

 

To

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

 

5. Replace the OOB widget with the new one on pages where the OOB one is used.

6. Empty browser cache and hard reload the browser to see the changes to the chat bubble on Service Portal. 

 

Before:

 

After:

Applicable Versions


London 

Additional Information


Configure Virtual Agent Branding

How to add the virtual agent widget to the footer in Service Portal

How to make standalone Virtual Agent client page redirect to login for unauthenticated users

Article Information

Last Updated:2019-08-02 20:52:11
Published:2019-02-15
Gold_Button_009.svgScreen Shot 2019-02-15 at 9.17.08 AM.pngScreen Shot 2019-02-15 at 9.17.50 AM.pngScreen Shot 2019-02-15 at 9.17.50 AM.png