vCita 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 engagements on your web-page, thanks to its eye-catching design. Using the SDK you can:

Edit the CSS to customize the Client Portal widget look and feel
Add custom actions to the Client Portal widget
Configure the init function to control the behavior of the widget

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 on the backend.

See the following to:

Embed actions in buttons in your design
Embed forms in your layout

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>

❗️
Replace the value in your-livesite-widget-id with the ID of your own vCita 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 vCita's 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 to meet the unique needs of every website. 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.