The Qudini online booking interface (booking widget) allows you to inject your own code snippets to allow you to have more flexibility over design and functionality. By leveraging this feature, you can take more control of your booking widget to add bespoke fonts, add Google analytics or manipulate elements on each page of the online booking journey.
Custom code modifications to the Qudini booking widget fall outside the scope of our support. This means that we’re unable to help with creating, managing, or troubleshooting any issues that are a result of the code snippets injected into the booking widget.
Additionally, with a code-based solution, we can’t guarantee its functionality or full compatibility with Qudini's booking widget. Custom code can also cause display and functionality issues with future updates to our platform.
Login to the Qudini Admin portal and navigate to Customisations > Online Booking Interface, then click Edit next to the Booking Widget you wish to update and go to the section called Snippet Injection.
There are two input fields respectively allowing to add elements at the top (appended to the Header) or at the bottom (appended to the Body) of the page.
If you are new to DOM manipulation, a good first read is Manipulating documents by MDN it will help you understand how it all works and show you how to target specific elements on the page.
Customising your fonts
After that we need to add a style tag to apply the font to the desired element, this example will apply the font to the entire body.
Here is an example with https://cookieconsent.popupsmart.com. For your implementation, you will need to change the script-src alongside the if the condition as it should be based on the function that needs to be called to trigger the banner, this differs based on your provider.
Adding Google Analytics tracking
It’s as simple as copy/paste the following in the Insert at the top of the page input field
You can then apply your API key by replacing 'UA-XXXXX-Y'