Register Free
Home
Demonstrations
Extensions
Register Free
Broker accounts
Contact us
Support/FAQ
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 head of your document add:
In the main body, set up the position of the Calendar widget by using a Div with an ID, eg
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.
<!--
var cal = new Calendar(630, 420, "propertyCode", "accountId");
cal.layout("classic"); // The layout of the calendar, can be classic, tower, or banner
cal.setFrameBorder(0); // Used to show the border of the div, useful for debug positioning
cal.setLanguage("fr"); // Set the language of the calendar
cal.setTarget("cal"); // Target ID of the div you have in the step above, it must be unique
cal.show(); // Request for action
-->
</script>
Adding a Search/Availability Widget
in the head of your document add:
In the main body, set up the position of the Availability widget by using a Div with an ID, eg
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
<!--
var avail = new Availability(180, 550, "accountId"); // The width and height of the widget
avail.setFrameBorder(0); // Frame border, useful for position debugging
avail.setTarget("avail"); // Target id (unique) of the widget Div
avail.show(); // Request for action
-->
</script>
Adding the BookingSheet widget
in the head of your document add:
In the main body, set up the position of the Booking View Sheet widget by using a Div with an ID, eg
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
<!--
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 head of your document add:
In the main body, set up the position of the Administration widget by using a Div with an ID, eg
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.
<!--
var admin = new Admin(900, 600, "accountID"); // Width and height of widget and your account id
admin.setTarget("admin"); // ID of above defined div
admin.setFrameBorder(0); // The frame border size
admin.show(); // Request for action
-->
</script>