Learn how to integrate the igumbi online booking tool into any hotel website using just 2 lines of JavaScript. Includes WordPress and Joomla! plugin options, CSS customization for designer logins, and analytics tracking setup. Perfect for hotel web developers who want a lightweight, non-iframe booking solution.
Receive online bookings directly on your hotel website
You have a hotel website (built with static HTML or a content management system) and want to install the igumbi online booking tool (IBE)?
If you use a CMS (TYPO3, WordPress, Joomla!, and many others), it's likely your goal is to make the booking dialogue available on every page of your hotel website, including the homepage. Therefore, the booking tool should be integrated into the website template.
WordPress & Joomla! Plugins and Modules for the booking system
For WordPress we offer a Plugin where the functions described here are packaged up to suit the need of a WordPress installation.
For Joomla! There is a Package with a module and a plugin for the easy integration into a Joomla! site.
Adjust the Styling
You can adjust the look and feel of the online Booking tool to the Website. So the buttons, the colours and the width of the elements can be adapted to fit the styling of your website.
Typical changes you might want to do:
- Buttons: colours & shape, borders, hover-behaviour, round corners
- Change the fonts
- Change the background colour and font colour
- Adjust the width of the initial dialogue entry
- Adjust the width of the response dialogue area
Designer Login
Changes to the CSS definitions can be entered into a custom CSS field. As a web designer or agency you can get your own login. There you will only have access to the form where you can make changes to overwrite the content of the CSS and to test your changes.
In that designer area there is also the option to choose the horizontal layout for the initial request window.
Technical background
The igumbi online booking tool is a JavaScript Widget. It has everything that is needed to run on the hotel website. The date picker uses jQuery, which is also included in the booking tool. The snippet embeds itself in the DOM of the hotel website. It is not an iframe integration. This has the advantage that the hotel website can also be operated in SSL mode. You do not need to fiddle with the height and width of the response dialogue, especially if the product listings are sometimes longer or shorter.
We want to ensure that there are no conflicts with the JavaScript libraries you may be using, such as jQuery, Prototype, or others. If you notice conflicts we would be very grateful if you inform us, so we can fix it. The generated JavaScript needs to be very small to load fast. This makes the igumbi booking tool well suited for use on mobile hotel websites.
Build a booking funnel in Google Analytics 4
Create a funnel exploration in GA4 by adding these events in order:
ibe_av_form— form renderedibe_listrooms— results shownibe_validate— validation passedibe_finalize— booking submitted
This shows your booking completion rate and identifies drop-off points.
How to integrate?
Embed this HTML Code in your page / website template:
<div id="avform"> </div>
<div id = "free_rooms"> </div>
<!-- the DIVs can be placed in different places in the HTML document/ template. -->
<!--Add this script tag at the end of the page just before the </body> tag but before any call to analytics services. -->
<script src="https://www.igumbi.net/seller/bcb0c0/start.js?test=true"></script>
The sequence of letters
bcb0c0
is the identifier for the hotel. In the context of this page it is the igumbi Demo Hotel behind it . Access to the demo is available here.
?test=true
This ensures that you are working with the CSS test / development version . For setting the system live remove this annex in the URL.
Then it is just:
<script src = "https://www.igumbi.net/seller/bcb0c0/start.js">< / script >
Horizontal Layout with parameters
You can also activate the horizontal mode of starting dialogue in your template by passing a parameter.
<script src = "https://www.igumbi.net/seller/bcb0c0/start.js?layout=wide"></script>
Other languages
To include the online booking tool in languages other than German, use the following URLs. We support English(en), German(de), Greek(gr), Slovenian (sl), Italian(it), Dutch(nl), Italian(it), Russian(ru), Czech(cz) and Japanese (jp)
<script src="https://www.igumbi.net/seller/bcb0c0/en/start.js"></script>
<script src="https://www.igumbi.net/seller/bcb0c0/gr/start.js"></script>
<script src="https://www.igumbi.net/seller/bcb0c0/sl/start.js"></script>
<script src="https://www.igumbi.net/seller/bcb0c0/it/start.js"></script>
<script src="https://www.igumbi.net/seller/bcb0c0/nl/start.js"></script>
<script src="https://www.igumbi.net/seller/bcb0c0/es/start.js"></script>
<script src="https://www.igumbi.net/seller/bcb0c0/ru/start.js"></script>
<script src="https://www.igumbi.net/seller/bcb0c0/cz/start.js"></script>
<script src="https://www.igumbi.net/seller/bcb0c0/jp/start.js"></script>
Customize the styling, change the CSS
To modify the CSS please login. There, if you have a designer login for your hotel customers, you have access to a web form where you can enter your CSS overwrites.
With the Safari, Chrome or Firefox Webinspector / Firebug you can identify the elements whose style you want to overwrite. Enter your CSS declarations in the CSS field of the web form and check whether the desired effect has been reached.
There are two fields in the CSS form. The top field is for your testing and development. Above it you see the definitions that are currently used in production. This way you can work on changing the styling while the tool is in use on the production website.
Keep in mind that the actual igumbi booking system is a live System . If you use the button "finalize booking" , ensure your hotel customers knows about your tests. Use either a period far in advance and enter a comment in the reservations. These test reservations can then be easily identified and cancelled.
Setting your changes to production
If you are satisfied with your changes, please send us a short email to Roland Oth. We will set the changes into production for you.
Get support and share your feedback
We would be very happy to hear your feedback at roland.oth@igumbi.com.
Frequently Asked Questions
Q: Where should I place the booking tool script on my website?
A: Place the script tag at the end of your page, just before the closing </body> tag, but before any calls to analytics services. This ensures the tool loads after your page content while not conflicting with analytics initialization. For tracking setup, see our Analytics & Tracking Integration Guide.
Q: How do I test CSS changes before going live?
A: Use the "test" version (?test=true parameter) in your script URL. Work in the top field of the designer login form for testing. Always mark test bookings with future dates and leave a comment so they can be easily identified and cancelled.
Q: Which browsers work with the igumbi booking tool?
A: The tool works with all modern browsers including Safari, Chrome, Firefox, and Edge. Use the Web Inspector tools in any browser to identify elements you want to style.
Q: Can I use the booking tool on SSL/HTTPS websites?
A: Yes. The igumbi booking tool embeds directly into the DOM (not via iframe), so it works seamlessly with SSL-enabled websites.
Q: Do I need to call analytics services after the booking tool script?
A: Yes. Always load analytics services after the booking tool script to avoid potential conflicts.
Q: What happens after I send my changes for production?
A: Our team will review your CSS changes and deploy them to production. We'll contact you when the changes are live. You can then remove the test parameter from your script URL.
