Flight Search Widget

Flight Search Widget is similar to the Search Widget, but it provides a comprehensive control of flight search on your site.

Our "Flight Search Widget" gives you everything your user needs to start flight 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 300px if you don’t use Multi-city mode, or at least 500px for Multi-city mode. 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:

Multi-city mode

Maximum number of flights in the Multi-city mode can be adjusted by setting the "data-multi-city-max-flights-number" attribute. it accepts integer numbers from 0 to 6 ( e.g. data-multi-city-max-flights-number="4" ). If the attribute is not set, the maximum number of flights is 6 by default.

Please note that you can completely turn off the Multi-city mode by setting zero: data-multi-city-max-flights-number="0"
See an example without Multi-city radio-button option:

Passengers

You can control availability and restrictions of Adults and Children passengers inputs.

"data-flights-max-adults-number" sets maximum number of adult passengers (from 0 to 8), e.g.: data-flights-max-adults-number="3"
Zero value ( data-flights-max-adults-number="0" ) completely hides Adults control.

"data-flights-max-children-number" sets maximum number of child passengers (from 0 to 4).
Zero value ( data-flights-max-children-number="0" ) completely hides Children control.

By default, when you chose a number of children, you should indicate ages of each of them.
To turn off a possibility to select ages and make UI cleaner, please set data-flights-children-ages="false"

Colour customization

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

colour - Changes background colour of FlightSearchWidget. Transparent is by default
fontColour - Changes font colour of
FlightSearchWidget. Autocalculated by default to contrast the background
buttonColour - Changes background colour of the button on Se
FlightSearchWidgetarchWidget. Blue with gradient is by default
buttonFontColour - Changes font colour of the button on
FlightSearchWidget. 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
flightsCabinClasses data-flights-cabin-classes="false" If choosing of cabin classes is available (default: true)
directFlights data-direct-flights="true" Shows 'Direct flights only' checkbox (default: false)
directFlightsIsChecked data-direct-flights-is-checked="true" Sets 'Direct flights only' checkbox checked (default: false)
buttonLabel data-button-label="Get a flight!" buttonLabel allows you to customise the button text shown in the widget, for example "Get a flight!".
arrowIcon data-arrow-icon="true" Shows an arrow icon instead of airplane in the Search button