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.

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");
                    
                
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);
}
    
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);
});
    
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);
}
    

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;
});

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);
}

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;
});

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");

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

Screen Shots

Availability
availability
Availability on Mobile
availability mobile
Location Search
locations search
Services
services element
Booking Form
booking form
Booking Form on Mobile
booking form mobile

Release Notes

May 5, 2020 - beta release 1

Implement baseline consumer booking flows.

May 6, 2020 - beta release 2

Implement bug fix on availability element to pass locationId param to API.

June 10, 2020 - beta release 0.1.0-beta

Move to new distribution model js.onsched.com

June 23, 2020 - bug fixes for beta release 0.1.0-beta

Resolve issue of formatting Name from firstname, lastname. Return data from lists: Locations, Services, Resources. Implement custom booking fields

July 1, 2020

Add option in availability element to display privacy accept checkbox and a link to privacy policy.

Add option in availability element to pass through Appointment Book Model data to API for customFields in appointment Put call.