Multi Tour Categories Horizontal Date Selector Booking Widget (launch to iframe)

.
Below are instructions to insert a multi tour categories horizontal date 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 toursmulti_launch_pad_horizontal_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 bookings URL such as region and location filters and an agent code. Contact Seekom Support if this is of interest to you.

StepAction
1Click hereto download zip file containing toursmulti_launch_pad_horizontal_iframe.htm, SeekomMessageAgent.html, SeekomFrameSizer.js, quickbook-toursmulti.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.
2Insert iframe code for horizontal date selector booking widget in body of your file 1..
Example iframe code below (adjust height & width as required)

 

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

 

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

<script language="javascript" src="SeekomFrameSizer.js"></script>
7Insert 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-toursmulti.js"></script>

 

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