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.
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:
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.
You can customise your widgets with localisation and colour - see below for details on how to set these options.
There are also a number of other optional attributes that can be added to help customise your SearchWidget:
|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.|
|colour||data-params="colour:#f03;"||Changes background colour of SearchWidget. Transparent is by default|
|fontColour||data-params="fontColour:#f03;"||Changes font colour of SearchWidget. Autocalculated by default to contrast the background|
|buttonColour||data-params="buttonColour:#f03;"||Changes background colour of the button on SearchWidget. Blue with gradient is by default|
|buttonFontColour||data-params="buttonFontColour:#f03;"||Changes font colour of the button on SearchWidget. Autocalculated by default to contrast the background of search button|
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.
Scripted location widgets
Widgets for White Labels
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.