Integrating PPS Online Booking into a Website

Please Note: If you are not experienced with web design/development and do not intend to employ the services of a professional web development service we do offer a pre-made Holding Page which can be linked to your existing website for no extra charge. See an example of our holding page here: Holding Page

You can locate your own pre-made Holding Page by navigating to the clinic section of your Online Booking admin module. The holding page url will be "" followed by whatever is entered under Short Link

This guide is intended for use by web developers

In order to integrate Online Booking into a website two elements must be included, the first is two script tags and the second is the Online Booking div tag.

Below is an example of the script tags to be included.

The first <SCRIPT> tag contains the various configuration options available – the only required setting here is the container – this must match the ID of the DIV container included in the <BODY>.

The source file utilised in the second <SCRIPT> tag is the token file for this particular domain – this contains the full settings for the system, etc. Without the correct token file, the system will not load. You will need to replace it with the token file for the site in which you are integrating the Online Booking app.

The token file can be found within the Online Booking Admin Module within PPS, for more information on the Online Booking Admin Module please see the guide: Using the PPS Online Booking Admin Module

Below is an example of the Online Booking div with an ID to match the container defined in the first script tag.

Setting Custom Configurations

It is possible to configure many elements of the online booking system by creating a user configuration object

Here's what an example of a user configuration object might look like:

The explanation of these settings, as well as any other ones, is given further down in the document.

The object name being created here MUST be 'OB_conf' in order to be recognised by the system.

The user can specify their settings in a Javascript object with the name of "OB_conf", and these will normally be added to the settings the token had stored. If there is an overlap, however (i.e. setting with the same name present both in the token and the user OB_conf object), the token's setting will overwrite the user-specified setting. This is done so that the user cannot overwrite and system-critical settings.

The following settings are set via the Online Booking Admin Module, but can be overridden via the configuration object:

Setting Name What it Does Boolean
details_first Customer Details screen comes first. Boolean
appt_first Appointment details screen comes first. Boolean
allow_login Is the login functionality enabled on this system? Boolean
payment Do appointments need to be paid for? Boolean
date_range Number of days from current date up to which appointments are displayed. Integer
slots_daily Total number of slots to return for each day (maximum is 999). Integer
defer_hours Amount of hours between current time and start time of the first slot being retrieved. Integer
any_location Whether selecting a location is mandatory for the user, or an "Any location" option will be present in the selection and selected by default. Boolean
any_practitioner Whether selecting a practitioner is mandatory for the user, or an "Any practitioner" option will be present in the selection and selected by default. Boolean
allow_practitioner_selection Display of "Practitioners" tab on Appointment screen. In the absence of this setting, will be considered true. Boolean
allow_location_selection Display of "Locations" tab on Appointment screen. In the absence of this setting, will be considered true. Boolean
allow_conflicts Set to true this will book the appointment regardless of it conflicting with another appointment in terms of practitioner, room, equipment or client Boolean
paypal_sandbox Determines whether the PayPal payments are performed in the sandbox rather than live. Used mainly in testing. Boolean
paypal_merchantid The merchant ID number provided by PayPal. String
weekdays List of weekdays to include in slot search. Array
mandatory_fields List of fields mandatory for the user to fill in on the Client Details screen. Array
time_slots Periods the day is divided by -- will be visible to end user for selection. Object

The following settings can be specified via the configuration object only:

Setting Name What is Does Object
custom_css Link to custom CSS file to be included after the main style. String
analytics Name of client's Google Analytics object String
onStart Callback function executed immediately after the app has been initiated Function
onComplete Callback function executed on completion of booking Function

Preconfigured Slot Criteria

It is possible to bypass the Location/Appttype/Practitioner selection stage and go straight to the calendar to see a list of retrieved appointments.
This can be done by specifying certain parameters in the preconfigured_slot_criteria Javascript object, like in the following example:

The table below shows the setting name for each that can be preconfigured along with a description of the setting.

