Consumer Elements

Availability Element

The objective of the Availability Element is to render a calendar module with available times to be selected by the user. Please see below for the required and optional parameters that are to be provided to this element, custom events included with the element, a code sample for the element, and screenshot before any additional style sheet is provided.

The following is an example of the Availability Element using only the required parameters serviceId & resourceId. Below the example are Javascript Recipe's for common uses of the Availability Element, for more examples please see the Code Samples page.

var availabilityParams = { serviceId: 5, resourceId: 13 };
var availabilityOptions = {};

var availability = elements.create("availability", availabilityParams, availabilityOptions);

availability.mount("availability");

The following Custom Event Listeners can be added to the DOM element in order to trigger new actions in your booking flow:

Booking Confirmation
bookingConfirmation
Appointment object is returned in **e.detail** when the booking has been completed
Get Availability
getAvailability
Object is returned in **e.detail** containing availableDays and availableTimes
Click Time
clickTime
Appointment object is returned in **e.detail** containing details about the timeslot selected

The following table describes both the required and optional properties to include in the availabilityParams object prior to mounting the Availability Element.

Parameters

Type

Required

Defaults & Description

serviceId

String/Integer

Required

ID of the Service, all availability requests require at minimum the service ID.

resourceId

String/Integer

Required

ID of the Resource, all availability requests require either a specified Resource, or if using Round Robin set resourceId=0

locationId

String

Optional

If no ID is provided the Location will default to the Primary Location

roundRobin

String/Integer

Optional

Round Robin will randomly select between Resources based on who is available in each time slot:
0 = none
1 = random
2 = balanced

tzOffset

String

Optional

If the timezone offset is not provided the browser will detect the users time zone and book

completeBooking

String

Optional

If you wish to complete the booking without presenting the popup booking form, set this property to the status you wish to complete the booking in:
"IN" = Initial (Temporary, no customerId required)
"RS" = Reserved (No customerId required)
"BK" = Booked (customerId required)

customerId

String/Integer

Optional

If completeBooking property is set to "BK" (Booked) customerId is required

appointmentBM

Object

Optional

Use this object if you are using completeBooking and wish to pass in more appointment information,

The following table describes both the required and optional properties to include in the availabilityOptions object prior to mounting the Availability Element.

Options

Type

Required

Defaults & Description

groupSize

String/Integer

Optional

Group size requires applicable settings to be made in the Service profile before using, please see the Dashboard for more information

Customer Element

The objective of the Customer Element is to search for existing customers using the customer ID or email as unique identifiers. The Customer Element will return an array of all customers matching the parameters provided. If no customer is found an empty array is returned and a new customer object will be created with the email and name parameters provided to the Availability Element when creating an appointment.

No parameters are required to create the Customer Element, if no parameters are passed in a list of all customers will be returned. Please see below for the optional parameters that are to be provided to this element, and a code sample for the element. No UI is provided for the Customer Element as it is a background process used to identify your customer. Should you wish to provide a UI component of the customer's information you may create an element using the response from e.detail in the Custom Events described below.

Required Parameters:

  • locationId defaults to the primary business if not present

Optional Parameters:

  • firstname first name of the customer
  • lastname last name of the customer
  • email email of the customer
  • contact object containing mobilePhone parameter

Parameters

Type

Required

Defaults & Description

locationId

String

Required

Defaults to the Primary Location if not present

Customer Options:

  • groupSize can be added to the customer object. However it is still needed in the availability options object.

👍

Customer Element Events

getCustomer Customer object is returned in e.detail when existing customer is found
postCustomer Customer object is returned in e.detail when a new customer is created

// Matches the definition of the POST consumer/v1/customer endpoint in OnSchedApi
var customerObject = {
    locationId: 'burlingtonmedical', firstname: 'Jim', lastname: 'Beem', email: '[email protected]', 
    type: 0, contact: { mobilePhone: '9053898404' }
};
// 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: '[email protected]', 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");

Appointment Element

The objective of the Appointment Element is to search for existing appointments using the appointment ID as a unique identifier. The Appointment Element will return an object containing the appointment details if that id exists. The Appointment Element may also be used to complete or confirm an appointment that is currently in Initial Status, which is usually used in the payment flow in order to change the booking from Initial Status to Booked or Confirm Status after the customer completes their payment steps (NOTE: An appointment must be in Booked Status to be confirmed, therefor if confirm parameter is set to TRUE for an appointment in Initial Status it will also be converted to Booked Status).

Please see below for the required and optional parameters that are to be provided to this element, and a code sample for the element. No UI is provided for the Appointment Element as it is a background process used to identify/update your appointment. Should you wish to provide a UI component of the appointment information you may create an element using the response from e.detail in the Custom Events described below.

