Adding vCita action buttons throughout your website will help increase the number of engagements on the page. The LiveSite SDK offers seven actions that can be included in your website:

Schedule a meeting (action reference)
Send a message (action reference)
Click to call
Share a Document (action reference)
Pay online (action reference)
Launch My Account screen
Launch client Login screen (action reference)

For a live demo of a page with built in LiveSite actions see our sample site library

Each action can be embedded as HTML or called using Javascript as part of your website logic. Actions added to your website can be customized with a variety of parameters. This article will cover different methods of embedding actions and the different parameters you can pass.

Embedding as HTML

LiveSite Actions can be embedded using predefined css classes. This method does not require JavaScript and applies to any HTML element (,

, etc').

The following code will open the schedule action when clicking on the

tag,
notice the class="livesite-schedule" which does all the magic.

<div class="livesite-schedule">Schedule an Appointment</div>

Accordingly, you can embed any of the actions

<div class="livesite-contact">Send a Message</div>

<div class="livesite-call">Call Us</div>

<div class="livesite-document">Share a Document</div>

<div class="livesite-pay">Pay Online</div>

<div class="livesite-myaccount">My Account</div>

<div class="livesite-login">Login</div>

Passing Action Parameters

LiveSite also accepts parameters that are passed to it using the data attributes. In the example below we add a button to register to an english class by passing a predefined title to the Contact action.

<!-- The data-title attribute represents the title option, title being the option name -->
<button class="livesite-contact" data-title="Registration to your English Class">Register to English Class</button>

<!-- You can pass the parameters as one options string by using the data-options attribute -->
<button class="livesite-contact" data-options="title:Registration to your English Class">Register to English Class</button>

<!-- You can even define the action dynamically in the data-options attribute -->
<button class="livesite-action" data-options="action:contact;title:Registration to your English Class">Register to English Class</button>

The Actions Reference sections covers the built-in actions and their parameters.

Calling an Action using Javascript

To call an action based on a certain behaviour on the page, you can make a JS call to initiate any of the actions. As with the embedded HTML action, you can also pass action parameters to the actions.

// JS call to the schedule action
LiveSite.schedule();

// Initiate the schedule action with the name already in place
LiveSite.schedule({first_name: "John", last_name: "Doe"});

// The parameters can depend on your own logic, the variable below can be 
// from get parameters or any other flow you desire
var email      = "[email protected]",
    first_name = "John",
    last_name  = "Dow";

LiveSite.schedule({email: email, first_name: first_name, last_name: last_name});

// As with the embedded actions, you can also pass the action type as a parameter according to your flow
LiveSite.action('schedule', {email: "[email protected]"});