Give your audience an easy-to-use travel search solution with our range of widgets.

Generating commission with Travel Widgets

Please note that in order to track your traffic and generate commission with our Travel Widgets, you'll have to be an approved partner on Impact and use the Travel Widget codes provided via Impact that have the correct tracking. Apply to join our affiliate programme here.

How do I use Travel Widgets?

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

The first line defines the type of Travel Widget and necessary customization parameters. The second loads our script, which takes your Travel 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 Travel Widget from the above list.

Additionally, our Travel Widgets share common settings. There's a common rule of adding parameters to our Travel 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.

Travel Widget builder

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

Location Attributes

To set the Travel 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
• Geolocation IP Lookup

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-(origin|destination)-name" attribute on your Travel Widget.
See above for example using location name from meta tags.

IATA Code

This option is set using the "data-(origin|destination)-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-(origin|destination)-coords" attribute on your Travel Widget.

It will find the nearest airport to the given coordinates, which should be provided in the format "<latitude>,<longitude>" 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.

Geolocation IP Lookup

This option is set using the "data-(origin|destination)-geo-lookup" attribute on your Travel Widget.

It will find the nearest location to the user by performing a geolocation lookup using the users IP address.

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