A flexible online booking system and availability calendar for your holiday rental property or agency or your B&B

Adding 'InSite Service' to your own web site

These instructions are applicable only to those clients who already have or will be applying for 'InSite Service'. They do NOT apply to our Premier Plan customers.

You only need a basic knowledge of html in order to carry out this work akthough Bookingcheck will provide a reasonably priced installation service to those who require it. We recommend you 'cut and paste' the code below into your web design software, as it needs to be an exact copy in every detail.

To add the Bookingcheck system so that it appears completely within your own web pages just follow the steps below. When installed and loaded to your server, you should see our demonstration calendar displayed in your web page.

First, you'll need to create two pages on your site

  1. the first page will hold the calendar and the date selector for your first property - that's items 1,2 and 3 below.
  2. the second page will hold the guest details page and display the booking confirmation page which is item 4 below.

You'll need to create a separate 'first page' for each property.

You only need one version of the second page as all booking requests made from the 'first pages' will be taken to this same second page. If you want to see it working in practice, check out our demo site.

1. Display the Calendar

Note: The calendar requires a space on your page that is 900 pixels wide by 350 pixels high.

Create an iframe in your page by using this code at the place where you want the calendar to appear:-

<iframe src="JavaScript:''" title="Availability" id="calendar" name="calendar" width="900" height="350" align="top" scrolling="no" frameborder="0"></iframe>

2. Display the booking date and period selector

Note: The booking date and period selector requires a space, on the same page as item 1, that is 600 pixels wide by 300 pixels high.

Create an iframe in your page by using this code at the place where you want the booking date and period selector to appear:-

<iframe src="JavaScript:''" title="Booking" id="bookdates" name="bookdates" width="600" height="300" align="top" scrolling="no" frameborder="0"></iframe>

3. Add the activation coding

Cut and paste the following code to the bottom of your html code for this page, just before the </body> tag:-

<script type="text/javascript">
<!--These standard settings will produce a live version of our demonstration property into your page -->
<!--Change the values of clientID to your own Bookingcheck account number-->
<!--If you have more than one property on your Bookingcheck system, change the value of the propertyID to the one you wish to display-->
var clientID=10008;
var propertyID=1;

<!--Do not change the lines below here -->
window.frames['calendar'].location = 'https://www.bookingcheck.net/book?page=1&c='+clientID+'&p='+propertyID;
window.frames['bookdates'].location = 'https://www.bookingcheck.net/book?page=2&c='+clientID+'&p='+propertyID;

When you now view your page (after you have uploaded it to your server) you will find that our demonstration calendar is displayed in your web page.

4. Display the booking details panel

Note 1: This will need to be a different page from the page containing item 2 above.
Note 2: The booking details panel requires a space on your page that is 600 pixels wide by 800 pixels high.

The default page name for this page is bookdetails.htm and you need to create a page in your usual style, with this name, in the main directory of your web site (ie it is accessed at www.yourdomainname.com/bookdetails.htm). We are able to change this location and name if you wish; please raise a Support ticket telling us the full page address of the page you wish to use.

Create an iframe within your page by using this code at the place where you want the Booking Details panel to appear:-

<iframe src="JavaScript:''" title="Booking Details" id="bookdetails" name="bookdetails" width="600" height="800" align="top" scrolling="no" frameborder="0"></iframe>

Cut and paste the following code to the bottom of your html code for this page, just before the </body> tag:-

<script type="text/javascript">
function getParam(){var parameters = location.search.substring(1).split("&");var temp = parameters[0].split("=");dy = unescape(temp[1]);temp = parameters[1].split("=");mnth = unescape(temp[1]);temp = parameters[2].split("=");yr = unescape(temp[1]);temp = parameters[3].split("=");nts = unescape(temp[1]);temp = parameters[4].split("=");cd = unescape(temp[1]);temp = parameters[5].split("=");c = unescape(temp[1]);temp = parameters[6].split("=");p = unescape(temp[1]); loc='https://www.bookingcheck.net/book/k/page3.php?day='+dy+'&month='+mnth+'&year='+yr+'&nights='+nts+'&cd='+cd+'&c='+c+'&p_idx='+p+'&Submit=1'; window.frames['bookdetails'].location = loc;}

Converting the demo to your own calendar

When you have received confirmation that your own Bookingcheck ‘InSite Service’ is active, simply change* the setting of
clientID where it appears in the activation code (step 3 above) by replacing the 10008 with your own 5-digit Bookingcheck account number and, if you have more than one property, replace the propertyID with the appropriate property number. Your account number is shown at the top of your Admin Menu page and propertyID numbers are shown on the Summary of Properties option within Properties Options.
It will now be your calendar that shows on your site.

*be sure to retain the ';' (semi-colon) which teminates the line after the clientID and propertyID.

Potential issues

If your site uses a large font you may have to increase the width and/or height figures in the iframe tags.

If a guest makes an error with the booking date (such as trying to make a double booking) an error window appears.
In this circumstance, and depending on the guest’s security settings on their browser, there may be problems with
Internet Explorer not allowing a ‘click to go back’ operation. The guest will have to use their browser's own ‘Back’ button.

Copyright MagentaSteel    Availability Systems from Bookingcheck.

Copyright © MagentaSteel 2008/2017