Accommodation Mini Calendar Selector Booking Widget (launch to iframe)

click image to zoom

click image to zoom

.
Below are instructions to insert a single property calendar selector booking widget and launch the booking screen in in an iframe (set to dynamically resize to booking screen height).

Click here to view a working demo.

.

Required Files

Notes

It is assumed all files are contained in same directory. If not, amend URLs to include directory location.

There are further instructions within launch_pad_calendar_iframe.htm to edit the booking widget colours, fonts, labels, etc to match the look of your website.

You can add further conditions to the URL such as an agent code. This is particulary helpful if you operate a number of websites and wish to make use of an agent code to identify which website a booking has come from. Contact Seekom Support if this is of interest to you.

Step Action
1 Click hereto download zip file containing launch_pad_calendar_iframe.htm, SeekomMessageAgent.html, SeekomFrameSizer.js, quickbook.js. Place this file in same directory as your file 1 and file 2.Don’t have  zip software? Click here to visit CoffeeCup Software and download their Free Zip Wizard.
2 Insert iframe code for vertical date selector booking widget in body of your file 1..
Example iframe code below (adjust height & width as required)

 

<iframe
id="bookingPage"
src="launch_pad_calendar_iframe.htm"
width="260px"
height="225px"
frameborder="no"
scrolling="auto"
marginwidth="0"
marginheight="0"
vspace="0"
hspace="0"
style="overflow-y: visible;" >
</iframe>

 

3 Ensure you have been provided with operator ID and property ID before proceeding on to step 4.
4 Edit line 12 of file launch_pad_calendar_iframe.htm to replace value “oliveg” with your operator ID
5 Edit line 15 of file launch_pad_calendar_iframe.htm to replace value “2289” with your property ID
6 Edit line 56 of file launch_pad_calendar_iframe.htm to replace value “http://abchotel.com/file2.htm” with your gotoPage URL
7 Place below script in header of your file 2 (ie. between <head> and </head> tags.
.

<script language="javascript" src="SeekomFrameSizer.js"></script>
8 Insert iframe code in body of your file 2.
.
Example iframe code below (min width 450px, recommended with 600-650px)
 

<iframe onload="SeekomFrame.SetHeight(this)"
width="100%"
height="800px"
frameborder="no"
scrolling="auto"
marginwidth="0"
marginheight="0"
vspace="0"
hspace="0"
style="overflow-y: visible;" >
</iframe>
<script language="JavaScript1.2" src="quickbook.js"></script>

 

9 Edit line 16 of file quickbook.js to replace value ‘http://abchotel.com/SeekomMessageAgent.html’ with your URL