» Extensions
 |
|
Widget 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.
Examples of widget code / Javascript Objects below are:
Adding a Calendar widget
in the head of your document add:
<script type="text/javascript" src="http://www.bookingwizard.net/js/Calendar.js"></script>
In the main body, set up the position of the Calendar widget by using a Div with an ID, eg
<div id=cal style="position:absolute; left: 183px; top:258px;"></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 {acccountID} 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 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>
<!--
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:
<script type="text/javascript" src="http://www.bookingwizard.net/js/Calendar.js"></script>
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 {properyCode} with your code. Replace {acccountID} with your account ID
<script type="text/javascript">
<!--
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>
<!--
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 Administration widget
in the head of your document add:
<script type="text/javascript" src="http://www.bookingwizard.net/js/Admin.js"></script>
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 {acccountID} with your account ID.
<script type="text/javascript">
<!--
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>
<!--
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>