Below are instructions to insert a multi tour categories vertical 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.
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_vertical_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.
|1||Click hereto download zip file containing toursmulti_launch_pad_vertical_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 vertical 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_vertical_iframe.htm" width="260px" height="120px" 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_vertical_iframe.htm to replace value “tikitours” with your operator ID|
|5||Edit line 56 of file toursmulti_launch_pad_vertical_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.
|7||Insert iframe code in body of your file 2.
Example iframe code below (min width 450px, recommended with 600-650px)
|8||Edit line 16 of file quickbook-toursmulti.js to replace value ‘http://abctours.com/SeekomMessageAgent.html’ with your URL|