home > support > solution library > booking engine > linking to the booking engine > iframe

Loading the Booking Engine in an Iframe


Iframed booking page

The concept with the Iframe method is that you can place the first screen of the booking process directly on your own website. This provides you a much neater integration with your existing website than using a hardcoded link.

It also enables you to place an availability calendar onto your own website that is totally 100% live.

The first screen can contain:

  • Availability calendar
  • Date selection
  • Table of forthcoming departures
    (either a list or by month)
  • People quantity selection dropdown

Sample HTML

<iframe src="{BookingLink}&if=1&ifwidth=700" 
style="height:670px;width:720px;margin:0;border:0;">
Alternative text for browsers that do not understand IFrames. 
</iframe>
  • Replace {BookingLink} with the booking link (URL) for a Tour, obtained as explained in the booking engine linking overview.
  • Add &if=1&ifwidth=700 as parameters to the tour booking URL. The width setting lets you choose the width of the content inside the Iframe. We suggest you make this 20 less than the width of the IFRAME itself (then the horizontal scroll bar will not show)
  • You can have the Iframe any height you like, if you are Iframing the whole booking process you will need a very tall Iframe if you want to avoid scrolling.
  • A sensible minimum width for the Iframe would be 720px, you can go narrower but please do test

If you are using our CMS templates you can use the following code:

<iframe src="<$TourCMStour output="t_book_url"$>&if=1&ifwidth=700"  
style="height:670px;width:720px;margin:0;border:0;"> 
Alternative text for browsers that do not understand IFrames.  
</iframe>

Keeping the entire booking process inside the Iframe

Normally the booking engine will break out of the Iframe after the first step. Some TourCMS users prefer to mask the TourCMS domain totally by keeping the booking engine inside an Iframe throughout the entire process.

To keep the entire booking engine inside an Iframe just head to Channel Manager > Design look & feel then towards the bottom of the page set IFRAME same window to "Same window - Stay in IFRAME all the way through booking process ".

Important note regarding SSL

The TourCMS booking engine is hosted on our secure servers and your customers session is encrypted using SSL. Your customer will see the padlock icon in their browser at all stages of the booking process and can feel safe in their purchases.

However, if you Iframe the entire booking process your customer will not see the padlock in their browser when they are entering their personal details and will not see that their session is encrypted - unless you have an SSL certificate installed on your website and ensure that your Iframe page is called via https.

You can install your own SSL certificate however you may find it easier to only Iframe the first step of the booking process.

More information