The Booking Gadget

MVC Enhancement

As with other gadgets, this gadget requires the vcID to function.

Note: it will refuse to start up if the page protocol is not https (SSL). Additionally, you should not include the Cart Gadget on the same page as the Booking Gadget; the Booking Gadget has the cart built in. If you include the Cart Gadget on the same page as the Booking Gadget then undesired behaviour may occur.

WARNING! If you do edit the gadget code on this page, do NOT change demoMode to false. If you try and put a booking through it will work and you will be charged.

The code that started the gadget on this page is below:

<script src="//" type="text/javascript"></script>
<script type="text/javascript">
$w(function() {'#book-example',{

Booking Gadget Defaults

If not supplied, these are the default values for the Booking Gadget:

automaticCart           true
bookedBy                null
campaignID              null
confirmationURL        '/product/confirmation.html'
demoMode                false
itineraryCSS            null
overlaySettings         {}
showPromoCode           false
eventTrackingIsRequired false
showEmptyCartButton     true

All possible parameters are described below. Click the title to see more information.


If set to false, you need to manually start a Cart Gadget before the Booking Gadget, in the element of your choice.


To obtain greater clarity on where bookings are generating from, you can apply this parameter to be different to the default 'online'. This is particularly beneficial for instances of 'Sister Gadgets' where the Tourism Centre has the booking engine powering more than one website.

The bookedBy parameter can also record the type of device used in the booking process. To achieve this we recommend that a compatible server side or client side device detection library be employed.

A server side library such as MobileDetect ( uses the 'User-Agent' string and other HTTP headers to determine the type of device. The library should be regularly updated to ensure the detection rules can match modern devices as they come to market.

There are also a number of different client side approaches to device detection which involve jQuery or Modernizr (see These can be used to set the value of the bookedBy parameter as follows

if (is_mobile) {
    BE.bookedBy = BE.bookedBy + ' Mobile';

There is no silver bullet which will give 100% reliable results when it comes to device detection, however the approaches listed above will work for the majority of cases.



If set to true, an "Empty Cart" button will appear on the booking gadget. Selecting this will allow a user to empty ALL product items in their shopping cart.


This will put the gadget into campaign mode, and will only show operators that are part of the supplied campaign ID. In campaign mode, the sort order tool is hidden, as the sort order is defined at the campaign level. Should the campaign have used the levels functionality, then the gadget will add classes you can use to style the various levels.

The syntax for converting your level names to classes is: set to lowercase, replace spaces with hyphens and remove any numbers at the start of the name. So for example, 'First Class' would become 'first-class'.

Note: your style declarations will need to use !important if you don't set rules any more specific than the ones already in use by the gadget.


Set to a page where you are hosting the Confirmation Gadget, so you can track booking goals and other analytic funnels and paths. If set to null, you don't need to use a Confirmation Gadget, the Booking Gadget will disappear on completion and show the link to the itinerary PDF.


This parameter prevents bookings from being made within the gadget. Please note, if you wish to make a test booking, demoMode will need to be set to false. Your client will also need to provide a test operator and live credit card details.



If set to true, this will make the "Are you attending an event?" question mandatory for guests to answer upon checkout. Please note this question only appears on the gadget if the Booking Centre has enabled the "Event Tracking" Bookeasy addon.



Provides an option to specify a custom URL for customers to be directed to, in the event their booking's payment fails. e.g. failedBookingRedirectURL: ""



Supply a valid URL to a CSS file to style the itinerary PDF supplied on successful booking. A sample HTML file for the itinerary should prove useful to help with styling.




This is an object of the same format as the overlaySettings from the Cart Gadget, and passes to the automaticCart if you use that option.




When set to true, displays a promotional code input field on the embedded cart gadget. This field must be configured correctly in Bookeasy to work with the gadgets.