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 recommended that you familiarise yourself with the Query Params the Booking Widget supports, including how to link to a specific store or product.

Content Security Policy 

All booking widgets have a default CSP (Content Security Policy) which prevents them being iFramed, and also limits which javascript can be invoked on the page. This is to ensure a secure experience. 

If you wish to iFrame, then you need to adjust this setting to add the relevant urls. 

For example, if you want to add the widget to https://mycompany.com then you would configure the CSP to: 

frame-ancestors https://mycompany.com

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:

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"
    }
}

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.