How to integrate the igumbi online bookingtool (IBE) into a hotel website?
You want to receive online maibookings on the hotel website
You have a hotel website - built with static HTML or with a content management system (CMS) - and want to install the igumbi online booking tool?
If you use a CMS (Typo3, Wordpress, Joomla!, and many others) then it is likely that your goal is to make the entry into booking dialogue available on every page of the hotel website, including the starting page. Therefore the booking tool should be tied 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
- changing 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 is sometimes longer or shorter.
We want to ensure that there are no conflicts with the JavaScript libraries you are using like 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 need to be very small to load fast. This makes the igumbi booking tool well well suited to use in a mobile hotel website.
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 tage at the end of the page just before the </body> tag but before any call to analytics sercices. -->
<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 other languages than German you 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 you have, if you have a designer login for your hotel customers, 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 this 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 productive
If you are satisfied with your changes, please send us a short e-mail to Roland Oth. We will set the changes into production for you.
We would be very happy to hear your feedback.
