Some introductory notes:
- You can store the needed image files on your ISL Conference Proxy server, in the public section - to upload there, please open ISL Conference Proxy administration at http://localhost:7615/conf (replace localhost with the appropriate server address), then go to Configuration - Advanced - File storage and select the Public tab. When you refer to these files in the template, use /files/filename.ext, like in the examples below.
- ISL Pronto page elements have their unique names, e.g. _input_name, _input_email, _button_end etc. You can modify element's properties using the following syntax: <_update _element="<element name>"> ... specify modified properties ... </_update>
e.g. <_update _element="_label_operator_name" class="label_operator_name"><_absolute y="bodyHeight()-100"/></_update> will position the name of the operator 100 pixels above the bottom part of the chat. - You can use bodyWidth() and bodyHeight() to get current chat window width and height. bodyHeight() can only be used for desktop template file, it is not supported for mobile template file.
The top part of the template file includes general javascript code - usually you do not need to modify it, except when adding custom fields, like in the default_template_modified.xml example.
Next part includes CSS style information - this is where you set the fonts, colors, background etc. Use the standard CSS syntax to define classes etc.
page entries
Below the CSS part you will see several <page name="..."> entries - these represent certain events/stages of the chat. Please refer to the appropriate section below for more information about a specific entry.
Note: Each entry can include its own javascript code that gets executed at the appropriate time (i.e. when that stage is active). If you need it, you can add javascript into any of these entries like this: <_javascript> ...some code... </_javascript>
bottom
This section represents the foundation of the chat window, usually you put external border elements in it and set some background, e.g.:
<div class="background"><_absolute x="0" y="0" w="bodyWidth()" h="bodyHeight()"/></div>
<img src="/files/mydesign_border_topleft.jpg><_absolute x="0" y="0"/></img>
<img src="/files/mydesign_border_topright.jpg><_absolute x="bodyWidth()-20" y="0"/></img>
...
before:login / after:login
This section is used to set the look for the customer form that is shown to the customer when he/she clicks "live chat" on your webpage.
before:chat / after:chat
This section is used to set the look for the chat window where a customer is chatting with a supporter.
after:wait_for_operator
This section is used when the customer is waiting for an available operator.
dynamic entries
At the bottom you will see several <dynamic name=".."> entries - these represent certain elements that can change during the chat, e.g. another operator takes over the chat so this changes the name and the image displayed. Please refer to the appropriate section below for that entry's description.
after:operator_face
Use this section to position the operator image.
after:operator_name
Use this section to position the name of the operator.
after:operator_none
Use this section to position the notification text that there is currently no operator in the chat.
after:operator_typing
Use this section to position the operator typing indicator (small animated keyboard).