When you want to provide location and dates controls for flight search on your site, our "Search Widget" gives you everything your user needs to start a search on Skyscanner.net or a White Label. The user can fill in as much or as little information as they like, the "Search Flights" button will send them to the right place!
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.
You can customize your widgets with localization, colours and the Search button text - see below for details on how to set these options.
The Widget can utilise GEO-IP to infer an Origin (from) or Destination (to) field based on its location, which can help encourage more click throughs.
This can be achieved by adding data-origin-geo-lookup="true" or data-destination-geo-lookup="true" in the code snippet:
Fixed Origin / Destination
If you wish to set a fixed Origin (from) or Destination (to) location in the SearchWidget,
you can do so by adding data-origin-name="Miami" or data-destination-name="Miami" in the code snippet.
This is useful if you are promoting an event or geographical region for example and want to show users the nearest airport to travel to.
This attribute can be used in conjunction with the GEO-IP attribute, or on its own.
And an example destination set:
You can specify your own colours for different parts of Search Widget using the following parameters:
colour - Changes background colour of SearchWidget. Transparent is by default
fontColour - Changes font colour of SearchWidget. Autocalculated by default to contrast the background
buttonColour - Changes background colour of the button on SearchWidget. Blue with gradient is by default
buttonFontColour - Changes font colour of the button on SearchWidget. Autocalculated by default to contrast the background of search button
Each of these parameters accepts a predefined colour name or a hex code you want.
Other Optional Attributes
|buttonLabel||data-button-label="Get a flight!"||buttonLabel allows you to customise the button text shown in the widget, for example "Book now!".|
|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.|