To include additional properties to the appointment record when updating the status include an object labelled appointmentBM with all of the additional properties you wish to include.

Required Parameters:

  • appointmentId specifies the ID of the appointment that is being queried/updated

Optional Parameters:

  • confirm provide a value of TRUE in order to flag the appointment as confirmed, or FALSE to set the appointment to unconfirmed
  • book provide a value of TRUE in order to set the appointment to Booked (BK) Status, or FALSE to change the appointment from Booked Status to Initial
  • cancel provide a value of TRUE in order to set the appointment to Cancelled (CN) Status, or FALSE to change the appointment from Booked Status to Initial

👍

Appointment Element Events

getAppointment Appointment object is returned in e.detail when existing appointment is found
confirmAppointment Appointment object is returned in e.detail when appointment is confirmed
bookingConfirmation Appointment object is returned in e.detail when appointment is converted from Initial to Booked Status using appointment element

var appointmentParams = { appointmentId: '383587' };
var appointmentOptions = { confirm: true, book: false, cancel: false };
var appointment = elements.create("appointment", appointmentParams, appointmentOptions);
var elAppointment = document.getElementById("appointment");

appointment.mount("appointment");

Appointments Element

The objective of the Appointments Element is to search for a filtered list of existing appointments. The Appointments Element will return an object containing an array of appointments that fit the filters provided.

Please see below for the optional parameters that are to be provided to this element, and a code sample for the element and the UI. No UI is provided for the Appointment Element as it is a background process used to identify/update your appointment. Should you wish to provide a UI component of the appointment information you may create an element using the response from e.detail in the Custom Events described below.

