Multi-Vertical Search Widget

 

Our Multi-Vertical Search Widget utilizes all the features of Flight Search, Hotel Search and Car Hire Search Widgets in one place. It provides a configurable tab system with aforementioned widgets inside.

NB: For best presentation on your landing page, ensure that the widget is in a container with a width of at least 300px if you don’t use Multi-city mode, or at least 500px for Multi-city mode. Otherwise you may experience styling issues.

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 .

Widget Options

For customization, Multi-Vertical Search Widget accepts all attributes, that are acceptable for all built-in sub-widgets. For detailed information about options of sub-widgets please go to the following pages:

Skyscanner Widget
skyscannerWidget

data-skyscanner-widget="MultiVerticalWidget"

Defines the widget type.

Show details

MultiVerticalWidget

Associate ID
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"

Locale
locale

data-locale="ru-RU"

Sets widget language.

You can use one of
"bg-BG", "ca-ES", "cs-CZ", "da-DK", "de-DE", "el-GR", "en-GB", "en-GG", "en-US", "es-ES", "es-MX", "fi-FI", "fr-BE", "fr-CH", "fr-FR", "hr-HR", "hu-HU", "id-ID", "it-CH", "it-IT", "ja-JP", "ko-KR", "ms-MY", "nb-NO", "nl-BE", "nl-NL", "pl-PL", "pt-BR", "pt-PT", "ro-RO", "ru-RU", "sk-SK", "sv-SE", "th-TH", "tl-PH", "tr-TR", "uk-UA", "vi-VN", "zh-CN", "zh-HK", "zh-SG", "zh-TW"

(Note: the "locale" value is case-sensitive)

Four letter locale code

"en-GB"

Market
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
currency

data-currency="USD"

Sets the currency to display upon redirect to Skyscanner search results

Three letter currency code

"GBP"

Verticals
verticals

data-verticals="hotels,cars"

Sets available vertical tabs as comma separated string of values: flights, hotels, cars.

Show details

List of flights, hotels, cars

All verticals

Verticals Default Tab
verticalsDefaultTab

data-verticals-default-tab="cars"

Sets initially opened search tab.

Show details

One of "flights", "hotels", "cars"

The first visible tab

Colour
colour

data-colour="solar"

Changes background colour of the widget.

Show details

Preset color name or hex code

transparent

Font Colour
fontColour

data-font-colour="#000"

Changes font colour of the widget.

Show details

Preset color name or hex code

Autocalculated to contrast the background

Button Colour
buttonColour

data-button-colour="dawn"

Changes background colour of the search button.

Show details

Preset color name or hex code

Blue with gradient

Button Font Colour
buttonFontColour

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

Changes font colour of the search button.

Show details

Preset color name or hex code

Autocalculated to contrast the background of search button

Widget Padding
widgetPadding

data-widget-padding="10px 12px"

Sets padding margins of the whole widget.

Show details

A number in pixels or a value of CSS "padding" rule

0

Widget Border Radius
widgetBorderRadius

data-widget-border-radius="4"

Sets border rounding radius of the whole widget

Show details

A number in pixels or a value of CSS "border-radius" rule

0

Widget Scale
widgetScale

data-widget-scale="1.3"

Scales the whole widget.
The value sets, how many times the widget must be as big as original size.

Float number

1

Widget Builder

Here you can play around with parameters of widgets and construct Multi-Vertical Search Widget of your preference using the side panel on the left. There are many of them, make sure you find the right one for you!

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