Car Hire Search Widget

 

When you want to provide location and time controls for car hire search on your site, our Car Hire Search Widget gives you everything your user needs to start a search on Skyscanner or a White Label.

NB: For best presentation on your landing page, ensure that the widget is in a container with a width of at least 250px, 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 ("originName" parameter).

Widgets for White Labels

"I already have a White Label, can I use widgets to send traffic to it?"

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, check out the documentation ("whitelabeldomain" parameter).

Widget Options

You can customize your widgets with localization, colours, text and more - see below for details on how to set these options.

Skyscanner Widget
skyscannerWidget

data-skyscanner-widget="CarHireWidget"

Defines the widget type.

Show details

CarHireWidget

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-AT", "de-CH", "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"

Origin ID
originId

data-origin-id="'EDI'"

Sets a fixed origin (from)

Three letter geocode in single quotes

Destination ID
destinationId

data-destination-id="'EDI'"

Sets a fixed destination (to)

Three letter geocode in single quotes

Origin Name
originName

data-origin-name="'Edinburgh'"

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

Show details

Free text (Location name in single quotes)

Destination Name
destinationName

data-destination-name="'Edinburgh'"

Sets a fixed destination (to).

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

Show details

Free text (Location name in single quotes)

Origin IATA Code
originIataCode

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

Sets a fixed origin aiport (from)

IATA code

Destination IATA Code
destinationIataCode

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

Sets a fixed destination airport (to)

Show details

IATA code

Origin Geo Lookup
originGeoLookup

data-origin-geo-lookup="true"

Uses GEO-IP to infer an origin (from)

Show details

true / false

false

Destination Geo Lookup
destinationGeoLookup

data-destination-geo-lookup="true"

Uses GEO-IP to infer an destination (to)

true / false

false

Origin Coords
originCoords

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

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

Comma separated pair of float numbers

Destination Coords
destinationCoords

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

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

Show details

Comma separated pair of float numbers

Origin Phrase
originPhrase

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

Finds an origin name from the given string

Free text

Destination Phrase
destinationPhrase

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

Finds a destination name from the given string

Show details

Free text

Whitelabel Domain
whitelabeldomain

data-whitelabeldomain="whitelabeldemo.skyscanner.net"

Redirects to partner's WhiteLabel page

Show details

WhiteLabel's CNAME

Target
target

data-target="_self"

Opens the Skyscanner search results in the same window (_self) or new window (_blank)

One of "_self", "_blank"

"_blank"

Car Drop-off Location
carDropOffLocation

data-car-drop-off-location="false"

Shows "Return car to a different location" checkbox

true / false

true

Car Drop-off Location Is Checked
carDropOffLocationIsChecked

data-car-drop-off-location-is-checked="true"

Sets "Return car to a different location" checkbox checked

true / false

false

Driver Age
driverAge

data-driver-age="false"

Hides "Driver aged between 25 - 75" checkbox

true / false

true

Driver Age Is Checked
driverAgeIsChecked

data-driver-age-is-checked="false"

Sets "Driver aged between 25 - 75" checkbox unchecked

true / false

true

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

Button Label
buttonLabel

data-button-label="Book now!"

Allows you to customise the button text shown in the widget.

Free text

"Search"

Button Text Size
buttonTextSize

data-button-text-size="1.4"

Sets scale of text on the search button comparing to its default size.

Float number

1.4

Powered By Logo Colour
poweredByLogoColour

data-powered-by-logo-colour="light"

Changes colour of the Skyscanner logo.

Show details

One of "default", "light", "dark"

"default"

Powered By Size
poweredBySize

data-powered-by-size="1.5"

Sets size (scale factor) of the "Powered by" text and Skyscanner logo comparing to default size.

Show details

Float number

1

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

Car Pick-up Date
carPickUpDate

data-car-pick-up-date="2019-03-22"

Presets car pick-up date.

Date in the "YYYY-MM-DD" format

Car Drop-off Date
carDropOffDate

data-car-drop-off-date="2019-03-25"

Presets car drop-off date.

Date in the "YYYY-MM-DD" format

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