Submit a request

Booking Engine Integration Instructions


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


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.

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="" 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">

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="webroomsBookingEngine"></div>

<script type="text/javascript">


  • 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:,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:



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

Use the below tracking code when using Universal Google Analytics. Note that this varies slightly from the default code provided within Analytics, as it allows cross-domain linking and automatic domain name use.

The equivalent autolinker code for GA4/Gtag will also work. Please consult Google's documentation for details.

The correct Tracking ID and type must be set up in the Webrooms Extranet for tracking to work.

(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
ga('create', 'UA-XXXXXXXX-X', 'auto', {'allowLinker':true});
ga('require', 'linker');
ga('linker:autoLink', ['']);
ga('send', 'pageview');

Where UA-XXXXXXXX-X is the Universal Analytics tracker code.

Have more questions? Submit a request


Please sign in to leave a comment.