Multi Button Engagement

Customizable multi-button engagement for LivePerson's Conversational Cloud platform.

Note: This code repository is not supported, use at your own risk.

Setup

Engagement

Add an engagement with the "Embedded" set as the format, and then cloose "HTML Engagement"

Enter this code:

<div id="lp-multi-channel-engagement" data-LP-event="click"></div>

Generate the code for the page here, note/copy the <div> code provided, and then finish creating the engagement.

Website

Javascript

Using a tag manager, or direct insertion, load the multi-engagement.min.js file on your website. You can optionally use the CDN link here

https://cdn.jsdelivr.net/gh/LivePersonNY/MultiButtonEngagement/multi-engagement.min.js

Page element

Paste in the footer of your page the div noted from the engagement

<div id="LP_DIV_XXXXXXXXX"></div>

Custom Configuration

The settings of the engagement can be configured in 2 ways. Using data attributes in the <div id="lp-multi... added to the engagement, or by calling the config method on the lpMultiChannelEngagement object (created when js is loaded).

Using data attributes

For instance, to tell the engagement which channels you want to appear, override the "channels" data setting:

<div data-channels="sms,whatsapp" id="lp-multi-channel-engagement" data-LP-event="click"></div>

To do in JS on page, use this example:

<script src="/path/to/javascript.js"></script>
<script>
	lpMultiChannelEngagement.config({
		channels: "sms,whatsapp" //Choices are sms, whatsapp, apple, facebook
	});
</script>

Options

Below is a table of the available options and defaults

Settings

|Option|Description|Default| |---|---|---| |imagemain|URL, Sets the primary enagement image.|| |imagefacebook|URL, Sets the facebook button image.|| |imagewhatsapp|URL, Sets the whatsapp button image.|| |imageapple|URL, Sets the apple business chat button image.|| |imagesms|URL, Sets the sms button image.|| |channels|String, Sets the channels that will appear in the engagement|facebook,whatsapp,apple,sms| |containerclass|String, the CSS class that is applied to the wrapping DIV for styling purposes|lp-multi-channel-engagement| |zindex|Integer, Sets the Z index of the element, typically this will not need to be changed|10000| |css|URL, The url to the CSS file that is loaded for styling. Use this if you want to dramatically change the look/feel of the engagement|Default CSS...| |debug|Boolean, enable debug logs to appear in the console|false|

Callbacks

Note: It is recommended to call these methods in JS rather than setting the callbacks in data attributes.

Available callback methods for this are: onClickWhatsapp, onClickFacebook, onClickApple, and onClickSms

Example:

<script>
	lpMultiChannelEngagement.config({
		channels: 'facebook,whatsapp',
		onClickWhatsapp: function() {
			// Do something here like open a whatsapp page
		},
		onClickFacebook: function() {
			// Do something here like open Facebook
		}
	});
</script>

Extra

Start web conversation with initial message from user

There is a method in this Javascript kit that will allow you to fire off an initial message to start a conversation. The method is startWebWithMessage.

<script>
	lpMultiChannelEngagement.startWebWithMessage('Hi there!');
</script>