Articles, Blogs, Videos, Podcasts, Share projects - Experiences from the field
Hi there,
A few releases back using Agent Chat Configuration was introduced. Concerning Virtual Agent, Agent Chat configuration offers several good advantages (and get's better with each release!) over using the old method of adding the Virtual Agent widget directly to pages or embed it in a header or footer. Though still, you could have reasons for not adopting Agent Chat configuration, and still using a custom widget or a cloned Virtual Agent Service Portal widget.
So what reasons for not adopting Agent Chat configuration do I mean? Having the Virtual Agent chat client more visible is a huge requirement for a lot of customers. For example having a different behavior of the widget, adding a (dynamic) callout, toggling the chat client after interacting with the Typeahead search, toggling the chat client after N seconds, or even directly on load…
Those last three, it took me some time to figure out, though now possible with Agent Chat configuration!
Let's get after it.
Agent Chat Configuration
Unfamiliar with Agent Chat configuration or still using the "old" method of adding the Virtual Agent widget directly to pages or embed it in a header or footer? Do have a look at Agent Chat configuration, it's nicely described on the Docs. Amongst others, you can easily add the Virtual Agent to any combination of Portals and/or roles, easily add URL parameters, change the Chat Icon color (New York), the Chat Icon picture (Paris), Promoted Topics (Quebec), etcetera, etcetera, etcetera!
Toggle chat client with Agent Chat Configuration
While doing some exploring on my ServiceNow instance, I noticed on the Employee Service Center portal, a clickable "Chat" link in the header menu. This link actually toggles the Virtual Agent chat client. Interesting, and it concerns the Virtual Agent client using Agent Chat configuration.
So how did they do that? I couldn't find any documentation on this, so let's explore this ourselves. This could solve some questions/requirements for which we are still sticking with the "old" method. Being able to solve this piece of the possible, would help to adopt Agent Chat configuration.
Toggle Chat client manually
I've stripped the header used for the ESC portal as much as possible, and below is all that is left. I've set up a new Service Portal widget with:
New "Toggle Chat client manually" widget
Body HTML Template
<div>
<a href="javascript:void(0)" ng-click="toggleChat()">
<span ng-bind-html="'${Toggle Chat}'" aria-hidden="true"></span>
</a>
</div>
Client Controller
api.controller=function($scope) {
/* widget controller */
var c = this;
$scope.showChat = false;
$scope.toggleChat = function() {
$scope.showChat = !$scope.showChat;
$('a#va_chat').toggleClass(' active-chat');
var isOpen = $('button.sp-ac-btn.open').length != 0;
if($scope.showChat){
if(!isOpen) {
$scope.$$postDigest(function(){
$('button.sp-ac-btn').trigger('click');
});
}
} else {
if(isOpen) {
$scope.$$postDigest(function(){
$('button.sp-ac-btn').trigger('click');
});
}
}
};
};
Result
And that's it. For testing just created a new Service Portal page, on a Service Portal which has Agent Chat configuration active, added this new Service Portal widget to the created Service Portal page.
Clicking the "Toggle Chat" link, actually toggles the Virtual Agent chat client!
Toggle Chat client automatically
So can we use most of the "Toggle Chat client manually" widget to automatically toggle the Virtual Agent chat client? I just grabbed my old custom widget which simulates this. We just need to copy the $timeout part and embed that into the Server script, Client controller, and Link.
New "Toggle Chat client automatically" widget
Server script
(function() {
/* populate the 'data' object */
/* e.g., data.table = $sp.getValue('table'); */
data.toggle_chat_time = 5000;
})();
Client controller
Adding below code to the widget created already:
c.toggleWindowAuto = function() {
$scope.toggleChat();
};
Link
function link(scope, element, attrs, controller) {
var c = scope.c,
$timeout = $injector.get('$timeout');
$timeout(function(){
if(!c.isOpen) {
c.toggleWindowAuto();
}
}, c.data.toggle_chat_time);
}
Result
And that's it! Do consider changing the hardcoded integer value in the Server script into using a System Property. The result of these changes would toggle the Virtual Agent chat client automatically after 5 seconds.
Toggle Chat client after Typeahead Search interaction
If we can get Toggling the chat client automatically working, then having the chat client open after N Typeahead Search entries should be a small job. For this test, just reusing what I've set up earlier for the Typeahead Search which interacts with a custom Service Portal Virtual Agent widget.
You would need to add a little bit of code to the Typeahead Search widget for this.
Existing "Typeahead Search" widget
Server Script
Adding a count, which indicates the number of interactions with the Typeahead Search. You could also consider using a System Property for this.
data.typeahead_count = 3;
Client Controller
Adding a $rootScope.$broadcast in function c.getSearchSuggestions:
if(c.data.search_count) {
c.data.search_count = c.data.search_count + 1
} else {
c.data.search_count = 1;
}
if(c.data.search_count == parseInt(c.data.typeahead_count)) {
$rootScope.$broadcast('toggleChat');
}
New Toggle Chat Typeahead Search widget
Client Controller
When we mimic the "Toggle chat client manually" widget, we only need to expand the Client controller. Adding $rootScope to the function, and adding the below code:
$rootScope.$on('toggleChat', function() {
$scope.toggleChat();
});
Result
And that's it! After adding the new widget and the Typeahead Search widget to the Service Portal page, and after entering three times something in the Typeahead Search… the Virtual Agent chat client toggles!
Share
An Update Set with these Service Portal widgets can be downloaded from Share:
- Toggle Virtual Agent chat client with Agent Chat Configuration (manually, automatically)
- Toggle Virtual Agent chat client with Agent Chat Configuration (after interacting with Typeahead Sea...
---
Great stuff, and all with Agent Chat configuration! No custom Virtual Agent Service Portal widget needed anymore.
| 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? |
Kind regards,
Mark Roethof
ServiceNow Technical Platform Architect @ Quint Technology
2x ServiceNow Developer MVP
2x ServiceNow Community MVP
---
