What are widgets?

Widgets are a quick and easy way of providing links to Skyscanner or your White Label for your users.

They can link straight to the front page of our site or your White Label, or send a user into a pre-filled flight search, hotel search or car hiring relevant to your content.

 

How do I use widgets?

Adding a widget to your site takes just two lines of HTML.

The first line defines the type of widget and necessary widget customization parameters. The second loads our script, which takes your widget options and turns it into a full widget in the user's browser.

See the examples below for the different types of widgets available. Under each type of widget you can find a link to a detailed manual of using specific widget's parameters.

Common settings for all widgets can be seen further down this page.
 

Basic Widget

Our "Basic Widget" provides a clean and simple tracked and attributed referral to flight search on the Skyscanner.net page or a White Label. Users will be asked to enter any required details to perform a search on our site.

Sound like the Basic Widget is what you're looking for? Head to the Basic Widget page to out more!


Location Widget

The "Location Widget" gives users a pre-filled destination for flight search on our site, allowing them to perform a search immediately on a White Label and leaves them with less details to select when referred to Skyscanner.net.

This widget is best used alongside content about a specific location, giving users a quick link to search for flights to that destination.

Sound like the Location Widget is what you're looking for? Head to the Location Widget page to out more!


Search Widget

If you want to provide location and dates controls for flight search on your site, just fill in any of given fields and press the "Search Flights" button to start a search on Skyscanner.net or our White Label.

Sound like the Search Widget is what you're looking for? Head to the Search Widget page to out more!


Flight Search Widget

Flight Search Widget is similar to the Search Widget, but it provides a comprehensive control of flight search on your site. It gives you everything your user needs to start flight search on Skyscanner.net or our 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!

Sound like the Flight Search Widget is what you're looking for? Head to the Flight Search Widget page to out more!


Hotel Search Widget

Hotel Search Widget provides a comprehensive control of hotel search on your site. It gives you everything your user needs to start hotel search on Skyscanner.net or a White Label.

Sound like the Hotel Search Widget is what you're looking for? Head to the Hotel Search Widget page to out more!


Car Hire Widget

Car Hire Widget provides all necessary controls of car hiring on your site. It gives you everything your user needs to hire a car on Skyscanner.net or a White Label.

Sound like the Car Search Widget is what you're looking for? Head to the Car Search Widget page to out more!


Multi-Vertical Widget

Multi-Vertical Widget provides controls of all types of mentioned above searches on your site. It contains configurable tabs with Flight Search, Hotel Search and Car Hire widgets inside. Just select a desired tab, fill in any of given fields, press the "Search" button, and the widget will forward you to an appropriate search tab of Skyscanner.net or to a White Label.

Sound like the Multi-Vertical Widget is what you're looking for? Head to the Multi-Vertical Widget page to out more!


Insider Tips Widgets

Our Insider Tips widgets are designed to provide a user with helpful statistical information about fligths.

The Insider Tips are generated from the prices Skyscanner has found for specific flight routes based on users clicking through to booking sites from our search results.

Sound like the Insider Tips Widget is what you're looking for? Head to the Insider Tips page to out more!


There's a common rule of adding parameters to our widgets:

Any setting can be added

  • as an independent HTML data attribute ( e.g. data-widget-specific-setting="CustomValue" )
  • or as one of parameters of the data-params attribute
    ( e.g. data-params="widgetSpecificSetting:CustomValue;otherParam:true" ).

In this example data-widget-specific-setting and widgetSpecificSetting are analogous.

The general rule is:
any HTML data attribute's name is taken without the "data-" prefix, then it is converted from a kebab-case into camelCase, and added to data-params.

Adding your Associate ID to your Widget

To ensure your Widget exits are tracked in your partner dashboard you will have to add your associate ID to the HTML snippet. To do so, add data-associate-id="ABC_DEF_12345_56789" to the HTML snippet as shown below, along with any other attributes you wish to use to enhance your Widget.

<div data-skyscanner-widget="SearchWidget" data-associate-id="YOUR ASSOCIATE ID GOES HERE"></div>
<script src="https://widgets.skyscanner.net/widget-server/js/loader.js" async></script>

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

Localization

Our widgets support all of Skyscanner's common languages - this can be set on your widgets with the "data-locale" attribute.

See below for examples of some localization options we support, and please contact us to check if widgets can be displayed in other languages.

Colour customization

Different types of widgets have different set of attributes for colour customization. So please follow a specific widget's manual for this.

Please note, that all the widgets can accept pre-set named colours that can be used in any colour related attribute:

  • cirrus
  • loch
  • solar
  • malt
  • dawn
  • glen
  • lunar

Other Optional Attributes

Attribute Example Description
market data-market="AU" Two letter Country code that allows for the target Skyscanner domain to be set, for example AU, UK, US, CN.

This may also affect the types of flights shown based on local market restrictions.
currency data-currency="USD" Allows a custom currency to be set on the site on referral, for example USD, GBP, EUR, HKD.
dataTarget data-target="_blank" Open the Skyscanner search results in the same window (_self) or new window (_blank).

Scripted location widgets

I have hundreds of content pages, do I have to create a widget manually for each location?

We've got you covered! With scripted location widgets you can write just a little bit of JavaScript and have widgets automatically set their location on each page - use the same code on multiple pages (maybe add it to your template) and have relevant widgets everywhere with minimal work.

In the example below two widgets set their location from meta tags and a custom JavaScript function - if your content has a location name somewhere on the page accessible by JavaScript, our widgets can probably work with it!


Location Attributes

To set the widget's location we provide support for a number of location attributes. In the example above the location is resolved from a simple name, but we support all of the following methods of getting a location:

  • Location name
  • Airport IATA code
  • Latitude & Longitude
  • A phrase or page title including a location name

See below for examples of how to use each of these methods of getting a location.

Location Name

This option is set using the "data-location-name" attribute on your widget.

See above for example using location name from meta tags.

IATA Code

This option is set using the "data-location-iata-code" attribute on your widget.

It may be more useful to you if your site already contains information about airports, and you'd like to use that to generate widgets to specific airports - or when you want a widget to a single airport in a city instead of a search for all airports in that city.

Latitude and Longitude

This option is set using the "data-location-coords" attribute on your widget.

It will find the nearest airport to the given coordinates, which should be provided in the format "<longitude>,<latitude>" as a string.

Looking up locations and airports by coordinates in this way might be particularly useful for events and places where you don't have a real "location" name, but do have coordinates. If you're using Google's static maps or adding maps dynamically, you might already have these coordinates in your page somewhere, or can easily add them.

Phrase including location name

This option is set using the "data-location-phrase" attribute on your widget, as shown in the example below.

This may be suitable for pages that do not have any of the other location properties available conveniently, but do have a fairly consistently formatted page title (or other element) such as "Holidays in sunny Florida!", where our widget should succcessfully resolve the destination of "Florida".

Test Location Lookup

You can test out our location lookup functionality by editing the HTML of the Widget in real time within the Codepen.


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 you just need to provide one attribute: "data-whitelabeldomain".

This option tells our widgets to refer users to your White Label and allows it to be themed just like your White Label automatically. Because of this, you don't need to specify a colour option when using widgets with White Labels. If you do specify a colour it will override the White Label's theme - so this can still be used when you want to customise widgets further.

See below for examples of widgets redirecting to our White Label demo - simply replace the demo domain with your White Label's domain to use on your site! The widgets match their colour with the "primary button" colour of the White Label, in this case a dark blue.


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