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.

Widget Options

You can customize your widgets with localization, colours and the Search button text - see below for details on how to set these options.

Colour customization

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 Searc
HotelSearchWidgethWidget. 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

Attribute Example Description
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.