Search Gadget (responsive)

The search gadget is typically the entry point for customers booking product on your website. Although it is not imperative to utilise the search gadget, we recommend including it on your homepage, and general content pages.

Dependencies

At the time of writing, this version of the search 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:  Search gadget
Then you will need a search gadget instantiated.  An example appears below. 
Ensure you change the vcID to the number that we provide.

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

<script type="text/javascript">
$w(function () {
        
        var gadgetOptions = {
                vcID: 999,
                gadgetMode: 'search',
                searchButtonUrl: "https://example.com/stay",
                searchButtonVisible: true,
                tabsList:{
                        "accom":{"name":"accom","label":"Accommodation","url":"https://example.com/stay","active":true},
                        "tours":{"name":"tours","label":"Tours","url":"https://example.com/tours"}
                },
                tabsVisible: true,
                nightsSelectorDefault: 2,
                useAdvancedFilters: 1,
                componentsConfig: {
                        location: {visible:false}
                }
        };
        
        var gadgetInstance = new BE.gadget.hybrid.init("#search-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