OnSchedJs Docs

Get Started

Welcome to OnSchedJs. OnSchedJs provides for rapid UI implementation with the OnSchedApi. We do all the heavy lifting for you so you can quickly go live and start accepting bookings.

OnSchedJs is built on the foundation of UI elements. You simply assemble the elements to support your own booking flows.

We are currently in beta. The existing functionality provides standard consumer booking flows. Moving forward, we'll be adding support for setup flows such as location onboarding, resource onboarding and event management.

Setup and Installation for Beta

                    
                        <!--Include OnSchedJs css and javascript files-->
                        <script type="text/javascript" src="https://js.onsched.com/0.1.0-beta/"></script>

Initialization

                
/// Initialize OnSchedJs
/// Param 1 - Your API ClientId.
/// Param 2 - "sbox" for sandbox testing
///           "live" for production
///
///  NOTE - you must register your domain for authorization. Contact us.
///
var onsched = OnSched("DemoUser", "live");

/// Get instance of elements to use for creating elements
var elements = onsched.elements();

Elements

Elements are created with parameters and options. Parameters specify the id's that the API endpoints take in. Not all elements have options yet. In the future, you will be able to specify options for such things as color schemes.

When an element is mounted, the API calls are fired and the UI is rendered. Elements can be updated if you change the parameters and options. e.g. availability.update(params, options); You may wish to defer the mounting of an element until you receive required data from events.

Elements receive events that allow you to create booking flows. Events pass relevant detail for you to consume. For example, when a list element is clicked on, or data from the API is loaded, an event will be sent to the element.

Availability Element

                
var now = new Date();
var tzOffset = -now.getTimezoneOffset();

// Parameters relate to GET availability endpoint and PUT appointments endpoint in OnSched API
var availabilityParams = {
    locationId: 'burlingtonmedical', serviceId: 5, resourceId: 13, tzOffset: tzOffset,
    appointmentBM: { customFields: {field1: "Some test data from onschedjs"}}
};

// Use privacy fields to force a customer to accept terms and/or view the privacy policy
var availabilityOptions = 
{ privacyFields: { 
    checkboxLabel: "Accept GDPR Terms", linkText:"View our Privacy Policy", linkUrl: "https://onsched.com", linkTitle: "View in new tab"
    }
};
var availability = elements.create("availability", availabilityParams, availabilityOptions);

// mount the onsched element into an html element on the page, typically a div. 
// The id of the html element is what you you pass as the parameter to mount.
// The UI for the element will be rendered into the html element.

// You may wish to defer the mounting of availability after you have 
// gathered information from other elements. e.g. serviceId, resourceId

availability.mount("availability");

Other parameters supported by the availability element are:

customerId - onsched customer object id
completeBooking- either "BK" or "RS" to book or reserve

With these two parameters, you can create an implied booking for a customer. Skip the booking form.

Availability Element Events
Name	Data	Description
bookingConfirmation	API Response	Fired when booking is complete

Customer Element

                

// Matches the definition of the POST consumer/v1/customer endpoint in OnSchedApi
var customerObject = {
    locationId: 'burlingtonmedical', firstname: 'Jim', lastname: 'Beem', email: 'jim@onsched.com', 
    type: 0, contact: { mobilePhone: '9053998404' }
};
// We use the customer object to find a customer by email.
// If the customer doesn't exist we create it using the information supplied in the customerObject
var customerParams = 
//  { locationId: '', customerId: '', email: 'john@onsched.com', customerIM: customerObject };
var customerOptions = {};
var customer = elements.create("customer", customerParams, customerOptions);
// mounting the customer element does not render any UI. However an event is
// sent to the element when the customer data is loaded. You can then use the
// customerId or any other properties for other purposes e.g. doing an implied booking in availability,

customer.mount("customer");

Customer Element Events
Name	Data	Description
postCustomer	API Response	Fired when customer created
getCustomer	API Response	Fired when customer response received

Appointment Element

                    

var appointmentParams = { locationId: '', appointmentId: '383587' };
var appointmentOptions = { confirm: true};
var appointment = elements.create("appointment", appointmentParams, appointmentOptions);
var elAppointment = document.getElementById("appointment");
elAppointment.addEventListener("getAppointment", function (e) {
console.log("index.js getAppointment success id="+e.detail.id);
console.log(e.detail);
});
elAppointment.addEventListener("confirmAppointment", function (e) {
console.log("index.js confirmAppointment success id="+e.detail.id);
console.log(e.detail);
});
appointment.mount("appointment");

Appointment Element Events
Name	Data	Description
getAppointment	API Response	Fired when appointment response received
confirmAppointment	API Response	Fired when appointment has been confirmed

Locations Element

                
var locationsParams = { units: 'imperial', limit: 8, offset: 0 };
var locationsOptions = {};
var locations = elements.create("locations", locationsParams, locationsOptions);
var elLocations = document.getElementById("locations");
elLocations.addEventListener("getLocations", function (e) {
    elServices.innerHTML = "";
    elAvailability.innerHTML = "";
});
elLocations.addEventListener("clickLocation"), function(e) {
    // returns the locationId in e.detail
    console.log(e.detail.locationId);
}

