The purpose of this document is to provide a step-by-step guide for creating custom multi-engagement elements, similar to those as seen below:
- Start by creating an HTML engagement using the provided video reference or the official documentation.
- Example HTML code:
html:
<div class="position"> <button class="btn1" id="btn1" data-LP-event="click">Hover Over Me default</button></div>
- Generate a div with the ID of
customIdLp for the custom button from the LP campaign. - Use the provided HTML page example.
- Place the correct tag between
<!-- BEGIN LivePerson Monitor. --> and <!-- END LivePerson Monitor. -->. - Add the div with the ID
customIdLp to the page.
html:
<div id="customIdLp"></div>
- Customize styling and event handling within the HTML.
- Test the setup and ensure that the engagement functions as expected.
- Configure the viewport for different platforms by adding
<meta name="viewport" content="width=device-width"/>. - This ensures proper window behavior on mobile devices.
- Subscribe to the event to understand when the engagement HTML is ready and inside the DOM.
- Place custom logic inside the
init() function.
javascript:
lpTag.events.bind("LP_OFFERS", "OFFER_DISPLAY", function(data, info) { console.log("LP_OFFERS", data, info); init();});
- Add additional buttons with click events to trigger engagement elements.
- Ensure that the element has
data-LP-event="click" to open a Unified window.
To ensure smooth interaction with the text area inside the DOM, custom logic is required. Below is a sample code snippet that waits for the text area to be ready and then populates it with a predefined message, triggering the bot's flow.
javascript:
startWebWithMessage: function(message, elementID) { var _this = this; if (document.getElementById(elementID || this.elementId)) { document.getElementById(elementID || this.elementId).click(); } if ($('#lpChat div[data-lp-point="lines_area"]').length < 1) { setTimeout(function() { _this.startWebWithMessage(message, elementID); }, 500); } else { _this.webDirectMessage(message); }}Logic starts recursion unless it finds a selector for the text area (This is a point that we can try to improve)Then we are populating input (where user can type message) and sending text under the hood so the bot starts certain flowwebDirectMessage: function(message) { $('.lpview_form_textarea').val(message); // setting message $('.lp_paper_plane_button').prop('disabled', false).trigger('click'); // triggering click event to send text $('.conversation-starter').hide();}
This logic ensures that the text area is ready before populating it with the specified message. The webDirectMessage function handles the process of setting the message and triggering the click event to send it. Additionally, it hides the conversation starter element for a cleaner interface.
