Live Leader

Live Chat 2.0

Login

Customer Login

Popup windows

Blog Navigation

LiveLeader popup example

LiveLeader's customization system is a flexible platform which allows for many different live chat deployments. For a general introduction to the LiveLeader customization API, have a look here.

LiveLeader default implementation is an embedded chat window, which allows the user to conduct a chat directly from a web page. However, sometimes a popup window can be useful. This guide takes you through the process of setting up a live chat popup window. At the same time, it serves as an example of the power and flexibility provided by LiveLeader's customization capabilities.

Note

There are two ways to implement popup windows with LiveLeader. The easiest way is to simply put an image or a link on your web page, that opens up a popup when clicked. You will then put the LiveLeader code inside the popup window. For a detailed explanation on how to open a regular popup window, have a look here.

This guide deals with the more complicated problem of setting up a button that "knows" when operators are online or not, only showing a "Click here for live chat" message when operators are in fact online.

Prerequisites

In order to use this guide, you should:

  • have a working LiveLeader account (Pro or Enterprise)
  • have a server on which to deploy
  • have some knowledge of HTML
Getting ready

In order to enter the LiveLeader cusomization window, follow these steps:

  • Log in to LiveLeader.com with your operator account
  • Select Settings > Customize
Structure

A popup implementation is achieved by creating two templates. The first template is the popup button template. This is displayed in the main web page, and can be either a graphic or a text. This template links to the second template, which handles the actual chat window.

Creating a chat window template

To set up the button template, follow these steps:

  • Select New template
  • Enter the Name "Chat window"
  • Click Save
  • Click Embed...
  • Make selections such as Language, Queue, Operator as necessary
  • Copy and paste the embed code that is displayed. You will need this in the next step
Extracting variables

Example embed code is displayed below.

<script type="text/javascript" src="https://www.liveleader.com/a/Hello
?cid=acc68c22-5d60-4b73-8ca0-7d8a3985b14c;
v=1;w=1;ti=65c1b9dd-ec01-420d-ac78-3b980e8d38e0">
</script>

You need to copy two variables from this code. The snippet in red is your CID variable. The bit marked in blue is your TI variable. Make sure you copy only the colored snippet. Semicolon or quotation marks should not be included.

Creating a button template

To set up the button template, follow these steps:

  • Select New template
  • Enter the Name "Popup button"
  • Switch to the HTML - available tab
  • Check Override code used in chat invite
  • Copy and paste in the code below, replacing CID and TI with your own values.
<script type="text/javascript">
function chatWindow() {
 var win = window.open("https://www.liveleader.com/a/Hello?a=pop&src="
  + encodeURIComponent("https://www.liveleader.com/a/Hello?cid=CID;v=1;ti=TI&e=1"),
  "", 
  "directories=0,width=165,height=320,location=0,status=0,menubar=0,toolbar=0,scrollbars=1");
 win.focus();
}
</script>
<a href="#" onclick="chatWindow();return false;">We are online, click to chat</a>
  • If you would like to override the default offline button, select the HTML - offline tab and make adjustments as required.
  • Click Save
Deploying

Now all we need to do is to embed the chat button template on your web site.

  • Click the "Popup button" template you created from the menu on the left
  • Click Embed...
  • Copy and paste the embed code into the HTML code of your web site where you would like the chat button to appear
  • Lastly, make sure you test

Company Navigation

© Kalibera 2017. Powered by Amazon Web Services