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 an example before any additional style sheet is provided.

Example

Event Listeners

Javascript Recipes

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.

Syntax

<div id="customer"></div>

<script type="text/javascript">
  // We use the customerParams object to find a customer by email.
  // If the customer doesn't exist we create it using the information supplied in the customerIM object.

  // Configure Element parameters
  const customerParams = {
      locationId: '', // String. Default: Primary Location. Defines the Location where the Customer is within your Company.
      email: '', // String. Defines the email address of the customer. This is used as a unique identifier for each customer, you cannot have two customers with the same email address.
      customerIM: { // Object. This is used to create a new customer if one does not exist.
        locationId: '', // String. Default: Primary Location. Defines the Location where the Customer is within your Company.
        name: '', // String. Defines the business name of the of the cusmer. Used if type = 1, see "type" for more details.
        lastname: '', 
        firstname: '',
        type: 0, // String. Defines the type of Customer. 0 = Person, 1 = Business. For type 1, the "name" field is used. The name field is then also used to populate the lastname property.
        notificationType: '', // String/Integer. Default: 1. Defines the notification type of the Customer, 0 = None, 1 = Email, 2 = SMS, 3 = Email & SMS.
        address: {
          addressLine1: '', 
          addressLine2: '',
          city: '',
          state: '',
          country: '',
          postalCode: ''
        },
        contact: {
          preferredPhoneType: '',
          homePhone: '',
          mobilePhone: '', // If notification type is 2 or 3, the mobile number must be provided to send SMS notificaitons.
          businessPhone: '',
          businessPhoneExt: '',
          skypeUsername: '',
          conferenceInfo: ''
        },
        customFields: { // Object. Custom fields must be pre-defined before values can be submitted.
          field1: '', // If a custom field is pre-defined, this value will be stored to the Customer object.
        }
      }
  };

  // Configure Element options
  const customerOptions = {}; // Currently there are no options for the Customer Element
  
  // Mount the Customer Element
  const 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");
</script>

Event Listeners

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
bookingCancellation Appointment object is returned in e.detail when appointment is cancelled using appointment element

var appointmentParams = { 
  appointmentId: '383587', 
  appointmentBM: {}, // This object is used to pass in a payload when making the PUT /book request to complete an appointment
};

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)

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

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

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