Booking

Configuring and Installing the Allocate booking widget.

Installation

Add loader to page

To start using the Allocate widgets include the following in your page wrapper just before the closing </html> tag

<script src="https://widgets.allocate.co.uk/v1.js" async="async"></script>

Add widget in page

Add the following code at the place in the page where you want the widget to display

<div
  data-allocate-target="https://example.allocate.co.uk/"
  class="_allocate"
  data-allocate-widget="booking"
></div>

Replace example.allocate.co.uk with the address provided in your sign-up documentation.

If you want to take payments directly on your site, you will need to have a site with a padlock otherwise the payment page will forward to our PCI compliant pages.

Widget Configurable Options

You can customise the widget in numerous ways by adding parameters to the <div /> you added to the page, i.e

<div
  data-allocate-target="https://example.allocate.co.uk/"
  class="_allocate"
  data-allocate-widget="booking"
  data-allocate-limit-zone-id="999"
></div>

Alternatively, some options can be set on the URL for the page the widget appears on, i.e

https://mybooking.com?alDateFrom=2019-01-01&alStayOccs=2,0,0&alStayOccs=2,1,0

attribute name	querystring name	values	description
N/A	alDateFrom	YYYY-MM-DD	Selected start date on load
N/A	alDateTo	YYYY-MM-DD	Selected departure date on load
N/A	alStayOccs	adult,child,infant	Selected occupancy on load (i.e 2,0,0). Can be repeated for each room
data-allocate-palette	palette	#fff:#000:#f00:#0ff	Describe the palette to use.
data-allocate-style-font-family-base	N/A	font name	Font to use in widget, must be loaded on page.
data-allocate-target	target	URL	API endpoint to look at for booking
data-allocate-no-chrome		true	Do not show the title and extraneous chrome around the widget, such as the title
data-allocate-show-first	showFirst	rooms, products	What to show first in booking flow
data-allocate-skip-single-options	skipSingleOptions	none,all,room,product	Skip room / product / all choices where only one option is valid.
data-allocate-limit-zone-id	limitZoneId	comma separated numbers	Limits the booking to certain zone ids
data-allocate-limit-zone-type	limitZoneType	comma separated strings	Limits the booking to certain zone types, i.e (Yurt, Room)
data-allocate-limit-product-id	limitProductId	comma separated numbers	Limits the booking to certain product ids
data-allocate-limit-product-type	limitProductZone	comma separated strings	Limits the booking to certain product types (Golf, Tennis)
data-allocate-show-end-date	showEndDate	true	Show departure date instead of nights dropdown
data-allocate-show-alternate	showAlternate	true	Show the full calendar initially
data-allocate-sticky-alternate	stickyAlternate	true	Show the full calendar always, even after dates are picked.
data-allocate-separate-view	separateView	true	Split rooms and products into separate stages of booking.
data-allocate-availability-preselect	availabilityPreselect	first-available, cheapest	Pre-select a date based on the criteria chosen.
data-allocate-promo-code	N/A	true, string (displayed on button)	Show the promo code box so customers can use hidden offers.
data-allocate-show-limit-name	N/A	true	If booking is limited to a product or room, show that room or product name above the occupancy.
data-allocate-show-limit-description	N/A	true	If booking is limited to a product or room, show that room or product description above the occupancy.
data-allocate-show-unavailable	showUnavailable	true	Indicate unavailable zones, products or properties during a booking.
data-allocate-occupancy	occupancy	2,2,2 (adult, child, infant)	Defines what selections of adults, children and infants are used by default when the widget is loaded.

Manual Instantiation

On initialisation, Allocate will automatically search the whole page and render any widgets that it finds.

It may be useful for you to manually request the widgets to be initialised in certain cases like when the widget is added via a modal window. In such cases you can call a special function that requests Allocate to look through the webpage and render any new widgets that it finds.

<script type="text/javascript">
  window.refreshAllocateWidgets();
</script>