Booking Engine Integration Instructions

Need help? Email support@guesttraction.com.
Be sure to let us know which property you are enquiring about.

On this page:

How to add Date Pickers for Webrooms on your website
How to embed the Webrooms Booking Engine, including considerations for Analytics tracking
How to create a full page overlay for the Guest Dashboard
Format of direct link for bookings
Targeting specific room types via the direct link
Triggering the start of a specific room booking via preselected querystring elements
Getting an XML data feed of your property and room information
Embedding the Engagement Panel to personalise the guest experience

You will need:

The Subscription ID ("sid")
A website with JQuery with JQueryUI (for the datepickers)

We strongly recommend:

Inclusion of date pickers on every page of your website, in a prominant position. This makes it as easy as possible for guests to start a booking.
Embedding the booking engine on a page on your website. This creates a more seamless experience for the guest. It also automatically handles Google Analytics session linking for a high detail of ecommerce reporting, dynamic iframe resizing, and responsiveness.
If you have Dash for any reason, add the Engagement Panel to your site

Note that Google Analytics is supported including ECommerce conversions. There are a couple of additional steps you should take to ensure the tracker is set up correctly.

Head Code

Place the following on a single line in the <head></head> section of all relevant pages. Include it after your jQuery includes.

<script src="https://cdn.web-rooms.com/webrooms.js?sid=XXXX" type="text/javascript"></script>

Where XXXX is your Subscription ID.

Date Picker Code

Place the following code in any location where you would like Date Pickers to be generated in the <body></body>. Note that the <a></a> element will be completely removed, and replaced with the interactive jQuery date picker.

Replace the detail of the <a> element to suit your implementation:

Link "title" attribute
The value of the title tag will be used as the label for your date picker. A suggested value is "Check In Date:". If you do not wish to have a label, you may omit the title tag.
Link "href" attribute
The value of the href tag will be used as the target page for your date picker. This is the page on your website where you have included the "Booking Engine Embed Code" as detailed below. E.g. "/bookings.html". If you are not using the Booking Engine Embed Code, you may omit the href tag to open the booking engine externally from the website.
Link text
The link text will be used as the button text for your date picker. A suggested value is "Book Now".

<div class="webrooms-datepicker">
<a title="LABEL GOES HERE" href="TARGET PAGE GOES HERE">BUTTON TEXT GOES HERE</a>
</div>

The date pickers have css classes attached to assist with styling. Inspect the rendered elements for detail.

Booking Engine Embed Code

Place the following code on the page you would like the Booking Engine to be inserted in the <body></body>. The booking system will be created as the new contents of the DIV element with the specified ID.

<div id="embedWebroomsBookingEngine"></div>

Notes:

You may choose to manually trigger the insertBookingEngine via any mechanism after the page has loaded. The above example is for simple/inline with automatic initialisation. For manual initialisation, run insertBookingEngine('idOfElementToUse'); where idOfElementToUse is the ID attribute of the element the booking engine should initialise in.
For best results, ensure you include the above code snippet in a responsive page element, and minimise any left/right padding around that element for touch devices.

Dash as an Overlay

If your property uses Dash (our full guest enagement dashboard), this can be integrated in the website as a full screen overlay.

An element for the overlay to use must be included as per the following example. It has various attribtes which allow you to control what other page element(s) should trigger the overlay.

<div class="webrooms-dash-overlay" data-viewtype="overlay" data-trigger-href="/book.html" data-trigger-selector=".overlaybyclass,#overlaybyid"></div>

Attributes:

class="webrooms-dash-overlay"
Mandatory class identifying the overlay element
data-viewtype="overlay"
Mandatory class identifying the visual type of the overlay
data-trigger-href="/book.html"
Optional attribute for triggering the overlay via an HREF. In this example, the overlay will display if any link on the page with the matching href target is clicked.
data-trigger-selector=".overlaybyclass,#overlaybyid"
Optional element for triggering the overlay via class or ID. In this example, the overlay will display if any element on the page with the class "overlaybyclass" or the id "overlaybyid" is clicked

Trigger element attributes:

