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: 

<script type="text/javascript" src="//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"></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 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="//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 accountID 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>

 

Adding the BookingSheet widget

in the head of your document add: 

<script type="text/javascript" src="//bookingwizard.net/js/Calendar.js"></script>

 

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 head of your document add: 

<script type="text/javascript" src="//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 accountID 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>