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.

Required Parameters:

  • serviceId must be present
  • resourceId must be present, if roundRobin parameter is not provided

Optional Parameters:

  • locationId defaults to the primary business location if not present
  • roundRobin 1 = random, 2 = balanced
  • tzOffset may be hardcoded to a specific timezone offset or by way of a browser detection (example in code sample below)
  • completeBooking either "BK" to book or "RS" to reserve
  • customerId ID of the customer object, please also provide a completeBooking option to skip the booking form
  • appointmentBM object containing customFields object, fields must be labelled field1, field2, field3, etc. and must match the custom fields provided in back end

Availability Options:

  • groupSize group size field will appear in popup booking form when group size is set to TRUE

👍

Availability Custom Events

getAvailability Availability object is returned in e.detail containing availableDays and availableTimes
bookingConfirmation Appointment object is returned in e.detail when the booking has been completed

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: "What is your company name?"}}
};

// Use privacy fields to force a customer to accept terms and/or view the privacy policy
var availabilityOptions = { groupSize: true };

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

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

👍

Customer Element Events

getCustomer Customer object is returned in e.detail when existing customer is found

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

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 set the appointment to Confirmed Status, or FALSE to change the appointment from Confirmed Status to Unconfirmed
  • book provide a value of TRUE in order to set the appointment to Booked 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: true };
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

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

👍

Location Search Element Events

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

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?