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.

Step Action
1 Click 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.
2 Insert 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>

 

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

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

 

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