Check out the details below to find out how you can start providing your users with an easy to use travel search solution!

 

Our Basic Widget and Location Widgets (Flights) provide a clean and simple tracked referral to the flight search on Skyscanner or a White Label.

 

Our Simple Flight Search Widget gives you everything your users need to start a search for flights on your site.

 

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

 

Our Insider Tips Widgets are designed to provide users with helpful statistical information about flights, like the cheapest month to fly and indicative pricing for a specified route.

 

 

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 customization parameters. The second loads our script, which takes your widget options and turns it into a full widget in the user's browser.

You can find the available parameters for each widget by selecting the widget from the above list.

Additionally, our widgets share common settings. 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 that 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.

 

Scripted location widgets

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".

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

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