Structure of the Template File
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.
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.
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.
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.
This section is used when the customer is waiting for an available operator.
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.
Use this section to position the operator image.
Use this section to position the name of the operator.
Use this section to position the notification text that there is currently no operator in the chat.
Use this section to position the operator typing indicator (small animated keyboard).