Toggling Virtual Agent chat client (using Agent Chat configuration!), manually, automatically, using Typeahead Search

[Mark Roethof]

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.

👍	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
2020-2021 ServiceNow Community MVP
2020-2021 ServiceNow Developer MVP

---

LinkedIn

[Lener Pacania1]

Mark this is a great article!

[Eric M]

Good Article. now all they need to do is add the pop-up message functionality to the Agent chat config so we can use OOB.   

[jatinder1981]

Great Article and i tried to implement the toggle chat link widget but its not working. When i click on it, it does not toggle VA.

[Mark Roethof]

Hi there,

Do share what you tried or create a new community question with the details.

Kind regards,
Mark Roethof

[Matthew Frazier]

Mark,

I'm trying to open the VA window and start a specific topic after a trigger (such as waiting 10 seconds). Are you aware of a way to do that? I know you can launch VA into a specific topic by going to a URL, but I'm not seeing a way to do it on the page that the user is already on.

May be possible by updating the iframe url? I ended up just configuring the Agent Chat Config to hardcode the topic we wanted on this specific portal.

[Venkat75]

Hi @Mark Roethof  @Mark Roethof This is very intresting.

Let's imagine, I am having menu item and hyper link in one of the widget to start the live chat.

Is there way i can pass addition parameters from trigger() method to actual virtual agent widget. So that I can modify the iframe source.

Regards,

Venkat

[Alison9]

Hiya, great article, I've got the widget working, is there a way to add this to the menu? Cannot figure it out currently. 

Thanks!

Alison

[Ashley Wise]

Hi @Mark Roethof !

I was able to solve the issues. 

I was hoping to get some assistance. I was able to get the auto toggle widget working in my personal developer environment, but when I put it into the corporate instance, it no longer works. I can't even get my info messages to appear with the widget added to the page. Would you happen to have any insight into what could be causing this issue with a non-developer environment? The developer environment is San Diego and the Corporate Instance is Tokyo - if that might impact.

I have the toggle manually working, but not auto. I am not sure why the widget script provided for auto - I copied from here and then downloaded the widget from the developer site - is not working as intended. I was hoping to get some insight into it. Could it be a class issue for the script?

Nevermind! Was able to log it out and find the issue. Line 18 should be isOpen not !isOpen.

Thanks,

Ashley 

[johndoh]

You can also see Enable Virtual Agent Feature Bubble without SlideN... - ServiceNow Community if you would like to implement without the SlideNav

[BharathChintala]

@Mark Roethof  what if we want only button in top an when it clicked agent chat should open. that virtual agent logo should not show  anytime. Only the button we created should be the source to open chat box and close the box.

[Rajini2]

Hi Mark,

Is this code compatible with Utah?

[Mark Roethof]

@Rajini2 Whats the reason for asking? You tried and its not working?

[Rajini2]

Yes, I tried "Toggle Chat client automatically", it is not working for me. This is my script, 

Server Script:
(function() {
	/* populate the 'data' object */
	/* e.g., data.table = $sp.getValue('table'); */
	
	data.chatbottime = gs.getProperty('toggle_chatbot_time');

})();

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');
				});
			}
		}
	};

    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.chatbottime);
	
}

[Mark Roethof]

@Rajini2 I just downloaded the share item, added it to the portal, immediately works.

[Rajini2]

Mark, 

Found out the issue. I had Proactive Triggers installed and I had this system property set as true "com.glide.cs.advanced-chat-popover".  I doubted if this was interfering and gave the value "false". Then the chat opened onload of the index page. 

Cant we make this work along with the property "com.glide.cs.advanced-chat-popover" = true ?

[Mark Roethof]

@Rajini2 I haven't looked into combine those, so can't tell. I'll leave that up to you so you can write an article on it 🙂

[Rajini2]

🙂 Thanks for the help Mark. 

[KervensA]

Mark, I noticed this is in Angular. Any chance there's a Vanilla JS version of this? I'm adding the Virtual Agent to an external website, and I want to create an additional button in my menu header that opens the VA chat. Thoughts?

[KervensA]

Would this work when embedding virtual agent on an external site?

[danno928]

@Mark Roethof this is great! We were looking into options for accessing the chat via opening it in the UI, but with this I was able to use the client controller code and modify the html for our existing 'tile' widget to make it call the controller and open the agent chat window!