Help
Join the Community
-
Documentation
Find detailed info about ServiceNow products, apps, features, and releases.
-
Impact
Drive a faster ROI and amplify your expertise with ServiceNow Impact.
-
Partner
Grow your business with promotions, news, and marketing tools for partners.
-
Store
Download certified apps and integrations that complement ServiceNow.
Hi there,
Several topics came across the Community about the Virtual Agent appearance. Most of them I replied on, though now putting everything together in an article to share with the Community.
In short:
The out of the box branding setup is "a bit" limited. Some colors can be changed, the icon of the agent can be changed, and that's almost it!
The question:
But what if I want a different picture on the Virtual Agent itself? Or the picture being a little bit bigger? Or having the Virtual Agent on the op off the screen or on the left? What about that annoying orange dot floating around the Virtual Agent? What about having the Virtual Agent on every page on the Service Portal?
The end result:
On the right, the out of the box Virtual Agent. On the left, the modified Virtual Agent.
Steps to achieve this:
1) Do you want the Virtual Agent only on the main page of the Service Portal or on every page? Out of the box the Virtual Agent widget will be added to the index page. This will have the Virtual Agent on the main page. For having the Virtual Agent widget on every page on the Service Portal, just add the widget to a Footer and attach the Footer to the appropriate theme.
2) If you're not interested in the orange dot floating around the Virtual Agent, you'll have to edit the Virtual Agent widget slightly. On line 16 of the HTML template, just remove:
, 'state-unread': $ctrl.hasUnreadMessages}
3) Having the Virtual Agent appear a bit bigger, different colors, on the left, etc. is far more work. To illustrate, see the image below. Width and height of the icon have been changed, a border added, changed floating right into left, changed the background image for the icon. Don't want a rounded icon? Sure: see line 42, border-radius. Removing this will make the icon a square.
4) Upon opening the chat with the Virtual Agent, by default previous chat history is shown. You can alter this two ways.
--- Thru the widget, by expanding line 30 of the Client Script
Or
--- Using the Instance options
Summary:
As shown for starters, a lot can be changed to the appearance of the Virtual Agent. Probably a lot more even than I described here! Though be aware, by changing the widget or cloning it and making you're own, you will risk missing out on future updates on the widget. So keep an eye out on that. Between London and Madrid, the widget did NOT change.
---
Hope that this helps some of you! Questions or ideas? Let me know!
| If this post helped you in any way, I would appreciate it if you hit bookmark or mark it as helpful. Interested in more articles, blogs, videos, and Share projects on Virtual Agent I published? - Virtual Agent |
Kind regards,
Mark
---
Hi there,
Is the widget on all your Customer Service Portal pages? Or just on the index page?
If on all pages shown: probably in the body html template of the header or the footer. If only on the index page, then it should be on the page. Maybe hard to track, because it doesn't have to be added on the bottom right. The out-of-the-box widget is just floating around there 🙂
For example, it could just we added like this, while the widget is actually displayed on the bottom right.
Kind regards,
Mark
---
Hi Mark,
We have 2 different portals, are using this Virtual Agent widget. My requirement is to provide different contact support details(screenshot added below) for both the portals(ITSM & HRSM).
Please let me know how to achieve this.
Thanks,
Krishna