data-dashpage="reservation"
Include the data-dashpage attribute to direct the overlay to show a specific page. Valid options are:
"reservation": shows the booking page
"profile": shows the guest profile page
"login": shows the login page
"register": shows the create profile (register) page
If omitted, the default page will be shown. i.e the dashboard (if the guest is logged in) or the home page (if they are not logged in)

Trigger element examples:

<a href="/book.html" data-dashpage="reservation">Book Now</a>

The above link will trigger the overlay in the example, because it's href is "/book.html" which matches the data-trigger-href element. It will show the bookings page, because of the data-dashpage="reservation" attribute.

<button class="overlaybyclass" type="button" data-dashpage="profile">Manage Profile</button>

The above button will trigger the overlay in the example, because it has class="overlaybyclass". It will show the profile page, because of the data-dashpage="profile" attribute.

<button id="overlaybyid" type="button">Dashboard</button>

The above button will trigger the overlay in the example, because it has id="overlaybyid". It will show the default page (dashboard if logged in), because there is no data-dashpage attribute.

Direct Link to Booking Engine

To create a direct link, such as a Book Now button, the address is:

https://secure.web-rooms.co.nz/Home.html?sid=XXXX

Where XXXX is your Subscription ID.

(Does not apply to Dash booking engine)

Targeting specific presets

In some circumstances you may require a booking engine which displays only one room type option. To do this, append the following querystring parameters to any booking engine page URL:

https://secure.web-rooms.co.nz/Home.html?sid=XXXX&rooms=AAAAA,BBBBB

Where XXXX is your Subscription ID, and AAAAA,BBBBB is a comma separated list of Room IDs. Room IDs can be obtained via the XML data feed below.

This format also works with date picker targets, eg:

/bookings.html?rooms=AAAAA,BBBBB

Other querystring parameters available:

adults=X
Where X is the number of adults
children=X
Where X is the number of children
cid=D
Where D is the numeric day of the calendar month for check in
cimy=M-YYYY
Where M-YYYY is the numeric month and year for check in
nights=X
Where X is the number of nights
cur=NZD
Where NZD is the currency code for a preselected currency (overrides the default for the property)
code=PROMO
Where PROMO is a configured promo code to automatically supply

When a single rooms value is provided along with a valid value for nights and number of adults, the booking engine will attempt to, based on availability, start a booking for that room/date combination.

Engagement Panel Installation

The Engagement Panel is a personalised welcome to show identified guest specific information, and encourage them to log in to Dash. You must have Dash to use this feature.

Features:

For non-logged in guests:

Invite them to log in or register, and make a new booking
Provide an easy contact method

For logged in guests:

Greet them by name
Provide a summary of upcoming bookings at your property (pluss associated properties if part of a group)

For all guests:

Show comparison rates of booking direct vs booking via third party channels, to encourage direct bookings (only available if GuestTraction provides your Channel Management, and the rates at thirdparties are higher than your direct rates)

To install, first ensure you have our webrooms.js head code in your site as above.

Then, on all pages where you would like the Engagement Panel to appear, place the following tag:

<div class="webrooms-engagement-panel" data-headfont="Lobster" data-bodyfont="Open Sans:100" data-offset-top="200" data-booking-url="book.html"></div>

Where:

data-headfont is the name of a Google Font you wish to use in the header
data-bodyfont is the name of a Google Font you wish to use for the body
data-offset-top is the pixel distance you wish the panel to display by default
data-booking-url is the relative link to your site's booking page, if applicable

XML Data Feed

Descriptive data may be pulled direct from Webrooms in XML format. This can assist with automation of room type and other information.

https://cdn.web-rooms.com/PropertyDescriptions.asp?sid=XXXX&h=YYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYY

Where XXXX is your Subscription ID, and YYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYY is your authentication hash.

Google Analytics ECommerce Conversion Tracking

The tracking code (G-XXXXXX) must be configured within our Webrooms Extranet. Please contact GuestTraction if you require assistance with this.

Use the standard Google Analytics 4 Tracking code on your website.

Cross domain tracking must be configured in the Google Analytics Admin per the following article: https://support.google.com/analytics/answer/10071811?hl=en

The domains that must be added are:

secure.web-rooms.co.nz (exact match)
web-rooms.com (ends with)

Innovate. Attract. Engage.