Search Widget

When you want to provide location and dates controls for flight search on your site, our "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 Flights" 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.

GEO-IP lookup

The Widget can utilise GEO-IP to infer an Origin (from) or Destination (to) field based on its location, which can help encourage more click throughs.

This can be achieved by adding data-origin-geo-lookup="true" or data-destination-geo-lookup="true" in the code snippet:

Fixed Origin / Destination

If you wish to set a fixed Origin (from) or Destination (to) location in the SearchWidget,
you can do so by adding data-origin-name="Miami" or data-destination-name="Miami" in the code snippet.

This is useful if you are promoting an event or geographical region for example and want to show users the nearest airport to travel to.

This attribute can be used in conjunction with the GEO-IP attribute, or on its own.

And an example destination set:

Colour customization

You can specify your own colours for different parts of Search Widget using the following parameters:

colour - Changes background colour of SearchWidget. Transparent is by default
fontColour - Changes font colour of SearchWidget. Autocalculated by default to contrast the background
buttonColour - Changes background colour of the button on SearchWidget. Blue with gradient is by default
buttonFontColour - Changes font colour of the button on SearchWidget. 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="Get a flight!" 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.