Guide to customizing LiveLeader
This document describes how to customize LiveLeader's appearance and functionality. Note that not all plans support customization.
How LiveLeader works
LiveLeader is embedded by adding a <script> tag to your site's HTML. This script calls LiveLeader.com. If an operator is available, the code for a chat invite will be written to your site's HTML. If not, nothing will be written. If a user accepts a chat invite, messages are sent and received by inserting new <script> elements into your site's HTML <head> element.
To customize how LiveLeader is embedded, select the Settings > Embed code menu option. By selecting Show options, you will be able to select:
- Which operator to embed. You can choose to embed a specific operator, or any operator.
- Which locale to use. This can either be detected automatically, or you can choose to override the visitor's preferred locale.
- Which template to use (if your plan supports this).
Since LiveLeader's chat invites are pure HTML, CSS can be applied to style LiveLeader according to your preferences. This can be done either by embedding CSS via inline style attributes in your chat invite code, or by adding rules for LiveLeader's CSS class names to your site's existing style sheets. To learn more about how CSS works, take a look at this tutorial. The default LiveLeader chat invite code includes inline CSS rules. You can modify these how you wish.
If you only need to make minor alterations to the appearance of LiveLeader, you can use the default code, but add rules to your site's CSS that override the default inline CSS. If you do this, make sure you use the !important modifier, since CSS rules defined in a stylesheet have lower priority than inline CSS rules. Note that this approach will not work with plans that do not support customization.
CSS class names used by LiveLeader
For plans that support customization, the following class names are used by LiveLeader in the default chat invite HTML.
|<div>||liveleader||Outermost wrapper for the chat invite|
|<img>||liveleader_pic||Operator's profile image|
|<div>||liveleader_log||Where chat messages are shown|
|<textarea>||liveleader_input||Text box to enter messages|
|<div>||liveleader_btn||The button used to send messages|
|<div>||liveleader_status||The status field|
|<img>||liveleader_padlock||The padlock (if visible) image used to indicate a secure connection|
|any||liveleader_expanded||Class name added to the input element when expansion is triggered|
|<div>||liveleader_vismsg||A message sent by a visitor|
|<div>||liveleader_opmsg||A message sent by an operator|
Variables used in chat invite HTML
Variables used in chat invite HTML
The following variables can be used to implement functionality in the chat invite HTML.
|$button$||Makes an element work as a Send-button. When the element is clicked, the message will be sent.||<img src="button.gif" $button$ />|
||Inserts the address of the standard Send-button background image
|$input$||Makes an input element into the message input field, i.e. where the user types in the message.||<textarea $input$></textarea>|
|$expand$||Makes an input element expand when focus is received. Expansion allows the chat invitation to be smaller until the user clicks on it. Used with $expandTarget||<textarea $expand$></textarea>|
|$expandTarget$||Used with an element to define it as the target of expansion. The element will be hidden until the user clicks on the $expand element.||<div $expandTarget$>|
Only shown after expansion
|$log$||Makes an element into the log pane, where messages will be displayed as they're sent and received.||<div $log$></div>|
|$padlock$||Inserts a padlock image to indicate a secure connection. This will only be inserted if your plan supports SSL encryption, and the LiveLeader script is called via HTTPS.||$padlock$|
||Inserts the "Live chat by LiveLeader.com" badge image
||<img src="$badgeImg$" />|
|$pic$||Makes an element info the operator's profile picture.||<img $pic$ />|
|$greeting$||The greeting text entered by the operator||<div class="greeting">|
|$firstname$||The operator's first name||Hi, my name is $firstname$.|
|$lastname$||The operator's last name||Hi, my name is $firstname$ $lastname$.|
|$email$||The operator's email address||You can contact me at $email$.|
|$online$||Returns the availability status of the operator. If operator is available, returns "1", otherwise "0". Useful for displaying a status icon.||Status: |
Best practices for templates
- Avoid ID attributes on the elements that are used in conjunction with LiveLeader variables. Instead, use CSS classes:
Bad: <div id="myid" $log$>
Good: <div class="myclass" $log$>
Overriding language strings
If your plan supports customization, you can override the language strings used in the LiveLeader interface. Select Settings > Customize > Language. You will thereby be able to provide a chat interface to your users no matter what language they speak, irrespective of LiveLeader's locale support.
LiveLeader chat invites can dynamically expand when the user clicks on them. This allows them to take up less space than a full chat window until the user decides to enter a chat. When a chat window is expanded, the element containing the $input$ variable will be increased in size, and certain default CSS properties will be applied. Also, the CSS class _liveleader_expanded will be added to the $input$ element. This allows you to override how the chat invites look after expansion.
Adding custom visitor info
This may be useful in the following scenarios:
- users are logged on to your site, and you want operators to know the user they are talking to
- you want to store extra information about each chat, such as the visitor's screen resolution
- you want to show operators the number of items in the visitor's shopping cart
This will look as follows to the operator:
You can override how this looks to the operator by selecting Settings > Options > User info.