Arthur C. Clarke stated that any sufficiently advanced technology is indistinguishable from magic. One option is to leave it at that “magic level”, but if possible, it is always fun to learn how some magic tricks are performed, right?

Having read the first part of the series, you know how those two (or more) ISL Pronto lines do what they do and you are ready for part two 🙂

A few of our customers were wondering whether it is possible to show a list of available supporters or create a link that targets a certain supporter. It is possible – the first part is quite simple, but the second part is a bit trickier. Read on and you will learn all about it.

The first step is to use the chat_test.html page (naturally, replace mycompany with the ISL Online Domain that you use for your supporters):
https://islpronto.islonline.net/live/islpronto/public/chat_test.html?d=mycompany

You will see the number of currently available supporters for that domain, a link to start live chat for that domain and a list of available supporters and filters. If you click on a certain supporter, you will start a chat with that person and if you click on a certain filter, you will request a chat with that filter. By the way, this chat_test.html page is a nice and quick way to test your live chat before integrating it into your webpage(s).

It is simple to show such a list of supporters with a bit of JavaScript:

<script type="text/javascript" src="https://islpronto.islonline.net/live/islpronto/public/chat_info.js?d=mycompany"></script>
<script type="text/javascript">
	var supps = ISLProntoInfo.active_users;
	for(s in supps) {
		var node = document.createElement('a');
		node.href = 'javascript:void(0)';
		node.onclick = supps[s].onchat;
		node.appendChild(document.createTextNode(supps[s].nick + ' (' + supps[s].status + ')'));
		document.body.appendChild(node);
		document.body.appendChild(document.createTextNode(', '));
		node = document.createElement('a');
		node.href = 'mailto:' + supps[s].email;
		node.appendChild(document.createTextNode(supps[s].email));
		document.body.appendChild(node);
		document.body.appendChild(document.createTextNode(', ' + supps[s].filters.join(';')));
		document.body.appendChild(document.createElement('br'));
	}
</script>

Even simpler for a list of filters:

<script type="text/javascript" src="https://islpronto.islonline.net/live/islpronto/public/chat_info.js?d=mycompany"></script>
<script type="text/javascript">
	var filts = ISLProntoInfo.active_filters;
	for(f in filts) {
		var node = document.createElement('a');
		node.href = 'javascript:void(0)';
		node.onclick = filts[f].onchat;
		node.appendChild(document.createTextNode(f + ' (' + filts[f].count + ')'));
		document.body.appendChild(node);
		document.body.appendChild(document.createElement('br'));
	}
</script>

Now that you know which variables hold which info, you can use this to compose a nice list or a fancy table of currently available supporters/filters. You might not wish to expose such a table to your external visitors (they can still use the general live chat link), but having a list of supporters and an option to start a chat with the desired person might be a very useful thing to put on your intranet pages.

You might be thinking that having a list is nice, but what if you want just a link for supporter1 and supporter5? Well, this is where it gets a bit tricky, since you need a way to refer to a certain supporter – a unique way, of course. Remember the chat_test.html list of available supporters? It had entries like this one:

s-1_0_2: someone (available), someone@example.com, sales

The first part (in this case, s-1_0_2) is what you need – this is the ID for that supporter and you can use it for queries. Check this sample (it queries the supporter with the ID s-1_0_2 and prints his/her info if available):

<script type="text/javascript" src="https://islpronto.islonline.net/live/islpronto/public/chat_info.js?d=mycompany"></script>
<script>
	var userid = 's-1_0_2';
	var user = ISLProntoInfo.active_users[userid];
	if (user != null && (user.status == 'available' || user.status == 'busy')) {
		var node = document.createElement('a');
		node.href = 'javascript:void(0)';
		node.onclick = user.onchat;
		node.appendChild(document.createTextNode(user.nick + ' (' + user.status + ')'));
		document.body.appendChild(node);
		document.body.appendChild(document.createTextNode(', '));
		node = document.createElement('a');
		node.href = 'mailto:' + user.email;
		node.appendChild(document.createTextNode(user.email));
		document.body.appendChild(node);
		document.body.appendChild(document.createTextNode(', ' + user.filters.join(';')));
		document.body.appendChild(document.createElement('br'));
	} else {
		var node = document.createElement('p');
		node.appendChild(document.createTextNode('Supporter ' + userid + ' is not available'));
		document.body.appendChild(node);
	}
</script>

Hosted service users, use the chat_test.html page to see the unique user IDs for your supporters, then you can use that info in your JavaScript code.

Server licence users, you can turn these s-x_y_z IDs into something else, e.g. to match your company's internal unique user ID or something similar. This is accomplished by assigning an external ID to each user (the ISL Conference Proxy administration setting for this is called External ID). As an example, you can set this parameter to supporter_001, but if you try the supporter list sample, you will notice that it still uses internal IDs. If you wish to use external IDs for the chat_info.js script, you need to add a parameter external_id=yes. The code would look like this:

<script type="text/javascript" src="https://islpronto.islonline.net/live/islpronto/public/chat_info.js?d=mycompany&amp;external_id=yes"></script>
<script>
	var userid = 'supporter_001';
	...the rest is the same...

This should be enough information for creating a custom supporter list. If you have any questions regarding this, just leave a comment.