Insider Tips Widgets

 

Our Insider Tips Widgets are designed to provide users with helpful statistical information about flights.
The Insider Tips are generated from prices Skyscanner has found for specific flight routes based on users clicking through to booking sites from our search results.

There are six different Insider Tips Widgets available; therefore, the "data-tip-type" attribute is required in order to define a type of displayed statistics. Please see below for the specific Insider Tips Widgets available.

NB: For best presentation on your landing page, ensure that the widget is in a container with a width of at least about 250px (exact minimum width may be slightly different depending on a tip type), otherwise you may experience styling issues.
Insider Tips widget's height is usually calculated automatically depending on a tip type and the current width.

 

Month price tips

Month price tips shown are the average price per person Skyscanner has found over the last year across all markets for return adult economy fares on the chosen route, for departures leaving on each month of the year.

Day of week price tips

Day of week price tips shown are the average price per person Skyscanner has found over the last year across all markets for return adult economy fares on the chosen route, for departures leaving on each day of the week.

Weeks in advance price tips

"Weeks in advance of booking" price tips are the average price per person Skyscanner has found across all markets over the last year for return adult economy fares searched the specified number of weeks prior to the departure date of the flight.

Month popularity tips

Month popularity tips show the relative popularity for departures across all markets for the last year based on return adult economy fares.

Day of week popularity tips

Day of week popularity tips show the relative popularity for departures across all markets for the last year based on return adult economy fares.

Typical price tips

Typical price tips show the median ("Typical") and 25th percentile ("Cheap") prices Skyscanner has found over the last year across all markets for return adult economy fares on the chosen route. The median is the middle price if all the prices we have seen for a route were arranged in order. The 25th percentile price is the price below 75% of all the prices we have seen for a route.

 

Insufficient Data

If there is not enough data for a route or a route is not set properly, an alternative, simplified widget like the example below will be displayed to the user. Additionally, more detailed information will be available in the browser’s developer console.

 

Origin and Destination

Insider Tips Widget requires presetting both Origin and Destination locations. You can set Origin location by defining:

  • geocode: data-origin-id="'EDI'"

  • location by name: data-origin-name=”’Bristol’”

  • airport IATA code: data-origin-iata-code=”’LAX”’

  • GEO-IP lookup to infer origin: data-origin-geo-lookup=”true”

  • longitude/latitude: data-origin-coords= "55.944339,-3.1952956"

  • origin name from a phrase: data-origin-phrase="'Take off from Florida'"

In a similar way, the Destination location can be defined as:

  • geocode: data-destination-id="LON"

  • location by name: data-destination-name=”Edinburgh”

  • airport IATA code: data-destination-iata-code=”SFO”’

  • GEO-IP lookup to infer origin: data-destination-geo-lookup=”true”

  • longitude/latitude: data-destination-coords= "55.944339,-3.1952956"

  • origin name from a phrase: data-destination-phrase="'Best holiday ideas in Turkey'"

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.

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. For details, check out the documentation ("originName" 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

data-skyscanner-widget="InsiderTipsWidget"

Defines the widget type.

Show details

InsiderTipsWidget

tipType

data-tip-type="month_price"

Defines a type of displayed statistics.

The widget's design completely depends on this attribute.

(Examples of widgets with different tip types you can find further on the page)

One of
"leadtime", "indicative_price", "month_price", "month_popularity", "day_price", "day_popularity"

associateId

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"

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"

originId

data-origin-id="'EDI'"

Sets a fixed origin (from)

* One of the six origin setting parameters is required

Three letter geocode in single quotes

destinationId

data-destination-id="'EDI'"

Sets a fixed destination (to)

* One of the six destination setting parameters is required

Three letter geocode in single quotes

originName

data-origin-name="'Edinburgh'"

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

* One of the six origin setting parameters is required

Show details

Free text (Location name in single quotes)

destinationName

data-destination-name="'Edinburgh'"

Sets a fixed destination (to).

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

* One of the six destination setting parameters is required

Show details

Free text (Location name in single quotes)

originIataCode

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

Sets a fixed origin aiport (from)

* One of the six origin setting parameters is required

IATA code

destinationIataCode

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

Sets a fixed destination airport (to)

* One of the six destination setting parameters is required

Show details

IATA code

originGeoLookup

data-origin-geo-lookup="true"

Uses GEO-IP to infer an origin (from)

* One of the six origin setting parameters is required

Show details

true / false

false

destinationGeoLookup

data-destination-geo-lookup="true"

Uses GEO-IP to infer an destination (to)

* One of the six destination setting parameters is required

true / false

false

originCoords

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

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

* One of the six origin setting parameters is required

Comma separated pair of float numbers

destinationCoords

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

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

* One of the six destination setting parameters is required

Show details

Comma separated pair of float numbers

originPhrase

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

Finds an origin name from the given string

* One of the six origin setting parameters is required

Free text

destinationPhrase

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

Finds a destination name from the given string

* One of the six destination setting parameters is required

Show details

Free text

textColour

data-text-colour="#fdd"

Changes text colour of the heading banner.

Show details

Preset color name or hex code

chartColour

data-chart-colour="#f03"

Changes colour for the chart line/bars.

Show details

Preset color name or hex code

chartHighlightColour

data-chart-highlight-colour="#f33"

Changes colour for the chart minimum/maximum data point.

Show details

Preset color name or hex code

buttonColour

data-button-colour="dawn"

Changes background colour of the search button.

Preset color name or hex code

Blue with gradient

buttonFontColour

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

Changes font colour of the search button.

Preset color name or hex code

Autocalculated to contrast the background of search button

fontFamily

data-font-family="Georgia"

Sets CSS font family value to use for the widget text.

Free text

sans-serif

params

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

Semicolon separated list of extra widget parameters

Any
(URL encoded if it has special symbols)

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