Quick Start Widgets

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 search for a destination relevant to your content.

Basic Widget
Location Widget

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, the locale, the colour, and set the destination for a Location Widget. 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:

Basic Widget

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

Location Widget

The "Location Widget" gives users a pre-filled destination 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.

Search Widget

When you want to provide search controls on your site, our "Search Widget" gives you everything your user needs to start a 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!

NB: For best presentation on your landing page, ensure that the Widgets are in a container with a width of at least 230px, otherwise you may experience styling issues.

Widget options

You can customise your widgets with localisation and colour - see below for details on how to set these options.

Localisation

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 localisation options we support, and please contact us to check if widgets can be displayed in other languages.

>
GEO-IP lookup

Widgets can utilise GEO-IP to infer an origin (from) or destination (to) field based on their 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:

There are also a number of other optional attributes that can be added to help customise your SearchWidget:

Attribute Example Description
Locale data-locale="en-US"" Sets the default locale settings for the SearchWidget, for example en-US (English, United States) or da-DK (Danish, Denmark).
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.
buttonLabel data-button-label="Get a flight!" buttonLabel allows you to customise the button text shown in the widget, for example "Book now!".
dataTarget data-target="_blank" Open the Skyscanner search results in the same window (_self) or new window (_blank).
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.
associateId data-associate-id="AFF_TRA_00000_00000" Attributes partner exits to your custom Associate ID and displays them in the partner dashboard.

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="AFF_TRA_00000_00000" 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="AFF_TRA_00000_00000(YOUR 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.

Colours

LocationWidgets can be displayed in any colour (SearchWidgets cannot). For convenience we have a range of pre-set named colours you can use:

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

To set the widget colour, use the "data-params" property on your widget and set the "colour" option to the name or hex code you want. The text colour on your widget is automatically chosen to contrast well with the background, so you only have to do half the work! See the example below for widget implementations using a range of colour settings.

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 & 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 option: "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.


Subscribe to product updates

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