Widget Configuration

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