Advanced Customization

 

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 follow these steps:

Step 1

Open web administration, which is available at address http://localhost:7615/conf.

Step 2

Login as user admin, password asd.

Step 3

Go to User management - Domains, select the domain that you use for ISL Pronto (usually default).

Step 4

Select Raw data.

Step 5

Click Actions....

Step 6

Enter this under Name: pronto::public::startchat

Step 7

Paste the javascript code (example above) into the Value section.

Step 8

Click Write.


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://pronto.isl.example.com/live/islpronto/public/x.js?d=default&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://pronto.isl.example.com/live/islpronto/public/chat.js?d=default&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://pronto.isl.example.com/live/islpronto/public/chat.js?d=default&nick=abc&email=abc@gmail.com&customfields=f1:My%20Field%201;f2:My%20Field%202&customfield_f1=ABC&customfield_f2=123"></script>

Note: that 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:

http://pronto.isl.example.com/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:

http://pronto.isl.example.com/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:

http://pronto.isl.example.com/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.isl.example.com/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 XXXDOMAINXXXwith the appropriate ISL Conference Proxy domain name, change langto the desired language and adjust default chat window widthand heightif needed. Set the value of mobileto 1to 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:

Step 1

In the body part of the page we add a pronto_sectiondiv (this is the part that we hide/show) that includes the "Have a question?" text, pronto link and close "button".

Step 2

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).

Step 3

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 proactive_chat.html file for a working example (naturally, make the appropriate modifications, e.g. replace XXXDOMAINXXX, XXXURLXXX, your email address and islpronto.islonline.net in the pronto script line with the appropriate server 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).

Step 1

Put this script code at the bottom of the page, just before </body>:

<script type="text/javascript" src="http://pronto.isl.example.com/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>

Step 2

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, go to Configuration - Advanced - Customize in ISL Conference Proxy administration and add/edit a customization - you will see an option Custom messages with a link Click here.... Click that link and a new window will open where you will be able to change the messages for each language from the list or add a custom language.

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.

Please note: 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

  • 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)

Note: This prog syntax is available in ISL Pronto modules version 2.0.4 or newer.

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: http://pronto.isl.example.com/live/islpronto/public/chat_info.js?d=default&available_filters=sales,tech&filter_names=sales:Sales;tech:Tech%20support&default_filter=sales

Multiple chat buttons for different domains on a single page

It is possible to set up multiple chat buttons on your web page, each opening a chat with supporters in different domains e.g. You can have one button opening a chat with Sales team and another opening a chat with Tech support.

Step 1

Create multiple pronto chat buttons, and make sure they have different id values, as the script uses the id-s to differentiate between them:

<a id="islpronto_link_sales" href="mailto:YOUR_OFFLINE_EMAIL_ADDRESS"><img id="islpronto_image_sales" alt="Live chat sales" src="http://example.com/images/islpronto-message-sales.jpg" style="border:none"/></a>
<a id="islpronto_link_tech" href="mailto:YOUR_OFFLINE_EMAIL_ADDRESS"><img id="islpronto_image_tech" alt="Live chat tech support" src="http://example.com/images/islpronto-message-tech.jpg" style="border:none"/></a>

Code above creates two buttons for pronto chat, one will be used to chat with sales domain and other with tech domain.

Step 2

For each chat button, add a script using chat_info.js that will return the information about supporters in that domain. Enter correct domain name after chat_info.js: chat_info.js?d=xxxdomain_namexxx as seen below:

<script type="text/javascript" src="XXXSERVER_ADDRESSXXX/live/islpronto/public/chat_info.js?d=sales&lang=en&variable=ISLProntoInfo_sales"></script>
<script type="text/javascript" src="XXXSERVER_ADDRESSXXX/live/islpronto/public/chat_info.js?d=tech&lang=en&variable=ISLProntoInfo_tech"></script>
ISLProntoInfo_support and ISLProntoInfo_tech now hold information about supporters for domains support and tech.

Step 3

Add another script that initiates the chat and  changes images for each link depending on if supporters are available.

<script type="text/javascript">
         // check the "sales" domain supporters and update the image/link if there is at least 1 supporter available
         if(ISLProntoInfo_sales.supporters > 0) {
                 var link_sales = document.getElementById('islpronto_link_sales');
                 link_sales.onclick = ISLProntoInfo_sales.onchat;
                 link_sales.href = 'javascript:void(0)';
                 var image_sales = document.getElementById('islpronto_image_sales');
                 image_sales.src = 'http://example.com/images/islpronto-chat-sales.jpg';
         }
         // check the "tech" domain supporters and update the image/link if there is at least 1 supporter available
           if(ISLProntoInfo_tech.supporters > 0) {
                 var link_tech = document.getElementById('islpronto_link_tech');
                 link_tech.onclick = ISLProntoInfo_tech.onchat;
                 link_tech.href = 'javascript:void(0)';
                 var image_tech = document.getElementById('islpronto_image_tech');
                 image_tech.src = 'http://example.com/images/islpronto-chat-tech.jpg';
         }
</script>

Was this article helpful?

Cookie Consent

We use cookies to ensure the proper functioning of our website (essential cookies) and, with your consent, for other purposes (functional and other cookies) as outlined in our Cookie Policy and Privacy Policy. You can update your cookie preferences at any time.