Customizing the Web Chat Layout

 

Web chat layout is defined through an XML file - the default layout is available here: http://islpronto.islonline.net/default_templates/ISL%20Pronto/default_template.xml.

It is possible to edit it and make the desired changes to the layout. Having made the desired changes to the web chat layout, you need to contact us via e-mail at support@islonline.com so that we can enable the new layout for your domain. Please use the following format (do not forget to attach the web chat layout XML file!):

subject: Hosted service - change web chat layout <your company name>

body: Please change our web chat layout (attached) for our account <your ISL Online account e-mail>.

attachment: <your web chat layout XML file and all image files that you used>

We shall then enable the new layout for your domain and reply to your e-mail as soon as possible.

Important: You need to edit the template file with great care - it must be a valid XML, otherwise the web chat will not load!

Important: Template file needs to be saved and edited with UTF-8 encoding., using a simple text editor like Notepad might not work. Text editor like Notepad++ is recommended (see Format - Encode in UTF-8).

 

One of the most common customization requests regarding the web chat layout is adding fields to the form that is presented when a user clicks the live chat button.

You should always start with the latest default template and then proceed to add your changes. There are three main groups of changes to be done when adding a field:

  1. In the _before_login function set the appropriate cookie (if you want the same behaviour as with name/email where it remembers you) and call updateCustomFields with the appropriate parameters.
  2. In the before:login section, specify a new form and put the appropriate input tags for the desired custom field(s), div(s) for label(s), add javascript code which reads the appropriate cookie and sets chat_login_submit() as onsubmit.
  3. In the after:login section, appropriately enclose/update the added elements, add javascript code to set the correct tab index order.

The following sample template shows you how to add a mandatory field ("Company"), use inline translations etc.

You can download it here: default_template_modified.xml


Please refer to this topic for more information about the template file: Structure of the template file

Was this article helpful?