I am testing out the LivePerson service for the first time and I'm having some difficulty getting the DynamicButton to work. I've looked through other developer questions and answers and read the API information but nothing seems to clearly explain how to successfully embed a dynamic button. Thanks.
I am using the following index.html file:
<!DOCTYPE html>
<html>
<title>Live Person Demo</title>
<head></head>
<body>
Live Person Demo - Dynamic Button
<div id="chatbutton-div"></div>
<script type="text/javascript" src="mtagconfig.js"></script>
</body>
</html>
Here is my mtagconfig.js file:
var lpMTagConfig = {
'lpServer': "dev.liveperson.net",
'lpNumber': "******",
'lpProtocol': (document.location.toString().indexOf('https:') == 0) ? 'https' : 'http'
};
//Dynamic Buttons Array
if(typeof(lpMTagConfig.dynButton)=='undefined') { lpMTagConfig.dynButton = []; }
// This need to be add to afterStartPage will work
if(typeof(lpMTagConfig.ifVisitorCode)=='undefined') {lpMTagConfig.ifVisitorCode = []; }
function lpAddMonitorTag(src) {
if (typeof(src) == 'undefined' || typeof(src) == 'object') {
src = lpMTagConfig.lpMTagSrc ? lpMTagConfig.lpMTagSrc : '/hcp/html/mTag.js';
}
if (src.indexOf('http') != 0) {
src = lpMTagConfig.lpProtocol + "://" + lpMTagConfig.lpServer + src + '?site=' + lpMTagConfig.lpNumber;
} else {
if (src.indexOf('site=') < 0) {
if (src.indexOf('?') < 0)src = src + '?'; else src = src + '&';
src = src + 'site=' + lpMTagConfig.lpNumber;
}
}
;
var s = document.createElement('script');
s.setAttribute('type', 'text/javascript');
s.setAttribute('charset', 'iso-8859-1');
s.setAttribute('src', src);
document.getElementsByTagName('head').item(0).appendChild(s);
}
// this button was added by me on the admin console
lpMTagConfig.dynButton[lpMTagConfig.dynButton.length] = {'name':'chat-button-1','pid':'chatbutton-div','afterStartPage': true,'ovr':'lpMTagConfig.db1'};
if (window.attachEvent) window.attachEvent('onload', lpAddMonitorTag); else window.addEventListener("load", lpAddMonitorTag, false);
The custom button I specified in the Dynamic Button instance loads correctly, but I cannot click on it. In other words, even though the button is wrapped in an anchor tag, nothing happens. Not sure why
Here is how the HTML is ultimately rendered when the LivePerson javascript files are loaded:
<!DOCTYPE html>
<html>
<head>
<body>
Live Person Demo - Dynamic Button
<div id="chatbutton-div" style="visibility: visible;">
<a id="lpDynamicButtonHref-996" style="cursor:default" href="#" title="">
<img id="lpDynamicButtonImg-996" border="0" style="border: 0px none" name="lpDynamicButtonImg-996" alt="" src="../images/chat-default.png">
</a>
</div>
<script src="mtagconfig.js" type="text/javascript">
</body>
</html>