Gadget Collection

The gadget has many options to make it do different things, the details of which are contained in the room type gadget documentation.

Below are some samples of different gadgets that you may like to use. Each of these can be customized using the ‘room type gadget documentation’ above.

Notes about all the Gadgets

You may notice a couple of things about the examples shown on this page:

All the cross-site urls start with ‘//’. This is a protocol-relative link, so if your page is secure (SSL), the call to the gadgets will be over SSL.
All the file extensions end in ‘z’ – this is deliberate, and not a typo. These are pre-gzipped files to help ensure that the download is both as small as possible, and delivered to your customers as quickly as possible.
You might note that the syntax looks a lot like jQuery – we thought this should help ease implementation. NOTE: whilst the code looks like jQuery, it is NOT. If your page also uses jQuery, MooTools, Prototype or some other library that uses the $ shortcut, you will need to substitute “$w” for “$” in all calls shown in these examples. This was done to minimise the potential conflict with other libraries.

Common to all Gadgets

In addition to their specifics, all the gadgets listed below require this stylesheet:

<link rel="stylesheet" href="//gadgets.securetravelpayments.com/_shared/css/all.cssz" type="text/css" />

in the <head> section of your page.

You may also need to add the following code to the <head> section of your page prevent text from being cut off on certain sections of the gadget:

<style>body div.roomTypesGadget div.displayGrid table tbody td.planName div.wrapper b { height:auto !important; min-height:38px; }></style>

Room Types Gadget – Examples

This gadget displays the room types for one property. To use it you need to insert a few lines into your pages. See the below sample html file which contains all of the elements.

Show Booking Grid Only.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<!-- place this in the head of your web page -->
<link rel="stylesheet" href="//gadgets.securetravelpayments.com/_shared/css/all.cssz" type="text/css" />
</head>
<body>
<!-- place this div in the appropriate place on your web page if you want to show the booking rates grid-->
<div id="bookGrid">&nbsp;</div>
<!-- place this script area at the bottom of your web page -->
<script src="//gadgets.securetravelpayments.com/_shared/base.jsz" type="text/javascript"></script>
<script src="//gadgets.securetravelpayments.com/room-types/room-types.jsz" type="text/javascript"></script>
<script type="text/javascript">
$w('#bookGrid').roomTypesGadget({
hotelID: 34604 
, autoTickedNights: false
, defaultCurrency: 'AUD'
, defaultGridColumns: 14
, gridLabel: 'Room'
, layout: 'horz'
, showRoomImages: false
});
</script>   
</body>
</html>

Two step booking process, Search and then show the rates grid.

Some websites want to implement a “Search Gadget” on every page to allow them to present the booking search options on every page, and then have the visitor click a check now button to be sent to the booking grid. Use this code to create a Search Only Gadget.

See the inSiteCheck: javascript option below? You will need to implement the actual booking grid on a separate page and then set theinSiteCheck: value to that url.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<!-- place this in the head of your web page -->
<link rel="stylesheet" href="//gadgets.securetravelpayments.com/_shared/css/all.cssz" type="text/css" />
</head>
<body>
<!-- place this div in the appropriate place on your web page if you want to show the booking rates grid-->
<div id="bookGrid">&nbsp;</div>
<!-- place this script area at the bottom of your web page -->
<script src="//gadgets.securetravelpayments.com/_shared/base.jsz" type="text/javascript"></script>
<script src="//gadgets.securetravelpayments.com/room-types/room-types.jsz" type="text/javascript"></script>
<script type="text/javascript">
$w('#bookGrid').roomTypesGadget({ 
hotelID: 34604,
showPromotionCode: false,
autoTickedNights: true,
inSiteCheck:      "//www.TheWebSiteYouWantToRedirectTo.com/PageWhichHasTheBookingGrid.html",
layout: 'vert'
});
</script>
<!-- Overrides for the gadget css -->
<Style>
#bookGrid {
width: 12em;
}
#bookGrid .inSiteCheck {
text-align: center;
}
#bookGrid select {
width: 100%;
border-radius: 5px;
padding: 4px;
}
#bookGrid button {
border-radius: 5px;
padding: 4px;
}
</Style>
</body>
</html>

Show All gadget areas

Below is the relevant portions to produce a page which is similar to https://book.resonline.com.au/make-booking?ap=34604

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<!-- place this in the head of your web page -->
<link rel="stylesheet" href="//gadgets.securetravelpayments.com/_shared/css/all.cssz" type="text/css" />
</head>
<body>
<!-- place this div in the appropriate place on your web page if you want to show the booking rates grid-->
<div id="bookGrid">&nbsp;</div>
<!-- place this div in the appropriate place on your web page if you want to show the static property details including the image area, otherwise exclude it from the webpage and it won't show them-->
<div id="bookBody">&nbsp;</div>
<!-- place this div in the appropriate place on your web page if you want to list the room types, otherwise exclude it from the webpage and it won't show them-->
<div id="bookRoomTypes">&nbsp;</div>
<!-- place this script area at the bottom of your web page -->
<script src="//gadgets.securetravelpayments.com/_shared/base.jsz" type="text/javascript"></script>
<script src="//gadgets.securetravelpayments.com/room-types/room-types.jsz" type="text/javascript"></script>
<script type="text/javascript">
$w('#bookGrid').roomTypesGadget({
hotelID: 34604 
, showPropertyDetails: {
header: '#bookHeader',
body: '#bookBody'
}
, showRoomTypeDetails: '#bookRoomTypes'
, autoTickedNights: false
, defaultCurrency: 'AUD'
, defaultGridColumns: 14
, gridLabel: 'Room'
, layout: 'horz'
, showRoomImages: false
});
</script>   
</body>
</html>

Multi Gadget – Show More than one property in one Gadget

Some property managers require one gadget to do a search summary on each of their properties, and then be able to expand on the property to see the rooms. The code below is how you would do this.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<!-- place this in the head of your web page -->
<link rel="stylesheet" href="//gadgets.securetravelpayments.com/_shared/css/all.cssz" type="text/css" />
</head>
<body>
<!-- place this div in the appropriate place on your web page if you want to show the booking rates grid-->
<div id="bookGrid">&nbsp;</div>
<!-- place this script area at the bottom of your web page -->
<script src="//gadgets.securetravelpayments.com/_shared/base.jsz" type="text/javascript"></script>
<script src="//gadgets.securetravelpayments.com/room-types/room-types.jsz" type="text/javascript"></script>
<script type="text/javascript">
$w('#bookGrid').roomTypesGadget(
{
hotelID: {
'Property Name 1' : 12345,
'Property Name 2' : 123456, 
'Property Name 3' : 1234567
}, 
/* optional -
   -- if you want to have a different marketing page built for each property when they click show more details, then specify those pages here 
multiPropsInfoLink: {
12345 : 'http://yourdomain.com/hotel_listing/bridgewater-retreat/',
123456 : 'http://yourdomain.com/hotel_listing/bridgewater-retreat-with-spa/',
1234567 : 'http://yourdomain.com/hotel_listing/bridgewater-retreat-ocean-view/'
},
*/
multiPropsOneGrid:true, 
defaultGridColumns: 10, 
colourScheme: { primary:'#176D7A',secondary:'#176D7A'}, 
defaultNights:3
}
);
</script>   
</body>
</html>