Integrate Online Booking into a website
The Online Booking system can be integrated into existing websites.
Please note: As of March 2022, using iFrame on a website to host the online booking functionality no longer works for patients wishing to make online deposits for their appointments.
User clicks a link placed on an existing website, and is redirected to the online booking site .
1. Place a link on the custom website, using the URL provided.
< a href= "{{URL}}&mode=externalLink" target= "_blank" >Book Now< a />
2. Ensure both of these are added to the URL (as shown above)
a. &mode=externalLink
b. target="_blank"
Dynamic iFrame
DO NOT load the iFrame directly from the on load of the custom website.
Failure to follow these instructions will result in severe reporting inaccuracies.
User clicks a button or link, and Online Booking appears on the custom website via an iframe.
1. Place a link on the custom website.
2. Using the click event, create a NEW iFrame.
3. Set the src attribute of the iFrame to the URL provided.
4. Add dynamically to the custom website.
$( "#bookNow" ).click(showOnlineBooking);
var showOnlineBooking = function () {
...
var iframe = document .createElement( "iframe" );
iframe.src = olbUrl;
$( "#olb" ).append(iframe);
};
5. Ensure the mode parameter is added to the URL
a. &mode=dynamicIframe (that's a capital letter "I" in "Iframe")
6. Suggested widths and heights:
a. Mobile: max-width: 480px; height: {{any value to fit design}}
b. Desktop: min-width: 600px; height: {{any value to fit design}}
Demo
Use the URL provided by the support team for your practice.
The URLs used in these examples are invalid for production use.
View it in Action
A rudimentary example of External link and Dynamic iFrame: https://jsfiddle.net/r9dt8kpe/
You have two ways to integrate Online Booking into your website.
-
Direct Link (Example, “CLICK HERE to go to our online Booking” (with image/etc))
-
iFrame (Displays the OLB Website within the practices Branded Website)
Getting Online Booking Link |
Speak to the support team to get your unique online booking URL.
Link & iFrame Integration |
Below are two examples of a website. You should not need to discuss this in too greater detail as this is for the practices web design team to do.
The below example is a direct link. It has a Click Here link.
In this area the practice could provide a paragraph of information to the patient before they click into the link which navigates AWAY from the page.

The below example is intergrated with an ‘iframe’ note how the Online Booking page is part of the practices website.

Attachment to pass on to Web Design which guides them on the above solutions and how set them up.
Comments
0 comments
Please sign in to leave a comment.