The Flight Search Widget is similar to the Simple Flight Search Widget, but it provides a more comprehensive control of flight search on your site. It gives you everything your users need to start flight search on Skyscanner or a White Label.

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.

Associate ID and Tracking

If you have a direct partnership with Skyscanner, you will have to add your associate ID to the HTML snippet to ensure your exits are tracked. To do so, add data-associate-id="ABC_DEF_12345_56789" to the HTML snippet as shown below.

If you do not know your associate ID, you can obtain it from your account manager.

Widgets for White Labels

"I already have a White Label, can I use widgets to send traffic to it?"

Of course! Our widgets have been designed to work with our White Labels from the start and include features such as automatic styling to make your life easier. To use a widget with your White Label, check out the documentation ("whitelabeldomain" parameter).

Widget Options

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

skyscannerWidget

required

data-skyscanner-widget="FlightSearchWidget"

Defines the widget type.

Show details

FlightSearchWidget

associateId

required

data-associate-id="ABC_DEF_12345_56789"

Allows for tracking of widget exits.

You can obtain your associate ID from your account manager or by contacting us.

Affiliate ID string

"WIG_WBT_01426_00001"

locale
data-locale="ru-RU"

Sets widget language.

You can use one of
"bg-BG", "ca-ES", "cs-CZ", "da-DK", "de-DE", "el-GR", "en-GB", "en-GG", "en-US", "es-ES", "es-MX", "fi-FI", "fr-BE", "fr-CH", "fr-FR", "hr-HR", "hu-HU", "id-ID", "it-CH", "it-IT", "ja-JP", "ko-KR", "ms-MY", "nb-NO", "nl-BE", "nl-NL", "pl-PL", "pt-BR", "pt-PT", "ro-RO", "ru-RU", "sk-SK", "sv-SE", "th-TH", "tl-PH", "tr-TR", "uk-UA", "vi-VN", "zh-CN", "zh-HK", "zh-SG", "zh-TW"

(Note: the "locale" value is case-sensitive)

Four letter locale code

"en-GB"

market
data-market="AU"

Sets the target Skyscanner domain.

(Note: this will impact flights shown based on local market restrictions and inventory)

Two letter country code

"GB"

currency
data-currency="USD"

Sets the currency to display upon redirect to Skyscanner search results

Three letter currency code

"GBP"

originName

optional

data-origin-name="'Edinburgh'"

Sets a fixed origin (from) (note: that single quotes inside of the double quotes are required)

Show details

Free text (Location name in single quotes)

destinationName

optional

data-destination-name="'Edinburgh'"

Sets a fixed destination (to).

(Note: that single quotes inside of the double quotes are required)

Show details

Free text (Location name in single quotes)

originIataCode

optional

data-origin-iata-code="'LAX'"

Sets a fixed origin aiport (from)

IATA code

destinationIataCode

optional

data-destination-iata-code="'LAX'"

Sets a fixed destination airport (to)

Show details

IATA code

originGeoLookup

optional

data-origin-geo-lookup="true"

Uses GEO-IP to infer an origin (from)

Show details

true / false

false

destinationGeoLookup

optional

data-destination-geo-lookup="true"

Uses GEO-IP to infer an destination (to)

true / false

false

originCoords

optional

data-origin-coords="55.944339,-3.1952956"

Sets origin nearest to given <longitude>,<latitude>

Comma separated pair of float numbers

destinationCoords

optional

data-destination-coords="55.944339,-3.1952956"

Sets destination nearest to given <longitude>,<latitude>

Show details

Comma separated pair of float numbers

originPhrase

optional

data-origin-phrase="'Take off from Florida'"

Finds an origin name from the given phrase.

For example, it allows finding "Paris" location from the "Let's go to Paris this summer!" phrase.

The attribute is only accessible for English and Russian locales.

Note: Only use it in case you would like to grab a location from an external dynamically changing string.

Free text

destinationPhrase

optional

data-destination-phrase="'Best holiday ideas in Turkey'"

Finds a destination name from the given phrase.

The attribute is only accessible for English and Russian locales.

Show details

Free text

whitelabeldomain

