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&colon;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.

Kind regards,

Mar k Roethof

ServiceNow Technical Platform Architect @ Quint Technology

2x ServiceNow Developer MVP

2x ServiceNow Community MVP

---

LinkedIn

Labels: