Hybrid Gadget (responsive)

The hybrid gadget displays a list of operators that are available to book. Customers can filter the results based on the location or category or attributes that they are looking for. Each available operator will display a price, a "Book now" button or similar, content and imagery.

This gadget is a replacement for the older region gadget previously offered. The region gadget will continue to work however for new implementations we recommend the hybrid gadget.

Dependencies

At the time of writing, the hybrid gadget requires jQuery to be running on the webpage where it appears.   This dependency may be removed in future, but no timeframe is available.

Usage

STEP 1:  Required script
For all gadgets, you will need the gadgets javascript included on your page. 
Ensure this script appears before the script in step 2. 
Ensure you change INSERT_KEY_HERE to the key that we provide:

<script type="text/javascript" src="https://gadgets.impartmedia.com/gadgets.jsz?key=INSERT_KEY_HERE" type="text/javascript"></script>

STEP 2:  Hybrid gadget
Then you will need a hybrid gadget instantiated.  An example appears below. 
Ensure you change the vcID to the number that we provide.

<div id="hybrid-gadget"></div>

<script type="text/javascript">
$w(function () {
        
        window.BE_gadgetURLOverrides = { };
        
        var gadgetOptions = {
                vcID: 272,
                theme:["shadow","gadgetbutton","accessible"],
                bdAPIurl: BE.urls.endpoints.webapi() + "api/hybriddetails?",
                itemDetailPageURL: 'https://developer.bookeasy.com/parameters/item-details-v2',
                nightsSelectorDefault: 2,
                useAdvancedFilters: 1,
                componentsConfig: {
                        location: {visible:false}
                }
        };
        
        var gadgetInstance = new BE.gadget.hybrid.init("#hybrid-gadget", "", gadgetOptions);
        
});
</script>

STEP 3:  Cart gadget
It is important that you include the Cart gadget on all pages of your website:

<div id="cartGadget"></div>
 
<script type="text/javascript">
 
$w(function () {
        BE.gadget.cart('#cartNavGadget', {
                vcID: 999,
                autoCollapse: true,
                showBookingTimer: true,
                bookingURL: 'https://www.mywebsite.address/bookings/checkout',
                theme: ['responsive', 'button']
        });
});
 
</script>

 

Working example