Hotel Search Widget
When you want to provide location and dates controls for hotel search on your site, our "Hotel Search Widget" gives you everything your user needs to start a search on Skyscanner.net or a White Label. The user can fill in as much or as little information as they like, the "Search hotels" button will send them to the right place!
NB: For best presentation on your landing page, ensure that the widget is in a container with a width of at least 250px, otherwise you may experience styling issues.
You can customize your widgets with localization, colours and the Search button text - see below for details on how to set these options.
You can specify your own colours for different parts of Hotel Search Widget using the following parameters:
colour - Changes background colour of HotelSearchWidget. Transparent is by default
fontColour - Changes font colour of HotelSearchWidget. Autocalculated by default to contrast the background
buttonColour - Changes background colour of the button on SearcHotelSearchWidgethWidget. Blue with gradient is by default
buttonFontColour - Changes font colour of the button on HotelSearchWidget. Autocalculated by default to contrast the background of search button
Each of these parameters accepts a predefined colour name or a hex code you want.
Other Optional Attributes
|buttonLabel||data-button-label="Book now!"||buttonLabel allows you to customise the button text shown in the widget, for example "Book now!".|
|responsive||data-responsive="true"||Makes the widget responsive and allows it to fit onto a single line (if wide enough) - Note:This hides the "Return/One way" radio buttons.|
|enablePlaceholders||data-enable-placeholders="true"||Swaps 'from' and 'to' labels above inputs to placeholders on inputs, which will give a more streamlined look.|