Setting What is should specify
Location Location as it appears in the main PPS System
Practitioner Practitioner name as it appears in the main PPS System
SlotDesc [mandatory] Appointment type as it appears in main PPS. This is the only setting that must be specified for the request to run successfully.
TimeFrom Time of day to start search from (HH:MM) -- defaults to 00:00
TimeTo Time of day to limit search to, can't be greater than 23:59 -- default 23:59
Duration Duration of each retrieved slot (in minutes). Minimum: 1, defaults to 1.
Consider List of weekdays to include in search (three letter abbreviations, separated with ";", e.g. "MON;TUE;FRI;"). This will override the main "weekdays" setting.
DateFrom Start date, cannot be before today. The format is DD-MM-YYYY. Defaults to today's date.
DateTo End date, cannot be more than 60 days after DateFrom. The format is DD-MM-YYYY. Defaults to the date set by the main date_range setting.
NoSlots Total number of slots to return. Allowed maximum: 999, minimum: 1, defaults to 1. This will override the main "slots_total" setting.
DiffDays Maximum number of slots to retrieve per day. Allowed maximum: 999, defaults to 1. This will override the main "slots_daily" setting.
DeferHrs Hours between first retrieved appointment and current time. Defaults to 0, maximum must be less than number of hours between DateFrom and DateTo. This will override the main "defer_hours" setting.

Note: The actual name of the item being preconfigured must be used here rather than the display name.

Setting Custom Labels

It is possible to customise the vast majority of labels within the Online Booking System.
The full list of customisable labels and their default status is below.

Main Application
app_heading Online Booking
Main Pages
pages_details Your details
pages_appointments Your appointment

("Confirmation" + (App.getSetting('payment') ? " & payment" : ""))

NB: The pages_confirm value here uses an application-level setting to make a decision on the label's value – if the setting 'payment' is true then it will append ' & Payment' to the label text. More information about the available settings will be published.

Appointment Search Tabs
appts_tab_location Clinic
appts_tab_practitioner Practitioner
appts_tab_slotdesc Appointment type
appts_tab_time Time of day
Personal Details Screen
details_heading Please tell us about yourself -- we need these details so that we can identify you on our system.
details_login_subheading Or, if you are an existing client, use your credentials to
details_logged_in Hello there,
details_login_btn Log In
details_login_id E-mail
details_login_pass Reference
details_mand_msg Mandatory fields are marked with <b>*</b>
details_firstname First name
details_surname Last name
details_dob Date of birth
details_email E-mail
details_phone Phone number
details_submit Submit details
details_change Submit changes

["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"]

NB: Square brackets denote an array, there will need to be a value for each month if new values are to be supplied.

Appointments Screen
appts_heading Some details about your appointment.
appts_search_btn Search for appointments
appts_result_subheading Not finding anything suitable?
appts_result_btn Change your search criteria
appts_calendar_placeholder Pick a day in the calendar to see available appointments.

Days containing appointments are shown in <span class='legend-span'>green</span>.

appts_submit Confirm selection
Confirmation Screen
confirm_heading Nearly there.
confirm_heading_pending Your appointment has <b>not</b> been booked yet!
confirm_heading_final Your appointment has been booked!
confirm_heading_ref Your reference number is
confirm_subheading Before finalising your appointment, please read through the details one last time.
confirm_timeout_warning Please note that after you press this button, you will have <b>{reservation_lifetime}</b> minutes to make your payment, or the reservation made in your name will expire.
confirm_subheading_pending A reservation has been made in your name, but we still need to take your payment. The reservation will expire in
confirm_subheading_final Once more, here are the details:
confirm_add_notes Any notes to add? Please write them here:
confirm_submit_payment Pay & book
confirm_startover_btn Start over
confirm_submit_appt Book your appointment
confirm_clientdetails_heading You
confirm_apptdetails_heading Your Appointment
confirm_loading_text Please wait, we're finalising your appointment.
confirm_details_firstname First Name:
confirm_details_surname Last Name:
confirm_details_dob DOB:
confirm_details_phone Phone:
confirm_details_email Email:
confirm_details_appointment Type:
confirm_details_cost Cost:
confirm_details_date Date:
confirm_details_time Time:
confirm_details_practitioner Practitioner:
confirm_details_location Location:

Article ID: 573
Created On: Wed, Jul 22, 2015 at 3:28 PM
Last Updated On: Fri, Sep 16, 2016 at 8:53 AM

Online URL: