Need help? Email firstname.lastname@example.org.
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
- Format of direct link for bookings
- Targeting specific room types via the direct link
- 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.
Place the following on a single line in the <head></head> section of all relevant pages. Include it after your jQuery includes.
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".
<a title="LABEL GOES HERE" href="TARGET PAGE GOES HERE">BUTTON TEXT GOES HERE</a>
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.
- You may choose to trigger the insertBookingEngine via any mechanism after the page has loaded. The above example is for simple/inline.
- A touch-friendly, mobile optimised version of Webrooms will automatically be used if less than 600px of container width is available to it. 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.
Direct Link to Booking Engine
To create a direct link, such as a Book Now button, the address is:
Where XXXX is your Subscription ID.
Targeting a specific room type
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:
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:
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.
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>
- 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.
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)