Widget Configuration

Methods to control the behavior of the LiveSite widget

The LiveSite SDK allows you to control the behavior of the widget on a per website \ per page basis.

This section presents the most commonly requested customizations, a full 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>

To control the SDK and UI, the LiveSite.init function can receive different options. 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

OptionValueString
activeEngagetrue / falseWhether to show the LiveSite Invite
engageButtontrue / falseWhether to show the LiveSite Invite engage button (showing in close mode)
inlineActionstrue / falseWhether to show the actions stripe on the bottom of the Livesite Invite
collapsedActionstrue / falseWhether to show the collapsed actions menu button besides the main LiveSite Invite action
collapsedActionstrue / falseWhether to show the LiveSite action buttons menu
myAccountActiontrue / falseWhether to show the My Account action
identifyClienttrue / falseWhether to identify returning clients and present notifications accordingly
cookietrue / falseDisable cookies
defaultContactTitleStringChange the default action title across all contact actions
uitrue / falseWhether to show the widget layer of the LiveSite SDK
engageButtonTextStringCustomize 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. In some cases 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

What’s Next