Locations Element Events
Name	Data	Description
getLocations	API Response	Fired on locations response

Location Element

                
var locationParams = { locationId: 'burlingtonmedical' };
var locationOptions = { getFirst: true };
// location variable is a javascript system variable so use something else
var xlocation = elements.create("location", locationParams, locationOptions);
var elLocation = document.getElementById("location");
elLocation.addEventListener("getLocation", function (e) {
    // returns the location object from API
    console.log(e.detail);
});

Location Element Events
Name	Data	Description
getLocation	API Response	Fired when location response received

Services Element

                
var servicesParams = { locationId: '' };
var servicesOptions = {};
var services = elements.create("services", servicesParams, servicesOptions);
var elServices = document.getElementById("services");
elServices.addEventListener("getServices", function (e) {
    // returns the services list from the Get /consumer/v1/services API endpoint in e.detail
    console.log(e.detail);
});
elServices.addEventListener("clickService"), function(e) {
    // returns the serviceId in e.detail
    console.log(e.detail.serviceId);
}

Services Element Events
Name	Data	Description
getServices	API Response	Fired on services response

Service Element


var serviceParams = { locationId: 'burlingtonmedical', serviceId: '' };
var serviceOptions = { getFirst: true };
var service = elements.create("service", serviceParams, serviceOptions);
var elService = document.getElementById("service");
elService.addEventListener("getService", function (e) {
    // returns the service object
    availabilityParams.serviceId = e.detail.id;
});

Service Element Events
Name	Data	Description
getService	API Response	Fired when service response received

Resources Element


var resourcesParams = { locationId: '' };
var resourcesOptions = {};
var resources = elements.create("resources", resourcesParams, resourcesOptions);
var elResources = document.getElementById("resources");
elResources.addEventListener("getResources", function (e) {
    // returns the resources list from the Get /consumer/v1/resources API endpoint in e.detail
    console.log(e.detail);
});
elResources.addEventListener("clickResource"), function(e) {
    // returns the resourceId in e.detail
    console.log(e.detail.resourceId);
}

Resources Element Events
Name	Data	Description
getResources	API Response	Fired on resources response

Resource Element


var resourceParams = { locationId: '', resourceId: '' };
var resourceOptions = { getFirst:true };
var resource = elements.create("resource", resourceParams, resourceOptions);
var elResource = document.getElementById("resource");
elResource.addEventListener("getResource", function (e) {
    availabilityParams.locationId = e.detail.locationId;
    availabilityParams.resourceId = e.detail.id;
});

Service Element Events
Name	Data	Description
getService	API Response	Fired when service response received

Search Element


var searchParams = { placeholder: 'Enter Zipcode to find nearest', message: '', searchText: '' };
var searchOptions = {};
// location variable is system variable so use something else
var search = elements.create("search", searchParams, searchOptions);
var elSearch = document.getElementById("search");
elSearch.addEventListener("clicked", function (e) {
    HideToast();
    locationsParams.nearestTo = e.detail.searchText;
    locations.mount("locations");
});
elSearch.addEventListener("notFound", function (e) {
    console.log(e.detail);
});
search.mount("search");

Search Element Events
Name	Data	Description
clicked	searchText: value	Fired when search clicked

Booking Flows

OnSchedJs is designed to accomodate many different booking flows. Think about the sequencing of your booking flow, what you wish to capture and what selections are relevant for your customer.

Multi Location Flow

In a multi location flow, you may wish your customer to find the nearest location for them to book. You can use the search element with the locations element. When an item is clicked in the locations list, you will be sent an event that provides the id of that location.

Alternatively, you can use the locations element to present a list of locations to select from.

I know the location

If you already know the location you wish to book at, then you can just use that location to select services, resources, and display availability. OnSched supports the use of a friendly id as an alternative to using the onsched generated unique id. Configure friendly id's using the Portal or API.

Services Selection in Flow

If you offer different services for your customer to book, the services element will provide that capability. It renders a list of the services at the specified location. The element will receive an event when the service item is clicked. The event handling logic can then mount the next element in the flow.

Service Lookup in Flow

If you have just a single service, you can use the service element to get that service. Then use the id returned in the getService event for another element.

Resources Selection in Flow

If your customers are booking time with a specific resource you can use the resources element to render a list of resources to choose from. It renders a list of the resources at the specified location. The element will receive an event when the resource item is clicked. The event handling logic can then mount the next element in the flow.

Resource Lookup in flow

If you have just a single resource, you can use the resource element to get that service. Then use the id returned in the getResource event for another element.

Capture lead before booking

If you capture lead information ahead of the booking you can then lookup or create that lead from the information that you have. The customer element is used for lookup or creation of a customer. This then simplifies the booking for the customer. You can skip the booking form in availability and create a booking for the customer as soon as they select an available time.

Straight to availability

If you have enough information to take the customer directly to the availability page, then you can simply pass the required parameters. A locationId and serviceId are required. A resourceId is required unless you are using round robin booking. In this case omit the parameter or pass in '' or '0'.