Introduction:


Implementing LivePerson on your website requires deploying the LiveEngage Tag and deploying LivePerson code on your Web pages. The LiveEngage Tag contains all the Javascript code that LivePerson needs to set up a basic connection with LivePerson servers and to download configuration code from LivePerson servers. The LivePerson code is used to customize variables and add dynamic chat buttons.

Instructions: 


Step 1 -Deploy your LiveEngage Tag
  1. Get your personalized LiveEngage Tag from the LiveEngage application:
    1. Log into LiveEngage. The Home page is displayed.
    2. Click the Get it here link from the LiveEngage Tag area to open the LivePerson Tag window.
      LiveEngage Tag Get it here window


    3. Copy the lines of code from the the LivePerson Tag window.

copy tag code window

 Note: The LiveEngage Tag that you download from LiveEngage is already filled in with your account number. This number is personalised for your account. You should not use any other account number nor should you share or reuse the number.


2. Paste your personalized LiveEngage Tag in a JavaScript file:
  1. Create a file named le-mtagconfig.js.
  2. Paste your personalized LiveEngage Tag code (that you copied in the prevous step) into this file.
  3. Delete the top-most and bottom-most lines, containing the HTML comments, as shown in the image below.
  4. Delete the open and close script tags from the file, as shown in this image:
comment and script tags3. Insert a link to your le-mtagconfig.js file in each of your web pages, changing the src value in the script to point to the path where you are hosting the le-mtagconfig.js file on your server. The link should be directly below the opening <body> tag on each page, as shown below (the link code is highlighted in yellow). 
<body>
<!--
Include the LivePerson tag file
- This external file must be called le-mtagconfig.js
- The file will hold the "LiveEngage Tag"
- The contents for this file can be downloaded from the LivePerson LiveEngage interface
- The contents are unique to your account
-->
<script type="text/javascript" src="le-mtagconfig.js"></script>


Step 2 - Get the LivePerson code template -  le-tag_example_forClients.html.  

Download the code template, le-tag_example_forClients.html, from the LivePerson Knowledgebase.


Step 3 - Deploy the LivePerson code to your website

In this step, you customize the variables and dynamic buttons in the code template (that you downloaded in the previous step). Next, you copy the contents of the file to your web pages, ideally as high up as possible, keeping it all together so it can easily be contained for troubleshooting purposes.  Then you add code for dynamic buttons on your web pages, as needed. (Different pages will often have different variables and sometimes different buttons.)  Note: This step describes lines of code in the template that must be modified or deleted, if not used. The lines of code in the template that are mandatory should not be modified - they should be copied to your web pages as is.
  1. Define page-load variables in the Sending when the page loads section (shown below):
    1. Modify the values of the the unit and language declarations, as needed. The unit is typically a line of business or an area of the website, for example "sales", "service", "marketing" etc.
EXAMPLE: In the LivePerson code template, the unit value is set to sales and the language value to english. Note: unit and language declarations are mandatory and should not be removed from the code.b. (Optional) Define additional page-load variables, as needed. For each variable, set the scope and name, and fill in the variable value with a static value or a reference to a JavaScript variable.EXAMPLE: In the LivePerson code template, addtional scope, session, and visitor variables are defined.c. Delete the additional page-load variable lines that you are not using.var arrLPvars = [// "unit" is required in most deployments
{ scope:"page", name:"unit", value:"sales" },
// "language" is required in deployments that do, or may in the future, need multi-lingual support
{ scope:"session", name:"language", value:"english" },
// You can add as many other variables as you need
{ scope:"page", name:"PAGE_VARIABLE_NAME", value:"VARIABLE_VALUE" },
{ scope:"session", name:"SESSION_VARIABLE_NAME", value:"VARIABLE_VALUE" },
{ scope:"visitor", name:"VISITOR_VARIABLE_NAME", value:"VARIABLE_VALUE" }
];
lpTag.vars.push(arrLPvars);

2. Define send-on-demand variables in the Sending on demand section (shown below) as needed:
  • For each variable that you define, set the scope and name, and fill in the variable value with a static value or a reference to a JavaScript variable.
EXAMPLE: You can set a variable to trigger form validation errors when a visitor clicks a button or a link on the page. The example in the template sets a button click trigger to demonstrate how the send function works. b. Delete the send-on-demand variable definitions that you are not using.  Note: If you are using Send on demand variables, do not delete thetry {} catch() {} block.var sendVarsOnClick = function () {
// Push to queue
lpTag.vars.push([
{ scope:"page", name:"ONCLICK_PAGE_VARIABLE_NAME", value:"VARIABLE_VALUE" },
{ scope:"session", name:"ONCLICK_SESSION_VARIABLE_NAME", value:"VARIABLE_VALUE" },
{ scope:"visitor", name:"ONCLICK_VISITOR_VARIABLE_NAME", value:"VARIABLE_VALUE" }
]);
// This "try" block is here because the LP code must be instantiated on the page
// before the lpTag.vars.send() method can be called
// If the method fails for this reason the variables in the queue will be picked
// up when the LP code initiates
try{
// Send waiting variables immediately
lpTag.vars.send();
} catch(e) {}
};


3. You can remove the entire Sending on demand section, if it isn’t being used.4. Define the default dynamic button in the Dynamic Button section. Set the  default dynamic button name to the name that you defined in the Admin Console.lpTag.dbs.push({ name:"chat-sales-english-default", pid:"lpButtonDiv" });EXAMPLE: In the code template, the default dynamic button is named chat-sales-english-default: .

5. Paste the code from le-tag_example_forClients.html (after you have customized it) into each of your site’s web pages:
  1. Copy the entire <script> section, including the open and close script tags.
  2. Paste it into the <head> area on each of your web pages.

6. (Optional) Add dynamic buttons to your pages by placing the dynamic button code in the <body> section of each page where you would like a dynamic button:
  1. Copy the <div> below to a location on your page.
  2. Set the div id to match the pid in the button definition.
  3. Leave the div code empty.
  4. If you need multiple buttons on a single page then define multiple empty div tags, each with a different id.
 <div id="lpButtonDiv"></div>  

  Note:  The LivePerson system places the appropriate content in the the <div> tag based what you defined in the Admin Console. This <div> merely acts as a placeholder identifying where to place the button.

7. (Optional) If you want to test send-on-demand variables that you defined above, copy the following line of code to your site"s pages:  <button onclick="sendVarsOnClick(); return false;">Send extra variables to LivePerson</button>