Web Widgets Code / Javascript Objects

Adding any of the widgets to your website is straightforward. Just follow the directions below and copy/paste the code into your normal website HTML document. There is no need for any server side code, such as PHP, asp, etc. This can operate in the most simple of web environments.

Adding a Calendar widget

In the main body, set up the position of the Calendar widget by using a Div with an ID, eg

<div id="cal"></div>

At the bottom of your document, just before the end of the </body> tag, add the following snippet of code, the height of the div element will be set to 420 pixels, the width 630 pixels. Replace properyCode with your code and replace accountID with your account ID.

<script type="text/javascript"><!--var cal = new Calendar(630, 420, "propertyCode", "accountId");cal.layout("classic"); // The layout of the calendar, can be classic, tower, or bannercal.setFrameBorder(0); // Used to show the border of the div, useful for debug positioningcal.setLanguage("fr"); // Set the language of the calendarcal.setTarget("cal"); // Target ID of the div you have in the step above, it must be uniquecal.show(); // Request for action--></script>

Adding a Search/Availability Widget

In the main body, set up the position of the Availability widget by using a Div with an ID, eg

<div id=avail style="border: 1px solid black;"></div>

At the bottom of your document, just before the end of the </body> tag, add the following snippet of code, the height of the div element will be set to 550 pixels, the width 180 pixels. Replace accountID with your account ID

Adding the BookingSheet widget

In the main body, set up the position of the Booking View Sheet widget by using a Div with an ID, eg

<div id=booksheet style="border: 1px solid black;"></div>

At the bottom of your document, just before the end of the </body> tag, add the following snippet of code, the height of the div element will be set to 200 pixels, the width 880 pixels. Replace accountID with your account ID

<script type="text/javascript"><!-- var sheet = new BookingSheet("accountId"); sheet.setFrameBorder(0);// Frame border, useful for position debugging sheet.setHeight('200'); // Set the hight of the frame sheet.setWidth('880'); // Set the width of the frame sheet.setFontSize('70%'); // Set the font-size of the frame sheet.setScroll('no'); // Force scrolling to be off sheet.setTarget("booksheet"); // Target id (unique) of the widget Div sheet.show(); // Request for action--></script>

Adding the Administration widget

In the main body, set up the position of the Administration widget by using a Div with an ID, eg

<div id=admin style="border: 1px solid black;"></div>

At the bottom of your document, just before the end of the </body> tag, add the following snippet of code, the hight and width of the div element will be set appropriately. Replace accountID with your account ID.