How to track patient's progress through the online booking widget

Modified on Fri, 18 Jul at 9:53 PM

As a patient navigates the booking widget, a number of events are triggered, these can be listened to through the use of JavaScript, allowing you to then take action, such as sending to analytics or redirecting to a specific page.

Events

These are the events that are emitted from the widget, along with the values:

appointment-type-selected

This event is emitted whenever the patient selects an appointment type

The event detail is an object with the following fields:

Field	Type	Description
description	string or undefined	The description of the appointment type that is entered into HearLink
duration	number	The duration of the appointment in minutes
label	string	The appointment type name
price	string or undefined	The price of the appointment type that is entered into HearLink
value	string or undefined	The unique ID for this appointment type

clinic-selected

This event is emitted whenever the patient selects a clinic

The event detail is an object with the following fields:

Field	Type	Description
address	string	The address entered for this clinic
enabledDays	array	A list of day indexes that are enabled for selection
label	string	The appointment type name
value	string or undefined	The unique ID for this clinic

month-changed

This event is emitted whenever the patient changes the month on the date selection page

The event detail is an object with the following fields:

Field	Type	Description
month	string	Month in format MM (01 - 12)
date	Dayjs	A Dayjs object representing the start of the month

date-selected

This event is emitted whenever the patient selects a date for their appointment on the date selection page

The event detail is an object with the following fields:

Field	Type	Description
dateString	string	The selected date for the appointment, format YYYY-MM-DD
date	Dayjs	A Dayjs object representing the selected date

slot-selected

This event is emitted whenever the patient changes the month on the date selection page

The event detail is an object with the following fields:

Field	Type	Description
slot	string	The selected slot for the appointment, format HH:mm

booking-completed

This event is emitted once the booking has been successfully submitted

The event detail is an object with the following fields:

Field	Type
appointmentType	Object duration - number label - string value - string
clinic	Object address - string label - string value - string
date	Object dateString - string date - Dayjs
slot	Object slot - string
fullName	string
phoneNumber	string
emailAddress	string or undefined
dob	string or undefined
referral	string or undefined

Example integration

This is an example of how you could listen to an event from the booking widget:

<html>
  <head>
    <script src="https://storage.googleapis.com/cdn.hearlink.co.uk/index-CfY56Ylb.js"></script>
    <script defer>
      document.addEventListener("DOMContentLoaded", () => {
        customElements.whenDefined("booking-widget").then(() => {
          const widget = document.querySelector("booking-widget");
          widget.addEventListener("appointment-type-selected", (e) => {
            const detail = e.detail;
            // Handle the appointment type selection
          });
        });
      });
    </script>
  </head>
  <booking-widget
    organisationId="xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxx"
    primaryColour="#000000"
  ></booking-widget>
</html>