Time for another post with short & sweet tricks that answer the questions about ISL Online (in this case ISL Pronto) you never knew you wanted to ask, but will be glad to know the answer!

This is not one of those popular science books where they proudly state on the cover “not a single formula in here!” – sometimes code speaks louder than words plus it is handy for direct copy & paste. This does not mean that you need to be a JavaScript expert to continue reading – copy & paste approach with simple modifications will do for most cases, but it is always nice to know (at least approximately) what the code does before putting it into production environment 😉

With that out of the way, let us start with an easy one. Every now and then some ISL Online customers ask about the possibilities of integrating ISL Pronto into their CMS (e.g. Joomla, Drupal, etc.) – there is no automated way or a special plugin, but the integration itself is very simple if you understand the basic idea how those two lines of ISL Pronto code work. Take this standard example (we assume the required ISL Pronto images are at http://www.example.com/images and that location is set within your ISL Online account, sample ISL Online domain name is called mycompany):

<a id="islpronto_link" href="mailto:support@example.com"><img id="islpronto_image" alt="Live chat" src="http://www.example.com/images/islpronto-message.jpg" style="border:none"/></a>
http://islpronto.islonline.net/live/islpronto/public/chat.js?d=mycompany

The first line defines a “live chat button” (it is actually an image that acts as a link, either to your email address or to live chat if there are supporters available) and the second one points to a special script on the ISL Online Network that retrieves information about the current status of supporters in your domain (mycompany) and acts accordingly. There are two possibilities:

1. There is at least one supporter available.
The script searches for your live chat button – how does it find it? It checks for element IDs – when it finds the islpronto_link element, it modifies the link so that it points to your live chat instead of the email address. When it finds the islpronto_image element, it replaces the offline image with the online image (islpronto-chat.jpg). Obviously the script cannot search for elements that have not been created yet, so if you reverse the order of those two ISL Pronto lines, the script will not find the islpronto_link and islpronto_image elements and your live chat button will stay in the offline state. Now you know the reason for that important note in the manual where it tells you to put the script part below the live chat button line!

2. There are no supporters available.
In this case the script does nothing to your live chat button, leaves it as it is, so it still shows the islpronto-message.jpg image and links to your email address.

Now that you understand the way this whole live chat magic works, you will understand the only advice you really need for integrating ISL Pronto into any CMS – search for the option that allows you to insert/edit raw HTML code – this is the only way for you to be sure that the CMS will not modify the islpronto_link and the islpronto_image into something like user_link_046 and image_main_068, obviously causing the ISL Pronto script part to fail.

Now you are ready to check the following manual topic: Advanced customization (section Using chat_info.js instead of chat.js)

Having seen that example, you will understand why chat.js is the default option, a kind of a user-friendly wrapper for beginners (with the image names hardcoded etc.) and chat_info.js is for those who want full control.

Full control is what you need in order to support the following sample scenario:
You have a webpage and it has support for a few languages (e.g. English, German, Spanish, Italian) – your webpage either detects it and sets the appropriate one or lets the user choose. You would like to add live chat, but it should show different offline/online images based on the current page language and obviously use the appropriate language in the live chat as well. Usually you would have some server side script (PHP, ASP) that sets the parameter – that script should also fill in the twoLetterLang variable below with the desired value (e.g. es for Spanish), same goes for the value of the lang parameter in the chat_info.js script line.

And now the code section – a few more lines of JavaScript, but extensively commented, so no worries:

<a id="islpronto_link" href="mailto:support@example.com"><img id="islpronto_image" alt="Support" src="http://www.example.com/images/message_default.jpg" style="border:none"/></a>
http://islpronto.islonline.net/live/islpronto/public/chat_info.js?d=mycompany&lang=lang

var twoLetterLang = ''; // fill this with the appropriate  (the same you use for the lang= parameter above)

var onlineImageBase = 'http://www.example.com/images/chat_';
var offlineImageBase = 'http://www.example.com/images/message_';
var imageLang = 'default';
var imageExt = '.jpg';

if (twoLetterLang == "en" || twoLetterLang == "es" || twoLetterLang == "de" || twoLetterLang == "it") {
	// we have specific images for these languages, so we set the appropriate value to imageLang
	// in all other cases, imageLang remains at the default value
	imageLang = twoLetterLang;
}

if(ISLProntoInfo.supporters > 0) {
	// at least one supporter is online, so we set the link to start chat and replace the image with the appropriate "chat live" image

	var link = document.getElementById('islpronto_link');
	link.href = 'javascript:void(0)';
	link.onclick = ISLProntoInfo.onchat;

	var image = document.getElementById('islpronto_image');
	image.src = onlineImageBase + imageLang + imageExt;

	// result: for supported languages, the this will point to http://www.example.com/images/chat_.jpg, for all others it will point to http://www.example.com/images/chat_default.jpg
} else {
	// no supporters online, set the appropriate "leave a message" image

	var image = document.getElementById('islpronto_image');
	image.src = offlineImageBase + imageLang + imageExt;

	// result: for supported languages, the this will point to http://www.example.com/images/message_.jpg, for all others it will point to http://www.example.com/images/message_default.jpg
}

If some of your supporters are not multilingual (odds are they are not!), you would want to set separate filters based on the language, e.g. mycompany-en, mycompany-es etc. and assign supporters to the appropriate filter(s). Then you would modify the sample above to check the status of the correct filter based on the language.

The actual implementation is left as an exercise for the reader 😉
Hint: ISLProntoInfo.active_filters['mycompany-en']

It should not be too difficult since you got this far, but if you get stuck, just leave a comment with your question.