The Semble Online Booking iFrame is designed to be embedded directly into the website of the practice. If this website makes use of a complex analytics setup it's important for events from the iFrame to be shared with the parent. This is why the Semble Online Booking iFrame broadcasts several events that developers can listen to in order to update their chosen analytics tool. This article describes a basic implementation.
You can start with some boilerplate HTML in a basic file called index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Example Semble Integration</title>
</head>
<body>
<!-- page content -->
</body>
</html>
Now let's add a body! Go to your Semble account and get the iFrame link for an online booking configuration:
Now change the body tags to look like this:
<body>
<h1>Semble iFrame</h1>
<iframe src=https://online-booking.semble.io/?token=TOKEN width="100%" height="800" frameborder="0" scrolling="auto"></iframe>
</body>
If you open the file with your preferred browser you should see something like this:
Now let's add some Javascript in the head section of the index.html file:
<script>
window.addEventListener("message",(event) => {
if (event.origin!=="https://online-booking.semble.io") {
return;
} else {
const {data} = event;
if (!data.bookingStatus) return;
switch (data.bookingStatus) {
case 'selecting':
console.log('The widget has loaded but the user has not yet made a selection');
return;
case 'selected':
console.log('The user selected a slot');
console.log(`Duration of selected slot is ${data.bookingDuration}`);
console.log(`Time of selected slot ${data.bookingStart}`);
console.log(`Location of selected slot ${data.location}`);
console.log(`Practitioner of selected slot ${data.practitioner}`);
console.log(`Product name of selected slot ${data.productName}`);
console.log(`Product price name of selected slot ${data.productPrice}`);
//you can send these details to any analytics tool of your choice here
return;
case 'booked':
console.log('The user booked a slot');
console.log(`Duration of booked slot is ${data.bookingDuration}`);
console.log(`Time of booked slot ${data.bookingStart}`);
console.log(`Location of booked slot ${data.location}`);
console.log(`Practitioner of booked slot ${data.practitioner}`);
console.log(`Product name of booked slot ${data.productName}`);
console.log(`Product price name of booked slot ${data.productPrice}`);
//you can send these details to any analytics tool of your choice here
return;
default:
console.log('Unsupported')
}
}
})
</script>
Refresh the file and you should see a log on the console as soo as the page loads. Now select a booking and you will see another series of logs. Finally, make a booking and a further series of logs will appear.
Some considerations.
You will need to know how to manually send events to your analytics platform in order to forward the Semble events.
You can mix our event data with any of your tracking data such as client IDs and lead referral data.
It's easier to work with a Semble online booking configuration that does not redirect the user to a new page but it's not a requirement.