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

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. 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

Did this page help you?