Accommodation Rate Calendar Booking Widget (launch to iframe)

click image to zoom

click image to zoom

Below are instructions to insert a single property rate calendar 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


Step Action
1 Click hereto download zip file containing the required files.Don’t have zip software? Visit CoffeeCup Software and download their Free Zip Wizard.
2 Upload the entire ratecal folder to your website, make a note of where you placed the folder.
3 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"
width="100%" height="550px" frameborder="0"
scrolling="auto" style="padding-left: 100px; background-color: transparent; border:none;"></iframe>


Replace with your web address (and directory location of ratecal/calendar.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.

4 Edit calendar.htm in a editor program.
5 On line 30 replace xxxx with your own operator ID.

// ----- OperatorId REQUIRED: The iBex operator ID
SeekomBuilder.OperatorId = 'xxxx';


6 On line 36 replace 9999 with your own property ID.  

// ----- PropertyId REQUIRED: The iBex property ID. Note that multi-property operators can define this value dynamically enabling
// ----- a single template file to be used for multiple properties. You can do this by passing the property ID as a URL parameter
// ----- value, eg "&prop=1234", which can be retrieved via the "getUrlParam" javascript function when this file is loaded.
// ----- eg SeekomBuilder.PropertyId = getUrlParam('prop');
SeekomBuilder.PropertyId = 9999;


7 Optionally on line 40set the registered user code to filter by. Leave blank otherwise.

// ----- RegUserId: An optional iBex registered user ID used when retrieving the room and rate information to display in the calendar.
// ----- This may be used to restrict the rooms and / or rates displayed in the calendar.
SeekomBuilder.RegUserId = 'regusercode';
8 On line 48 replace the link to your booking screen (set up in the prereq section).

// ----- TargetUrl REQUIRED: The URL to be loaded when the user clicks a calendar cell.
// ----- NOTE If you are loading your own target page which will include the iBex booking page within an iFrame (the container page), then
// ----- your container page must forward all relevant URL parameters when it loads the iBex page.
SeekomBuilder.TargetUrl = '';

On line 53 replace ‘SeekomBookingWindow‘ with ‘_top‘.


9 On line 86set the number of days you want to show in the calendar. Defaults to 7.

// ----- NoOfDays: No of days to display in the calendar.
SeekomBuilder.NoOfDays = 7;


10 On line 89adjust the widths of the columns to fit normally.

// ----- ColWidths: Relative widths used for the calendar table columns.
// ----- NOTE The settings here work with the default CSS settings. Changing fonts, text sizes etc may require that you
// ----- also change values here
SeekomBuilder.ColWidths = {Name: '30%', Guests: '7%', MinStay: '7%', Days: '7%'};

11 Save the changes to ratecal/calendar.htm and upload if required.
12 Optionally, you can alter the colours of the rate calendar by editing the ratecal/styles.css file.