Custom javascript code
Another way to customize ISL Pronto is through custom javascript code. You can use {!cmd=count_supporters!} to get the number of available supports and {!cmd=chat!} to get code (function), which starts new web chat window. Have a look at this example:
function startChat() { var supps = {!cmd=count_supporters!}; if(supps > 0) { var chat = {!cmd=chat!}; chat(); } else { window.location.href = "mailto:sales@example.com"; } }
To upload this javascript, please contact us via e-mail at support@islonline.com so that we can enable it for your domain.
After this javascript has been uploaded, you can modify the script code on your web page:
<img alt="Live chat" src="..." onclick="startChat();"/> <script type="text/javascript" src="http://islpronto.islonline.net/live/islpronto/public/x.js?d=XXXDOMAINXXX&f=startchat"></script>
Automatically filling the fields
If you already have customer info (e.g. the customer is already logged in on your website) and would like to start the chat directly, without the user needing to input this data again, you can use the following line:
<script type="text/javascript" src="http://islpronto.islonline.net/live/islpronto/public/chat.js?d=XXXDOMAINXXX&nick=abc&email=abc@gmail.com"></script>
This will use abc as name and abc@gmail.com as email.
If you need some additional custom fields, you can specify a list of custom fields, their titles, then assign values to each custom field - use the following syntax:
customfields=fieldname:FieldTitle;... customfield_fieldname=FieldValue
Modified example that includes two additional fields, My Field 1 (with value ABC) and My Field 2 (with value 123):
<script type="text/javascript" src="http://islpronto.islonline.net/live/islpronto/public/chat.js?d=XXXDOMAINXXX&nick=abc&email=abc@gmail.com&customfields=f1:My%20Field%201;f2:My%20Field%202&customfield_f1=ABC&customfield_f2=123"></script>
Note: The spaces in field names are replaced with %20 - make sure that you URL encode your field names.
Direct live chat link
If you need a link to directly open the name and e-mail entry form, you can use a link like this:
https://islpronto.islonline.net/live/islpronto?template=dn:XXXDOMAINXXX
If you need to specify a customization, add the cn:<customization_name> parameter after an url-encoded | (pipe = %7c) character, like this:
https://islpronto.islonline.net/live/islpronto?template=dn:XXXDOMAINXXX%7ccn:mycustom
So only these two parameters are different, the rest of them are used the same way as in your ISL Pronto script line, e.g. to force a certain language, add the lang=<language> parameter:
https://islpronto.islonline.net/live/islpronto?template=dn:XXXDOMAINXXX%7ccn:mycustom&lang=es
Direct live chat link, method #2
An alternative is to use a short javascript function and start chat with the desired parameters without loading chat.js or chat_info.js. First you should set the onclick parameter of the desired element (e.g. a live chat image or a live chat text link) to startISLPronto(), then define that function like this:
<script type="text/javascript"> function startISLPronto() { var link = 'http://islpronto.islonline.net/live/islpronto?'; link += 'mobile=0'; link += '&lang=en'; link += '&template=dn:XXXDOMAINXXX'; link += '&referrer=' + escape(document.referrer ? document.referrer : ''); link += '&location=' + escape(window.location ? window.location : ''); var opts = 'status=no,toolbar=no,menubar=no,resizable=yes,location=no'; opts += ',width=500'; opts += ',height=330'; window.open(link, '_islpronto_chat_' + Math.floor(Math.random()*10000000), opts); } </script>
You should replace XXXDOMAINXXX with the appropriate ISL Online domain name, change lang to the desired language and adjust default chat window width and height if needed. Set the value of mobile to 1 to use the chat layout designed for mobile devices.
Proactive chat
In some situations, you would like to have a certain "pop up" message shown to the visitor of your webpage after a certain period. Naturally, you can accomplish this with ISL Pronto - you need to add some extra code to your webpage. Here is one way of accomplishing this:
- In the body part of the page we add a pronto_section div (this is the part that we hide/show) that includes the "Have a question?" text, pronto link and close "button".
- In the head part of the page we use CSS to set some properties, the most important part is to hide the pronto_section (display: none).
- At the bottom, above the main pronto javascript line, we add another javascript section that includes functions hideProntoSection(), showProntoSection() and the timeout command that triggers the showProntoSection() after the specified amount of milliseconds (if you wish to modify the timeout, simply change the default value of 5000 to the desired number).
You can refer to the pronto_proactive.html file for a working example (naturally, make the appropriate modifications, e.g. replace XXXDOMAINXXX, XXXURLXXX and your email address).
Using chat_info.js instead of chat.js
In general, using chat_info.js instead of chat.js gives you access to advanced options. Use the example below to manually set image names (replace /path/to/image/message.jpg and /path/to/image/chat.jpg with appropriate values for your situation) instead of using the hard-coded values (islpronto-chat.jpg and islpronto-message.jpg).
- Put this script code at the bottom of the page, just before </body>:
<script type="text/javascript" src="https://islpronto.islonline.net/live/islpronto/public/chat_info.js?d=XXXDOMAINXXX"></script> <script type="text/javascript"> if(ISLProntoInfo.supporters > 0) { var link = document.getElementById('islpronto_link'); link.href = 'javascript:void(0)'; link.onclick = ISLProntoInfo.onchat; var image = document.getElementById('islpronto_image'); image.src = '/path/to/image/chat.jpg'; } </script>
- Put this code to a location where you wish to have the ISL Pronto chat button:
<p><a href="mailto:info@example.com" id="islpronto_link"><img alt="Live chat" src="/path/to/image/message.jpg" id="islpronto_image"></a></p>
Customizing ISL Pronto messages
If you wish to change default ISL Pronto messages for a certain language, please contact us via e-mail at support@islonline.com and use the following format:
subject: Hosted service - customize ISL Pronto messages for <your company name>
body: I would like to customize ISL Pronto messages for language <two-letter language code>. Our account is <your ISL Online account e-mail>.
We shall then reply to your email with a list of messages that can be customized and provide further information on how to proceed.
Using commands
It is possible to insert commands into chat for various purposes, e.g. push a link to a certain webpage or a download link. To test, simply paste the command into the chat and press enter. Find the available types of commands, their parameters and examples below.
Note: that you should URL encode the value of the link parameter, otherwise it will not work in case you have & in your link (e.g. passing parameters).
email (desired email address)
text (desired link text)
This example generates a mailto link that says Click here to send email and points to someone@example.com):
{{!command=email&email=someone@somewhere.com&text=Click+here+to+send+email!}}
link and syslink
link (desired public/internet link)
linki (desired private/intranet link)
text (desired link text)
Note: If you use the syslink command, it will automatically append &sid=<chatsid> to your link.
This example generates a link that says Click here, points to http://127.0.0.1/index.php and automatically includes the sid parameter:
{{!command=syslink&link=http://127.0.0.1/index.php&text=Click+here!}}
download
download (desired public/internet link)
downloadi (desired private/intranet link)
text (desired link text)
exe (if set it opens in invisible frame and starts the download - use it only for linking exe and zip files)
This example generates a download link that says Click here and points to the latest linux ZIP offline update package:
{{!command=download&download=http://www.islonline.com/system/updates_latest_linux.zip&exe=1&text=Latest+linux+updates+ZIP!}}
lnk
link (desired public/internet link)
linki (desired private/intranet link)
text (desired link text)
sid (if set it will automatically append &sid=<chatsid> to your link)
exe (if set it opens in invisible frame and starts the download - use it only for linking exe and zip files)
wnd (if set it opens in new window)
Example for http://127.0.0.1/index.php?a=123&b=456 with text Click here:
{{!command=lnk&link=http%3A%2F%2F127.0.0.1%2Findex.php%3Fa%3D123%26b%3D456&text=Click+here!}}
prog
query_name (desired ISL Online program)
query_cmdline (desired command line arguments for the ISL Online program)
text (desired link text)
Example for a link to ISL Light Desk with the --get-code command line argument:
{{!command=prog&query_name=ISL Light Desk&query_cmdline=--get-code&text=ISL+Light+Desk!}}
Showing the filter selector
It is possible to show a drop-down list of the desired filters so that the customer can choose the desired filter on the same page where entering name and email.
There are three parameters for this purpose:
available_filters (specify the filters to be shown in the drop-down list)
filter_names (specifies nice names for filters in format filter1:nicename1;filter2:nicename2;...)
default_filter (specifies the preselected filter in case of a first time customer)
Example:
https://islpronto.islonline.net/live/islpronto/public/chat_info.js?d=XXXDOMAINXXX&available_filters=sales,tech&filter_names=sales:Sales;tech:Tech%20support&default_filter=sales
Adding Live Chat to a second website
You may add ISL Pronto live chat to as many websites as you wish using the same code snippet, but they will all use the same images (logo image, offline image, online image) and chat title.
In some cases this is not a problem, e.g. when having multiple (sub)pages, each in its own language. In that case simply add the appropriate language parameter as described in the following manual topic: Forcing a certain language
However, if you have two (or more) different websites (different designs, brands etc.), then you would need a new customization. Please contact us via e-mail at support@islonline.com using the following template:
subject: Hosted service - customization for an additional website - <your company name>
body: Please create a new customization for our account <your ISL Online account e-mail> for an additional website with the following info:
- Link to images: <link where you uploaded the three required images> (e.g. https://www.example.com/images)
- Chat title: <desired chat title> (e.g. MyCompany2 live chat)
We shall then create a new customization and reply to your email with the instructions on how to use it on your website.