What is an IFrame (Inline Frame)?

An IFrame is short for Inline Frame. The IFrame HTML element is often used to insert content from another source, such as CultBooking Engine, into your Web page. For more information, you can see: https://whatis.techtarget.com/definition/IFrame-Inline-Frame 

Another short definition, along with examples you will find here at w3schools: 

‘ The <iframe> the tag specifies an inline frame.

An inline frame is used to embed another document within the current HTML document.

Tip: Use CSS to style the <iframe> (see example below). 

Tip: It is a good practice to always include a title attribute for the <iframe>. This is used by screen readers to read out what the content of the <iframe> is. ‘

Here is an explainer video about what is an IFrame and how to use it:

Browser support for iframe:

It seems that the IFrame is supported by all modern browsers as the below screenshot indicates: Mozilla Firefox, Explorer Edge, Chrome, Safari, and Opera. 

Attributes and CSS styling 

Apart from inserting basic iframe HTML5 code, the developer may insert many attributes and CSS styling into the hotel Webpage. Beware: as a higher number of attributes are inserted, the error possibilities increase, so you need to check and make sure CultBooking is not affected. Always do a test booking and ensure the booking engine works perfectly. CultBooking is a very complex tool with many functions and content-rich that updates itself automatically on regular basis. 

Here are some basic attributes:

Here are more advanced attributes and CSS styling for advanced specifications, formating, and rendering:

Global Attributes

The <iframe> the tag also supports the Global Attributes in HTML.

Event Attributes

The <iframe> the tag also supports the Event Attributes in HTML.

How to integrate CultBookng IFrame into your website? 

You need to insert the following HTML code Syntax:

1. The main advantage of the above iframe code is that the page is not too long and ‘Book now’ is visible.

There is a high adjustment to 740. Here is the end result and how nice the ‘Book now’, pop-up bar appear to the bottom of the page, given the height adjustment. The booking engine is ideally embedded into the Web-page. 

http://hotel-neuwirt.de/index.html

Here is another way of doing it without height adjustment. The  ‘Book nowÄ button is not fully visible and you need to scroll to the bottom of the page to be able to proceed to the next step of the booking process. This is not so obvious:

IBE – Booking Engine

2. Width – theme adjustments

By just inserting the iframe code is not enough, the developer has to adjust the theme settings to be able to display the booking engine on the full width. 

Per default, the theme wrapper has a predetermined width that needs to be adjusted. Developer shall take the iframe out of the wrapper div or make changes to the wrapper class, whatever fits best. 

So the iframe code needs to be inserted into the right place of the HTML page.

Or if the other style parts of the website are not affected, please check this, you may insert the wrapper class width to 100%. Just making this change can cause issues with your style of the site. You may notice the header of the site changes when the fixed width is removed from the wrapper. Is better to take iframe code out of the wrapper div. 

3. Beware of website errors

Sometimes, your website may have some errors that enter in direct conflict with the iFrame and CultBooking technology. So you need to check carefully that all is working smoothly and at 100%. The suggestion is to always make a test booking and see the performance.

Here is an error that was breaking the iframe code and not allowing guests to make bookings. The guest was able to select a room but the price was 0 and no booking was able to be processed and confirmed. 

4. Check the mobile version

Check the mobile version and make sure the website iframe is fully scrollable and works well on all devices. You may test it on your own mobile or via the responsive function of your browsers. Here is an example of Safari responsive mode:

You may even want to ask the developer to remove one of the scroll bars for better design and improved functionality. 

Conclusion 

Iframe integration is the most classic integration done into a hotel website. Why developers choose this?

• It is fast.  It will take around 30 minutes, maximum 1 hour, to insert the code, adjust the CSS styles and also test the functionality of the iframe implementation. 
• It is easy to do, there is no advanced code inserted and no specific designed HTML code to fit the website. 
• Very basic. Is the most classical approach to 3rd party integrations, but this does not mean is the best. Is very old and is hard, even impossible to find an easy and fast alternative. It may cause some errors and for complex tools, is not 100% recommended. There are more advanced integration possibilities, as for example pop-up overlay or even DNS redirect to own hotel domain. 

CultBooking has prepared a basic user manual for developers and website owners to start with the integration of CultBooking into their own website, be it WordPress or other systems. There is a high demand for this integration type, but CultBooking does not recommend it as the best option. Would be better to do a pop-up overlay or DNS redirect. 

The IFrame is very delicate and may cause errors, that is why is not highly recommended and the below alternatives would be a better fit for your website. Moreover, CultBooking puts at your availability our expert developer to make sure you have the best website integration for your booking engine. Because CultBooking wants you to have as many bookings as possible and have all the time 24/7 working technology. 

Here is an example of a pop-up overlay:

https://www.hotelb1.de/en/start-2/

Here is an example of DNS redirect:

https://www.hotel-meyerink.de

Website user will click on ‘Zur Buchung’ and will be redirected to the hotel URL domain, based on previous DNS redirect and server settings(this is more advanced integration but not very complicated): 

https://meyerink-buchung.de

Support and help

For support and help with the integration of the booking engine via your website. Please feel free to contact us: info@cultbooking.com