Quickstart - Create your first widget

Our Client Portal offers a wealth of engagement tools to drive more business and deliver amazing customer service through your website. The LiveSite SDK offers you complete freedom in designing and customizing the Client Portal actions to suit your needs.

This SDK offers two ways of customizing the Client Portal and enhance your site:

  • Customize the Client Portal widget and control its behavior
  • Use your own layout and design to call the Client Portal actions

Both methods require that you include the LiveSite init function in your code first.

357

Left: a LiveSite widget \ Right: an embedded LiveSite action

Customization of the Client Portal Widget

Using the Client Portal widget increases engagement on your web-page thanks to its eye-catching design.

Using the SDK, you can:

Using Client Portal actions in your design

Using Client Portal actions in your design

Any of the Client Portal calls to action - schedule, leave your details, share a document, pay online, and login to the client portal can be triggered separately, or integrated into your web-page layout. This gives you the ultimate control over your front-end, without compromising the backend.

See the following:

Basic Setup - LiveSite init Function

Using the Client Portal calls to action require that you include the 'LiveSite' init function (below) to your web-page code. The code will load the SDK and all needed resources asynchronously.

<script>
  window.liveSiteAsyncInit = function() {
    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://'),
        r = Math.floor(new Date().getTime() / 1000000);
    if (d.getElementById(id)) {return;}
    js = d.createElement(s); js.id = id;
    js.src = p + "www.vcita.com/assets/livesite.js?" + r;
    fjs.parentNode.insertBefore(js, fjs);
  }(document, 'script', 'vcita-jssdk'));
</script>

❗️

Important

Replace the value in your-livesite-widget-id with the ID of your own Client Portal. You can find the embed code with your own ID in the Client Portal>Website Widget>Client Portal Widget>Add to Website under Other websites (HTML).

📘

Note that if you're using the Client Portal via a plugin (through our platform integrations) this code will be added automatically to your page once you install the widget.

Need help?

The LiveSite SDK has been built to enhance your website and meet every website's unique needs. If there is something you are not sure how to do or don't know if it is possible to, don't hesitate and contact us.