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
Event | Description | Syntax | Event Model |
---|---|---|---|
Booking Confirmation | Appointment object is returned when the booking status has been updated to "IN" (Initial), "BK" (Booked), or "RS" (Reserved) | bookingConfirmation | Event Model |
Get Availability | Available times are returned once loaded using the parameters configured for the element | getAvailability | Event Model |
Click Time | Time object is returned when a timeslot has been selected by the user | clickTime | Event Model |
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
Event | Description | Syntax | Event Model |
---|---|---|---|
Get Customer | This event fires when an existing Customer is found | getCustomer | Event Model |
Post Customer | This event fires when a new Customer is created | postCustomer | Event Model |
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);
})
Updated 2 months ago