Hi there,
Noticed the presentation of the Virtual Agent widget on the HI Service Portal? A nice 'feature bubble' is presented when hovering over the Virtual Agent icon, the hover showing Topics the Virtual Agent can help you with. A nice small addition, which makes the Virtual Agent more attractive. Unfortunately, not available in New York on customer instances or personal developer instances. Who knows, maybe Orlando.
So let's give it a go and see if we can create our own 🙂
HI service Portal
When hovering over the Virtual Agent icon, this is how the feature bubble looks like:
Custom Service Portal widget
Our starting point will be our previous Virtual Agent SlideNav Service Portal widget which we've set up a few weeks ago.
Basically, with this custom Service Portal widget the Virtual Agent is not presented through a pop-up though through a SlideNav from the right instead.
Body HTML Template
1) Adding a div element for the bubble
Within the conversation-button-container, add:
2) Adding ng mouse elements to display/hide the bubble
On the button tab, add:
ng-mouseenter="c.showConversationBubble()" ng-mouseleave="c.hideConversationBubble()" ng-mousedown="c.showConversationWindow()"3) Full code:
<!-- Virtual Agent button -->
<div ng-if="user.logged_in" class="conversation-button-container">
<button data-toggle="modal" data-target="#vaModal" class="help-button" style="background-color: {{::c.options.button_color}}" ng-attr-tabindex="0" ng-mouseenter="c.showConversationBubble()" ng-mouseleave="c.hideConversationBubble()" ng-mousedown="c.showConversationWindow()">
<div class="hover-overlay"></div>
<span aria-hidden="true" ng-class="'help-icon icon-open sn-va-widget-icon'" style="background-image: url('{{::c.options.background_image}}')"></span>
</button>
<!-- Conversation bubble-->
<div ng-if="c.enableConversationBubble" class="conversation-bubble">
<font class="conversation_bubble_question">{{::data.conversationBubbleQuestion}}</font><br />
<font class="conversation_bubble_answer">{{c.conversationBubbleAnswer}}</font>
</div>
</div>
<!-- Modal -->
<div class="modal right fade" id="vaModal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<iframe class="agent" ng-src="{{c.widget_source}}"></iframe>
</div>
</div>
CSS
1) Adding styling for the bubble:
// Conversation Bubble
.conversation-bubble {
border: 1px solid #d4d4d4;
border-radius: $button-dimensions;
display: block;
width:285px;
height: $button-dimensions;
box-shadow: 0px 2px 11px #ababab;
-moz-box-shadow: 0px 2px 11px #ababab;
-o-box-shadow: 0px 2px 11px #ababab;
padding: 8px 12px;
}2) Adding styling for the bubble question:
.conversation_bubble_question {
font-weight: bold;
}3) Adding styling for the bubble answer:
.conversation_bubble_answer {
font-style: oblique;
}4) Full code:
$window-width: 375px;
$button-dimensions: 60px;
// Conversation Bubble
.conversation-bubble {
border: 1px solid #d4d4d4;
border-radius: $button-dimensions;
display: block;
width:285px;
height: $button-dimensions;
box-shadow: 0px 2px 11px #ababab;
-moz-box-shadow: 0px 2px 11px #ababab;
-o-box-shadow: 0px 2px 11px #ababab;
padding: 8px 12px;
}
.conversation_bubble_question {
font-weight: bold;
}
.conversation_bubble_answer {
font-style: oblique;
}
// Modal
.modal.right .modal-dialog {
position: fixed;
margin: auto;
width: $window-width;
height: 100%;
-webkit-transform: translate3d(0%, 0, 0);
-ms-transform: translate3d(0%, 0, 0);
-o-transform: translate3d(0%, 0, 0);
transform: translate3d(0%, 0, 0);
}
.modal.right .modal-content {
height: 100%;
overflow-y: auto;
}
.modal.right .modal-body {
padding: 15px 15px 80px;
}
.modal.right.fade .modal-dialog {
right: -$window-width;
-webkit-transition: opacity 0.3s linear, right 0.3s ease-out;
-moz-transition: opacity 0.3s linear, right 0.3s ease-out;
-o-transition: opacity 0.3s linear, right 0.3s ease-out;
transition: opacity 0.3s linear, right 0.3s ease-out;
}
.modal.right.fade.in .modal-dialog {
right: 0;
}
// Virtual Agent button
.sn-card-component_records {
display: block !important;
}
.conversation-button-container {
position: fixed;
right: 30px;
bottom: 15px;
z-index: 20;
}
.help-button {
position: relative;
width: $button-dimensions;
color: #fff;
float: right;
border: none;
height: $button-dimensions;
border-radius: $button-dimensions;
box-shadow: 0px 2px 11px #ababab;
-moz-box-shadow: 0px 2px 11px #ababab;
-o-box-shadow: 0px 2px 11px #ababab;
padding: 0;
&::before {
content: "";
width: $button-dimensions;
height: $button-dimensions;
border-radius: 50%;
position: absolute;
top: 0;
left: 0;
}
&:hover::before {
background-color: rgba(0,0,0,0.2);
}
.help-icon {
pointer-events: none;
position: relative;
}
.sn-va-widget-icon {
height: 32px;
top: 1px;
left: 12px;
width: 36px;
display: block
}
}
// Agent Frame
.agent {
border: 0px;
height: 100vh;
width: 100%;
}
Server Script
Using the Server Script is new if we look at our previous version of the Virtual Agent Service Portal SlideNav widget. All Server Script is supposed to retrieve the Virtual Agent topics which will be displayed within the feature bubble.
1) Full code:
(function() {
data.conversationBubbleQuestion = gs.getMessage(gs.getProperty('qt_va_conversation_bubble_question'));
var topicArr = [];
var grTopic = new GlideRecord('sys_cs_topic');
grTopic.addEncodedQuery('active=true^design_category!=5628e7f27373230025d032e954f6a7de^ORdesign_category=NULL^design_category!=23242db273603300c1dc32e954f6a79f^ORdesign_category=^name!=system^nameNOT LIKE_');
grTopic._query();
while(grTopic._next()) {
topicArr.push(gs.getMessage(grTopic.getDisplayValue()));
}
topicArr.join();
data.topicArr = topicArr;
})();
Client Controller
Within the Client Controller, we need to add controllers that will be used called upon within the Body HTML Template.
1) Full code:
function() {
var c = this;
var topicArr = c.data.topicArr;
c.widget_source = '';
c.showConversationBubble = function() {
if(!c.conversationBubbleAnswer) {
var topicStr = topicArr[Math.floor(Math.random() * topicArr.length)];
c.conversationBubbleAnswer = topicStr;
}
c.enableConversationBubble = true;
}
c.hideConversationBubble = function() {
c.enableConversationBubble = false;
c.expiredConversationBubble = true;
c.conversationBubbleAnswer = '';
}
c.showConversationWindow = function() {
c.widget_source = c.options.url;
}
}
Option schema
The Option schema will be untouched. Though, just in case you don't have the code for this the full code below.
1) Full code:
[ {
"name" : "background_image",
"section" : "Presentation",
"default_value" : "/images/sn-va-sp-widget/sn-va-sp-widget-icon.svg",
"label" : "Background imeage",
"type" : "string"
}, {
"name" : "button_color",
"section" : "Presentation",
"default_value" : "#8D8DE0",
"label" : "Button color",
"type" : "string"
}, {
"name" : "url",
"section" : "Behavior",
"default_value" : "$sn-va-web-client-app.do?sysparm_skip_load_history=true",
"label" : "URL",
"type" : "string"
} ]Result
With our previous Service Portal widget in mind, we didn't had to add that much code. Basically just a div which presents the feature bubble, adding Server Script to collect the topic names, and adding Client Controller which is called upon in the Body HTML Template to show/hide the div.
The result of this all:
Note: Attached to this article is an XML export of this Service Portal widget.
Future enhancement
Having this custom Service Portal widget makes the presentation of the Virtual Agent widget more attractive. Though still… a nice enhancement we came up with would be to have the feature bubble pop-up after N seconds. In the coming days/weeks we will work on this and share an updated version of this Virtual Agent Service Portal widget on the Community.
---
And that's it actually. Hope you like it. If any questions or remarks, 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
---
I set this up on our portal, but where it should say "Need Help ? You can ask me about" it says NULL. Do you know what setting controls this ?
Embedding on header or footer, is the below what you mean or something else?
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
---
Hi Mark,
Thanks for pointing me towards that article, it wasn't one I had come across before. I was previously trying to pick some of the CSS out of the code above however the new article you linked me to simplified it a bit more and allowed me to get the result I wanted (see below). Thanks again for all the articles, they've been so helpful in assisting with our VA implementation 🙂
Rich
.png){kind=link}
.png){kind=link}