optional

data-whitelabeldomain="whitelabeldemo.skyscanner.net"

Redirects to partner's WhiteLabel page

Show details

WhiteLabel's CNAME

target

optional

data-target="_self"

Opens the Skyscanner search results in the same window (_self) or new window (_blank)

One of "_self", "_blank"

"_blank"

flightType

optional

data-flight-type="return"

Sets default flight type.

One of "return", "one way", "multi-city"

"one way"

multiCityMaxFlightsNumber

optional

data-multi-city-max-flights-number="0"

Sets maximum number of flights (up to 6) in Multi-city mode,
or disables Multi-city mode if it's zero

Show details

Integer number (from 0 to 6)

6

flightsMaxAdultsNumber

optional

data-flights-max-adults-number="2"

Sets maximum number of adults (up to 8),
or disables adults number selection if it's zero or one

Show details

Integer number (from 0 to 8)

8

flightsMaxChildrenNumber

optional

data-flights-max-children-number="0"

Sets maximum number of children (up to 4),
or disables Children selection if it's zero

Show details

Integer number (from 0 to 4)

4

flightsChildrenAges

optional

data-flights-children-ages="false"

Turns off a possibility to select children ages and makes UI cleaner.

Show details

true / false

true

flightsCabinClasses

optional

data-flights-cabin-classes="false"

Disables possibility to choose a cabin class

true / false

true

directFlights

optional

data-direct-flights="true"

Shows "Direct flights only" checkbox

true / false

false

directFlightsIsChecked

optional

data-direct-flights-is-checked="true"

Sets "Direct flights only" checkbox checked

true / false

false

colour

optional

data-colour="solar"

Changes background colour of the widget.

Show details

Preset color name or hex code

transparent

fontColour

optional

data-font-colour="#000"

Changes font colour of the widget.

Show details

Preset color name or hex code

Autocalculated to contrast the background

buttonColour

optional

data-button-colour="dawn"

Changes background colour of the search button.

Show details

Preset color name or hex code

Blue with gradient

buttonFontColour

optional

data-button-font-colour="#fff"

Changes font colour of the search button.

Show details

Preset color name or hex code

Autocalculated to contrast the background of search button

buttonLabel

optional

data-button-label="Book now!"

Allows you to customise the button text shown in the widget.

Free text

"Search Flights"

buttonTextSize

optional

data-button-text-size="1.4"

Sets scale of text on the search button comparing to its default size.

Float number

1.4

arrowIcon

optional

data-arrow-icon="true"

Shows arrow icon instead of plane icon in the search button

true / false

false

poweredByLogoColour

optional

data-powered-by-logo-colour="light"

Changes colour of the Skyscanner logo.

Show details

One of "default", "light", "dark"

"default"

poweredBySize

optional

data-powered-by-size="1.5"

Sets size (scale factor) of the "Powered by" text and Skyscanner logo comparing to default size.

Show details

Float number

1

widgetPadding

optional

data-widget-padding="10px 12px"

Sets padding margins of the whole widget.

Show details

A number in pixels or a value of CSS "padding" rule

0

widgetBorderRadius

optional

data-widget-border-radius="4"

Sets border rounding radius of the whole widget

Show details

A number in pixels or a value of CSS "border-radius" rule

0

widgetScale

optional

data-widget-scale="1.3"

Scales the whole widget.
The value sets, how many times the widget must be as big as original size.

Float number

1

flightOutboundDate

optional

data-flight-outbound-date="2019-03-22"

Presets outbound flight date.

Date in the "YYYY-MM-DD" format

flightInboundDate

optional

data-flight-inbound-date="2019-03-25"

Presets inbound flight date

Date in the "YYYY-MM-DD" format

params

optional

data-params="colour:glen;location:Edinburgh;locationId:EDI"

Semicolon separated list of extra widget parameters

Any (URL encoded if it has special symbols)

Widget Builder

Here you can play around with parameters of widgets and construct Flight Search Widget of your preference using the side panel on the left. There are many of them, make sure you find the right one for you!

By using Skyscanner's Widgets you agree to our Terms and Conditions.