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!
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
<a id="islpronto_link" href="mailto:email@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_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
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.
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-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 😉
It should not be too difficult since you got this far, but if you get stuck, just leave a comment with your question.