Integrate the igumbi hotel booking tool (IBE) into a Hotel Website

 

How to integrate the igumbi online bookingtool (IBE) into a hotel website?

Einstieg in das igumbi Online Hotel Buchungstool / online Buchungssystem, IBE, Hotelreservierungssystem

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.

horizontales Anfragefenster im igumbi Online Buchungstool für Websites mit wenig horizontalem Platz. Für provisionsfreie Direktbuchungen von ihrer Hotel Website.

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.

"Designer edit": Zugang für den Webdesigner um das CSS für das online Buchungstool anzupassen #online #buchungssystem #hotel #website #agentur #designer

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.

Author: , igumbi.com. You can find me on twitter: @smtm, and as roland.oth On Facebook.
Try now without obligations

Testen Sie die igumbi Hotelsoftware für 30 Tage.
Eine Kreditkarte ist nicht erforderlich.