Live Leader

Live Chat 2.0


Customer Login

Customizing LiveLeader

Blog Navigation

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

Embed options

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

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.

Element Class Comment
<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

The following variables can be used to implement functionality in the chat invite HTML.

Variable Comment Example
$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
<div style="background
$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" 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:
<div class="status$online$"></div>

Best practices for templates
  • Avoid inline JavaScript <script> blocks. If you need JavaScript, reference external files. In particular, the LiveLeader code is compressed to one line, so any // comments will break your code.
  • 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

By default, LiveLeader displays various information about visitors, such as IP address, location etc. By using a special JavaScript function, you can insert extra information in what LiveLeader displays for each chat.

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

All you need to do to add extra information is to define a JavaScript variable in the window the chat takes place in. LiveLeader will check for the existence of this specially named variable, and save the return value. This information is visible immeadiately (without having to change tabs) when a chat window opens.

<script type="text/javascript">
  var chatConfig = {
      userInfo: {
        CustomerNo: "123456",
        CustomerCategory: "VIP"
        /* Add any extra variables you need */
      userName: "UserNickname"

This will look as follows to the operator:

You can override how this looks to the operator by selecting Settings > Options > User info.

Company Navigation

© Kalibera 2017. Powered by Amazon Web Services