How to iFrame the Qudini Booking Widget

Qudini offers a standard Online booking interface or can custom build online booking interface designs that can be integrated into your website by one of the following methods.


Before continuing through this article, it is reccomended that you familiarise yourself with the Query Params the Booking Widget supports, including how to link to a specific store or product.


Embedded mode

When deep linking or iframing the booking widget, you can set the page to 'embedded mode' with a query parameter. This hides both the Header/Logo and Footer sections on the page.

Please note: As the default Cookie Policy, Privacy Policy and Terms of Service are shown within the Footer Section, you will need to ensure that the parent page of your iframe provides this to the customer.

Query parameter ?embedded=true

E.g. https://bookings.qudini.com/YMN1ALO4DVL/venues?embedded=true



Embedded language mode

When deep linking or using the booking widget with multiple languages, it is possible to set the page into 'embedded language mode'. This means that the language code parsed in the URL will load the booking widget in that language and remove the language selector.

Where the language code parsed in the URL does not exist on the widget, this will fallback to the default language and display the language selector.

The language code is not case sensitive so es or ES will work.

E.g

https://bookings.qudini.com/YMN1ALO4DVL/venues?lang=es

This works with Embedded mode also

E.g

https://bookings.qudini.com/YMN1ALO4DVL/venues?embedded=true&lang=es


Depending on your Browser locale, the booking widget will also load in the same language if it is available. If not, it will fallback to the default language.


Obtaining Location

When iFraming the Booking Widget onto your website, be sure to add an additional parameter to the iFrame in order to allow Qudini to get location permissions from their page:


allow="geolocation https://bookings.qudini.com;"

 


Booking Window Events

When embedded in an iFrame our booking widget is now able to send custom events to the parent window. Those event are sent via window.postMessage and can be retrieved on your website using window.addEventListener("message", …).


Here is an example on how to capture events sent:


window.addEventListener("message", function (event) {
    if (event.data && event.data.customMessageSender === "Qudini") {
        console.log(`[${new Date()}] BwV2 Event`, event.data);
    }
}, false);


Those events can then be sent to your analytics platform such as Google or Adobe Analytics.


We are currently sending events when a user:

Navigate to another page

{
    customMessageSender: "Qudini",     
    schedulingType: "Appointment",     
    analyticsEvent: "RouteChangeComplete",
    analyticsData: {
        url: "/ZGO4Y1DYGLS/venues/12939/queues?embedded=true"
    }
}


Book an appointment

{
    customMessageSender: "Qudini",     
    schedulingType: "Appointment",     
    analyticsEvent: "Confirmation",
    analyticsData: {
        customerIdentifier: "c5c8b88d80ac441cb826469efe5dd2895"
    }
}


Reschedule an appointment

{
    customMessageSender: "Qudini",     
    schedulingType: "Appointment",     
    analyticsEvent: "RescheduleConfirmation",
    analyticsData: {
        customerIdentifier: "c5c8b88d80ac441cb826469efe5dd2895"
    }
}



Cancel an appointment

{
    customMessageSender: "Qudini",     
    schedulingType: "Appointment",     
    analyticsEvent: "Cancellation",
    analyticsData: {
        customerIdentifier: "c5c8b88d80ac441cb826469efe5dd2895"
    }
}



Custom Domains

If a client requires a custom domain this can be done via a CNAME record pointing to our usual booking page. 

Steps:

  • Client creates a CNAME DNS record on their own domain targeting Qudini's booking page. E.g bookings.mycompany.com → mycompany-bookings.qudini.com 
  • Qudini creates an SSL certificate for the company's domain (bookings.mycompany.com). The company will need to validate this request. See the guide at: https://docs.aws.amazon.com/acm/latest/userguide/gs-acm-validate-email.html
  • Once validated Qudini will add this Certificate to the ALB hosting the clients booking pages.

Please note:

In order for online booking to function, including via deep linking, you will need to configure each of the following settings for each venue included:

- opening hours

- venue address

- products (aka services) within each queue as needed.

Did you find it helpful? Yes No