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.
Currently, this feature supports Script and Style HTML tags, meaning you can use JavaScript and CSS to manipulate your booking widget. We will be expanding its functionality in the future.
Please note:
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.
Instructions
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.
Please note: Class names within the Booking Widget page may change, therefore we recommend using Id to target elements. Id's are static and will remain constant, so any snippets will remain uneffected by changes in Class names.
Examples
Customising your fonts
To use a new font you firstly need to import it, to do so we are using JavaScript to do DOM manipulation to create a link element with the href pointing to the source of the desire 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.
<script type="text/javascript" charset="UTF-8">
(function () {
var fontImport = document.createElement("link");
fontImport.setAttribute("href", "https://fonts.googleapis.com/css?family=Lobster");
fontImport.setAttribute("rel", "stylesheet");
fontImport.setAttribute("type", "text/css");
document.head.appendChild(fontImport);
})()
</script>
<style>
body {
font-family: 'Lobster';
}
</style>
Adding a cookie policy banner
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.
<script type="text/javascript"
src="https://cookieconsent.popupsmart.com/src/js/popper.js">
</script>
<script type="text/javascript" charset="UTF-8">
function onLoadPopupSmart() {
if (window.start && !!window.start.init && typeof window.start.init == "function") {
window.start.init({
Palette:"palette1",
Mode:"banner bottom",
Theme:"wire",
Location:"https://www.qudini.com/",
Time:"5"
});
} else {
setTimeout(onLoadPopupSmart, 1000);
}
}
onLoadPopupSmart();
</script>
Adding Google Analytics tracking
It’s as simple as copy/paste the following in the Insert at the top of the page input field
<script type="text/javascript">
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-XXXXX-Y', 'auto'); // 'UA-XXXXX-Y' to be replaced
ga('send', 'pageview');
</script>
(source: Add analytics.js to Your Site | Analytics for Web (analytics.js))
You can then apply your API key by replacing 'UA-XXXXX-Y'