Hello All,
I have a product page that loads a working live person button on page load. Then if a user selects a color variant of that product the product information and image reload via an ajax call and the live person button disappears. If i try to clone the button and manually stick it back in the DOM the button becomes un-clickable. Below is the current set up :
1. On page load this is getting called in a script block which I believe is initializing the LP button on domReady: (its on a single line)
window.lpTag = { site: 'xxxxxxx', lpSrv: 'server.iad.liveperson.net <http://server.iad.liveperson.net> ', _v: '1.0', protocol: location.protocol, events: { bind: function (app, ev, fn) { lpTag.defer(function () { lpTag.events.bind(app, ev, fn) }) }, trigger: function (app, ev, json) { lpTag.defer(function () { lpTag.events.trigger(app, ev, json) }) } }, defer: function (fn) { this._defL = this._defL || []; this._defL.push(fn) }, load: function (src, chr, id) { if (!src) { src = this.protocol + '//' + ((this.ovr && this.ovr.domain) ? this.ovr.domain : 'lptag.liveperson.net <http://lptag.liveperson.net> ') + '/tag/tag.js?site=' + this.site } var s = document.createElement('script'); s.setAttribute('charset', chr ? chr : 'UTF-8'); if (id) { s.setAttribute('id', id) } s.setAttribute('src', src); document.getElementsByTagName('head').item(0).appendChild(s) }, init: function () { this._timing = this._timing || {}; this._timing.start = (new Date()).getTime(); var that = this; if (window.attachEvent) { window.attachEvent('onload', function () { that._domReady('domReady') }) } else { window.addEventListener('DOMContentLoaded', function () { that._domReady('contReady') }, false); window.addEventListener('load', function () { that._domReady('domReady') }, false) } if (typeof (_lptStop) == 'undefined') { this.load() } }, _domReady: function (n) { this.isDom = true; this._timing[n] = (new Date()).getTime(); this.events.trigger('LPT', 'DOM_READY') } }; lpTag.init();
2. After the page load my dom looks like this ( Ive collapsed the inline styles for brevity ) and we have a working LP button:
<li class="action live-person-btn">
<div id="LP_DIV">
<div id="lpchat-container" class="lpchat-container" style="...">
<div id="lpchat-container--1" class="lpchat-container" style="...">
</div>
<div id="lpchat-container--2" class="lpchat-container" style="...">
<img id="lpchat-image--3" class="lpchat-image" src="http://images.liveperson.com/lp/20279193/repoffline.gif<http://images.liveperson.com/lp/20279193/repoffline.gif> " style=" ">
</div>
</div>
</div>
</li>
3. Then Im making an ajax call that totally replaces the working liveperson button with an empty :
<li class="action live-person-btn"></li>
At this point how can I either clone/re-initialize that button, or create a new one in that empty <li>?
I've had a few calls with LP engineers / Success Managers. This is where the LP team pointed me.
