Single Tour Rate Calendar Booking Widget

.
Below are instructions to insert a single tour rate calendar booking widget and launch the booking screen into an iframe (set to dynamically resize to booking screen height).

Click here to view a working demo.

.

Required Files

Your web page (file 1) in which you will insert rate calendar booking widget as an iframe. Your web page in which you will insert an iframe to hold the booking screen (file 2)
SeekomMessageAgent.html (#) SeekomFrameSizer.js (#)
quickbook-tours.js (#) ratecal_tours/launch_pad_ratecal_iframe.htm (#)
ratecal_tours/styles.css (#) ratecal_tours/ajax-loader-white.gif (#)
ratecal_tours/available.gif (#) ratecal_tours/dashboard.png (#)
ratecal_tours/dashboard-icon.gif (#) ratecal_tours/dashboard-next.gif (#)
ratecal_tours/dashboard-prev.gif (#) ratecal_tours/on_request/gif (#)
ratecal_tours/tooltiparrow.gif (#) ratecal_tours/scripts/calendar.js (#)
ratecal_tours/scripts/LoadSeekomFrame.htm (#) ratecal_tours/scripts/mootool.js (#)
ratecal_tours/scripts/SeekomBuilder.js (#) ratecal_tours/scripts/tooltips.js (#)

.
Notes

Files marked (#) are provided in download link at step 1 below.

It is assumed all files  will be contained in same directory or relative sub directories ‘ratecal_tours’ and ‘ratecal_tours/scripts’ as indictated. If not, amend URLs to include directory location.

There are further instructions within ratecal_tours/launch_pad_ratecal_iframe.htm to edit the booking widget colours, grid and cell widths, 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.

You may edit cell labels in the file  ratecal_tours/scripts/calendar.js if desired.

Step Action
1 Click hereto download zip file containing rate calendar booking widget. Extract to same same directory as your file 1 and file 2. (maintaining directory structure)Don’t have  zip software? Click here to visit CoffeeCup Software and download their Free Zip Wizard.
2 Insert iframe code for rate calendar booking widget in body of your file 1..
Example iframe code below (adjust height & width as required)

 

<iframe
id="calPage"
src="http://www.seekom.com/accommodation/distributions/ratecal/Loader.php?url=http://abctours.com/ratecal_tours/launch_pad_ratecal_iframe.htm"
width="100%"
height="550px"
frameborder="no"
scrolling="no"
allowtransparency="true"
style="padding-left: 100px; background-color: transparent;"
marginwidth="0" marginheight="0" vspace="0" hspace="0"
style="overflow-y: visible;">
</iframe>

Replace abctours.com with your web address (and directory location of ratecal_tours/launch_pad_ratecal_iframe.htm if placed in a different directory).

Make sure the iframe height is sufficient to display No of rooms and rates for the property – allow extra room for specials that may be added.

3 Ensure you have been provided with operator ID and tour ID before proceeding on to step 4.
4 Edit line 27 of file ratecal_tours/launch_pad_ratecal_iframe.htm to replace value “tikitours” with your operator ID
5 Edit line 33 of file ratecal_tours/launch_pad_ratecal_iframe.htm to replace value “5398” with your property ID
6 Edit line 45 of file ratecal_tours/launch_pad_ratecal_iframe.htm to replace value “http://abctours.com/file2.htm” with your TargetURL
7 Set No of days to display in rate calendar widget at line 83 of file ratecal_tours/launch_pad_ratecal_iframe.htm if desired.
8 Adjust column widths in rate calendar widget at line 89 of file ratecal_tours/launch_pad_ratecal_iframe.htm if desired.
9 Adjust width of container div for rate calendar widget at line 108 of file ratecal_tours/launch_pad_ratecal_iframe.htm as required.
10 Edit  ‘tr’ and ‘td’ colours in file ratecal/styles.css to match your website.You may also wish to amend colouring of ratecal_tours/dashboard.png to match.
11 Place below script in header of your file 2 (ie. between <head> and </head> tags.
.
 

<script language="javascript" src="SeekomFrameSizer.js"></script>

 

12 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-tours.js"></script>

 

13 Edit line 16 of file quickbook-tours.js to replace value ‘http://abctours.com/SeekomMessageAgent.html’ with your URL