Widget Configuration
Methods to control the behavior of the LiveSite widget
The LiveSite SDK allows you to control the widget's behavior on a per website \ per page basis.
This section presents the most commonly requested customizations, a complete list of options can be found in the Complete Options Reference section.
For a live demo of a page with built-in LiveSite actions, see our sample site library
The init() function
Once the LiveSite SDK embed code has been added to the page, the liveSiteAsyncInit() function will be called during the initialization process, notice the LiveSite.init()* function being called inside that function -- this is the function which initiates the configuration and rendering of the UI -- it must be called in order for the SDK to finish loading.
<script>
window.liveSiteAsyncInit = function() {
// Your per-website / per-page logic goes here
LiveSite.init({
id : 'your-livesite-widget-id'
});
};
(function(d, s, id){
var js, fjs = d.getElementsByTagName(s)[0],
p = (('https:' == d.location.protocol) ? 'https://' : 'http://');
if (d.getElementById(id)) {return;}
js = d.createElement(s); js.id = id;
js.src = p + "www.vcita.com/assets/livesite.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'vcita-jssdk'));
</script>
The LiveSite.init function can receive different options to control the SDK and UI. For instance, to hide the LiveSite Invite box on a specific page, you can set the activeEngage option to false.
// reset of embed code ...
LiveSite.init({
id : 'your-livesite-widget-id',
activeEngage: false
});
// ... reset of embed code
As mentioned above, options may depend on your website logic, for example:
// rest of embed code ...
window.liveSiteAsyncInit = function() {
// LiveSite.fn.isMobile() is a utility method provided by the LiveSite
// SDK, in this case we show the Invite box only for desktop browsing
var show = !LiveSite.fn.isMobile();
LiveSite.init({
id : 'your-livesite-widget-id',
activeEngage: show
});
};
// ... rest of embed code
Commonly Used Options
Option | Value | String |
---|---|---|
activeEngage | true / false | Whether to show the LiveSite Invite |
engageButton | true / false | Whether to show the LiveSite Invite engage button (showing in close mode) |
inlineActions | true / false | Whether to show the actions stripe on the bottom of the Livesite Invite |
collapsedActions | true / false | Whether to show the collapsed actions menu button besides the main LiveSite Invite action |
collapsedActions | true / false | Whether to show the LiveSite action buttons menu |
myAccountAction | true / false | Whether to show the My Account action |
identifyClient | true / false | Whether to identify returning clients and present notifications accordingly |
cookie | true / false | Disable cookies |
defaultContactTitle | String | Change the default action title across all contact actions |
ui | true / false | Whether to show the widget layer of the LiveSite SDK |
engageButtonText | String | Customize the text on the LiveSite widget label (closed state) |
Using Your Own Lightbox for Actions
Livesite.js comes with a built-in Lightbox, which provides a slick and consistent look & feel. Sometimes you might want to use your own Lightbox or present the actions in a different method (new tab, for example). The LiveSite SDK provides a hook for replacing the container for all actions, as displayed in the example below:
// reset of embed code ...
LiveSite.init({
id : 'your-livesite-widget-id',
openerFunc: function(url) {
lightbox(url); // Replace the lightbox call with your own lightbox, IFrame or method of your choice
}
});
// ... reset of embed code
Updated 7 months ago