KAYAK Search-Widget API

Loading

To use the API, copy and paste the following script tag in the bottom of the markdown file:

<script type="text/JavaScript" src="https://www.kayak.com/affiliate/widget-v2.js"></script>

Then, initiate the search-widget with the following command:

KAYAK.embed({
container: containerElem, /* more options */
});

The widget loads inside the container element, and fills the containing element entirely.

Options

The following are allowed values in the options supplied to the function

KAYAK.embed(options);

Required

• container: this is the element that will contain the search-widget. Must be a JavaScript object of type Element. The widget, once loaded, will adjust to the size of the containing element, and fill it entirely. For this reason wrapping container must have height width defined.

Optional

• defaultProduct

KAYAK Product tat will be displayed first (by default) on the widget. One must pass a Javascript String. For the time being supported products are "flights" or "hotels" (default product displayed is "hotels", if the value is not provided).

• enabledProducts

Enabled KAYAK products on the widget. One must pass in a Javascript Array of product names as String (default: ["flights", "hotels"]).

• affiliateId

It is used by the widget to associate the search with an affiliate. A JavaScript object of type String.

• placement

A JavaScript object of type String. Used by the search-widget to associate the search with a particular placement.

• hostname

The URL to which a user will be redirected to from the widget (default: "www.kayak.com"). A JavaScript object of type String.

• origin

The origin value. Must be an object of type String. Note that origin only affects the flights section.

• destination

The destination value. Must be a JavaScript object of type String. Note that destination only affects the flights section.

• startDate

The start date for the trip. Must be a Javascript String with the following format: yyyy-mm-dd (default: two weeks after day of page-load).

• endDate

The end date for the trip. Must be a Javascript String with the following format: yyyy-mm-dd (default: three weeks after day of page-load).

• ssl

Whether to navigate to the https, or non-https version of KAYAK. Must be a Javascript Boolean. Either true or false (default: true).

• isInternalLoad

Can be used when widget is used internally from kayak host, that way it will load all resources from current host. Must be a Javascript Boolean. true or false (default: false).

• tripType

Flights search default trip type value. Can be one of the following: rt or ow or mc (no default value but in this case the round-trip flights search section will be displayed).

• cabinType

Default cabin type value for flight search. Can be one of the following: economy or business or first (default: economy).

• fullTravellers

This option sets the flight the type of travelers dropdown. Must be a Javascript Boolean. If it is set to true, all types of travelers would be shown (adults, children, etc.). If it is set to false, the sole and only travelers row will be shown (default: false).

• travelers

Sets default travelers count in flight search if fullTravellers is set to false. Javascript Number between 1-6 (default: 1).

• adults

Sets default adults count in flight search if fullTravellers is set to true. Javascript Number between 1-6 (default: 1).

• youths

Sets default youths count in flight search if fullTravellers is set to true. Javascript Number between 0-6 (default: 0).

• children

Sets default children count in flight search if fullTravellers is set to true. Javascript Number between 0-6 (default: 0).

• lapInfants

Sets default lapInfants count in flight search if fullTravellers is set to true. Javascript Number between 0-6 (default: 0).

• infantSeat

Sets default infantSeat count in flight search if fullTravellers is set to true. Javascript Number between 0-6 (default: 0).

• onInfantWarning

Callback Function used to warn about the incorrect count of lap infants (usually lap infants cannot exceed the number of adults).

function (boolean, widgetWindow) {
/*some code*/
}

1. boolean is a boolean that show to either hide or show the warning
2. widgetWindow is the window that contains the warning container

• onformerror

Callback Function used to show any type of validation error in the form of

function (string) {
/*some code*/
}

String param is the error message provided by the search form

• cc

Represents country code. JavaScript object of type String. It is of a form of 2 lower-case letter, e.g. us for United States or jp for Japan (no default value).

• lc

Represents locale code. JavaScript object of type String. It is of a form of 2 lower-case letter, e.g. fr for French or jp for Japanese (no default value).

• mc

Represent currency code. JavaScript object of type String. It is of a form of 3 upper-case letter, e.g. JPY for Japanese currency or EUR for Euros (no default value).

• autoPosition

Defines whether the widget window should resize on browser resize (legacy option). Either true or false (default: false).

• deeplink

Represents the deep-link value. A JavaScript object of type String. When defined, wraps flights and hotels URL with deep-link as a prefix (default value is empty).

• onfirstview

A Javascript callback Function called after widget layout is loaded for the first time (no default value).

function () {
/*some code*/
}

• redirectOnFailure

Javascript callback Function called if flights or hotels validation fails. If the function is not explicitly defined, it redirects to /hotels or /flights accordingly).

• datepicker

Represents the alignment value for date picker. If it is set to center, it will center date picker widget to the corresponding date field. Javascript object of type String. Supports only “center” value (no default value).

• internalRedirect

Does not perform an /in redirect while redirecting. A Javascript Boolean (default: false).

• inRedirect

If set to true, performs an /in redirect on the client side when cc, lc and mc is defined. If set to false, does not perform an /in redirect on the client side (default: true).

Example

Here is example code that can be used to embed the search-widget:

• Height and width of the div is only an example. Please style and adjust the style of wrapping div to your needs.

<div style="height:500px;width: 500px;">
<div id="kayakSearchWidgetContainer"></div>
</div>
<script type="text/javaScript" src="https://www.kayak.com/affiliate/widget-v2.js"></script>
<script type="text/javaScript">
KAYAK.embed({
container: document.getElementById("kayakSearchWidgetContainer"),
hostname: "www.kayak.com",
autoPosition: true,
defaultProduct: "hotels",
enabledProducts: ["hotels", "flights"],
startDate: "2018-10-02",
endDate: "2018-10-28",
origin: "New York, NY",
destination: "Boston, MA",
ssl: true,
affiliateId: "acme_corp",
isInternalLoad: false,
lc: "en",
cc: "us",
mc: "EUR"
});
</script>