Optional Parameters: (Set all optional parameters in an array named formValues to the appointmentsParams object as shown in the example below)

  • locationId: "", ID of the Location, defaults to Primary Location
  • email: Email of the Customer
  • lastname: Last name of the Customer
  • customerId: ID of the Customer
  • serviceId: ID of the Service
  • calendarId: ID of of the Calendar, defaults to main
  • resourceId: ID of the Resource
  • serviceAllocationId: ID of the Service Allocation (if applicable)
  • startDate: Beginning of the date range, defaults to first appointment
  • endDate: End of the date range, defaults to the end of time
  • status: The Status of the Appointment (https://docs.onsched.com/docs/appointments-overview#appointment-status)
  • bookedBy: Email of the user who booked (if booked internally)
var elAppointments = document.getElementById("appointments");
var appointmentsParams = { formValues:  [{ value: '[email protected]', paramName: 'email' }] , searchText: "" };
var appointmentsOptions = {};
var appointments = elements.create("appointments", appointmentsParams, appointmentsOptions);

appointments.mount("appointments");

Locations Element

The objective of the Locations Element is to render a list of Locations within a Company. The Locations Element will return an array of all Locations that match the parameters provided. To provide a search bar in order to collect customer input for element results please see the Location Search Element. Please see below for the optional parameters that are to be provided to this element, custom events included with the element, a code sample for the element, and screenshot before any additional style sheet is provided.

Optional Parameters:

  • *limit limits the number of locations returned in the response, maximum 100
  • offset offsets where the list of locations returned in the response begins (used for paging results), defaults to zero
  • nearestTo searches location results by geo-coordinates, city, or postal/zip code
  • units specifies the unit of measurement, imperial = miles, metric = kilometres

👍

Locations Element Events

getLocations Array of locations is return in e.detail.data when existing locations are found
clickLocation Location object is return in e.detail when a location is selected from the UI component
notFound Object is return in e.detail with not fount message and search text attempted

var locationsParams = { limit: 6, offset: 0, nearestTo: '', units: 'imperial'};
var locationsOptions = {};
var locations = elements.create("locations", locationsParams, locationsOptions);
var elLocations = document.getElementById("locations");

locations.mount("locations");

Location Element

The objective of the Location Element is to return a specified location object. Please see below for the optional parameters that are to be provided to this element, custom events included with the element, and a code sample for the element. No UI is provided for the Location Element as it is a background process used to identify the properties of an location. Should you wish to provide a UI component of the customer's information you may create an element using the response from e.detail in the Custom Events described below.

Required Parameters:

  • locationId defaults to the

Optional Parameters:

  • *limit limits the number of locations returned in the response, maximum 100
  • offset offsets where the list of locations returned in the response begins (used for paging results), defaults to zero
  • nearestTo searches location results by geo-coordinates, city, or postal/zip code
  • units specifies the unit of measurement, imperial = miles, metric = kilometres

👍

Location Element Events

getLocation Location object is returned in e.detail when an existing location is found

var locationParams = { locationId: 'burlingtonmedical' };
var locationOptions = { getFirst: true };
// location variable is a javascript system variable so use something else
var location = elements.create("location", locationParams, locationOptions);
var elLocation = document.getElementById("location");

location.mount("location");

Services Element

The objective of the Services Element is to render a list of Services within a Location. The Services Element will return an array of all Services that match the parameters provided. Please see below for the required and optional parameters that are to be provided to this element, custom events included with the element, a code sample for the element, and screenshot before any additional style sheet is provided.

Required Parameters:

  • locationId defaults to the primary business location if no ID is provided

Optional Parameters:

  • *limit limits the number of services returned in the response, maximum 100
  • offset offsets where the list of services returned in the response begins (used for paging results), defaults to zero

👍

Services Element Events

getServices Array of services is returned in e.detail.data when existing services are found
clickService Service object is returned in e.detail when a service is selected from the UI component

var servicesParams = { locationId: '' };
var servicesOptions = {};
var services = elements.create("services", servicesParams, servicesOptions);
var elServices = document.getElementById("services");

services.mount("services");

Service Element

The objective of the Service Element is to return a specified service object. Please see below for the required and optional parameters that are to be provided to this element, custom events included with the element, and a code sample for the element. No UI is provided for the Service Element as it is a background process used to identify the properties of a Service (i.e. Name, Duration, etc). Should you wish to provide a UI component of the customer's information you may create an element using the response from e.detail in the Custom Events described below.

Required Parameters:

  • serviceId must be present
  • locationId defaults to the primary business location if no ID is provided

Optional Parameters:

  • *limit limits the number of services returned in the response, maximum 100
  • offset offsets where the list of services returned in the response begins (used for paging results), defaults to zero

👍

Service Element Events

getService Service object is returned in e.detail when an existing Service is found

var serviceParams = { locationId: 'burlingtonmedical', serviceId: '' };
var serviceOptions = { getFirst: true };
var service = elements.create("service", serviceParams, serviceOptions);
var elService = document.getElementById("service");

service.mount("service");

Resources Element

var resourcesParams = { locationId: '' };
var resourcesOptions = {};
var resources = elements.create("resources", resourcesParams, resourcesOptions);
var elResources = document.getElementById("resources");

resources.mount("resources");

👍

Resources Element Events

getResources Fired when existing resources are found

Resource Element

var resourceParams = { locationId: '', resourceId: '' };
var resourceOptions = { getFirst:true };
var resource = elements.create("resource", resourceParams, resourceOptions);
var elResource = document.getElementById("resource");

resource.mount("resource");

👍

Resource Element Events

getResource Fired when an existing resource is found

Location Search Element

👍

Location Search Element Events

clicked Fired when search clicked
notFound Fired when no locations are found

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

search.mount("search");

Appointment Search Element

var appointmentSearchParams = { message: '', searchText: '' };
  var appointmentSearchOptions = {};
  // location variable is system variable so use something else
  var appointmentSearch = elements.create("appointmentSearch", appointmentSearchParams, appointmentSearchOptions);
  var elAppointmentSearch = document.getElementById("appointmentSearch");
  elAppointmentSearch.addEventListener("clicked", function (e) {
    appointmentsParams.searchText = e.detail.searchText;
    appointmentsParams.formValues = e.detail.formValues;
    appointments.mount("appointments");
  });
  elAppointmentSearch.addEventListener("notFound", function (e) {
  });

Allocations Element

The objective of the Allocations Element is to render a list of Allocations added to a service. The Allocations Element will return an array of all Allocations that match the parameters provided. Please see below for the required and optional parameters that are to be provided to this element, custom events included with the element, a code sample for the element, and screenshot before any additional style sheet is provided.

Required Parameters:

  • serviceId service ID of an event type service must be provided in order to list allocations that exist on that service
  • locationId defaults to the primary business location if no ID is provided

Optional Parameters:

  • *limit limits the number of services returned in the response, maximum 100
  • offset offsets where the list of services returned in the response begins (used for paging results), defaults to zero
var elAllocations = document.getElementById("allocations");
  var allocationsParams = { serviceId: '1' };
  var allocationsOptions = {};
  var allocations = elements.create("allocations", allocationsParams, allocationsOptions);
  elAllocations.addEventListener("getAllocations", e => {
    console.log('e.detail', e.detail);
  })
  elAllocations.addEventListener("clickAllocation", e => {
    console.log('e.detail', e.detail);
  })

Did this page help you?