Widgets

You can add Yandex Travel widgets to your website to shorten the user's path to booking tickets and hotels. The widget adapts to any device, so it will not interfere with your content.

There are two types of widgets: Top hotels, Hotel search, Selection of hotels and Hotels on map.

Top hotels

Hotel search

Selection of hotels

Hotels on map

The code consists of two parts: the widget embed code and the widget container.

Embed code for the top hotels widget

Add this code to the head element at the beginning of the page.

<script async src="https://aflt.travel.ya.ru/widgets/api.js" type="text/javascript"></script>
<script type="text/javascript">
  (function (w) {
    function start() {
      w.removeEventListener('YaTravelAffiliateLoaded', start);
      w.YaTravelAffiliate.createWidget({
        "type": 'topHotels',
        "containerId": 'travelWidget',
        "urlParams": {
          "origin": 'https://travel-test.yandex.ru',
          "partner": "distribution",
          "params": {
            "clid": '6789',
            "utm_source": "distribution",
            "utm_medium": "cpa"
          },
        },
        "widgetParams": {
          "affiliateClid": '6789',
          "geoId": 2,
          "sorting": 'cheap',
        },
      });
    }

      w.YaTravelAffiliate
        ? start()
        : w.addEventListener('YaTravelAffiliateLoaded', start);
  })(window);
</script>

Widget container

Add this code to the body element in the place where you want to display the widget.

<div id="travelWidget"></div>

Parameters of the top hotels widget embed code:

Parameter	Description	Acceptable values
`type`	Widget type.	`topHotels`
`containerId`	ID of the element the widget will be rendered in. Must match the ID of the element added to `body`.
`urlParams`	Parameters for creating a link to click through to Yandex Travel.	The parameter value consists of several parts: The `origin` value is always `https://travel.yandex.ru/`. The `partner` value is always `distribution`. The `params` contains utm tags: The `utm_source` is always `distribution`. The `utm_medium` value is always `cpa`. The `affiliate_clid` value is the affiliate_clid of the platform that the widget is placed on.
`widgetParams`	Using this parameter, set the region to show hotels from in the widget's hotel selection. You can also set the sorting method (by default, the selection shows popular hotels in the chosen region).	The parameter value should look like this: `{ "affiliateClid": '6789', "geoId": 2, "sorting": 'cheap', }` Where: `affiliateClid` must have the value of the affiliate_clid of the platform that the widget is placed on. `geoId` is the number that corresponds to the region. For example, `213` is Moscow. `sorting` can take the following values: — `popular`. — `cheap`. — `expensive`. — `high_rating`.

The code consists of two parts: the widget embed code and the widget container.

Embed code of the hotel search widget

Add this code to the head element at the beginning of the page.

<script async src="https://aflt.travel.ya.ru/widgets/api.js" type="text/javascript"></script>
<script type="text/javascript">
  (function (w) {
    function start() {
      w.removeEventListener('YaTravelAffiliateLoaded', start);
      w.YaTravelAffiliate.createWidget({
        "type": "hotelsSearchForm",
        "containerId": "travelWidget",
        "widgetParams": {},
        "urlParams": {
          "origin": "https://travel.yandex.ru/",
          "partner": "distribution",
          "params": {
            "utm_source": "distribution",
            "utm_medium": "cpa"
          }
        }
      });
    }

      w.YaTravelAffiliate
        ? start()
        : w.addEventListener('YaTravelAffiliateLoaded', start);
  })(window);
</script>

Widget container

Add this code to the body element in the place where you want to display the widget.

<div id="travelWidget"></div>

Parameters of the hotel search widget embed code:

Parameter	Description	Acceptable values
`type`	Widget type.	`hotelsSearchForm`
`containerId`	ID of the element the widget will be rendered in. Must match the ID of the element added to `body`.
`urlParams`	Parameters for creating a link to click through to Yandex Travel.	The parameter value consists of several parts: The `origin` value is always `https://travel.yandex.ru/`. The `partner` value is always `distribution`. The `params` contains utm tags: The `utm_source` is always `distribution`. The `utm_medium` value is always `cpa`. The `affiliate_clid` is the value of the platform the widget is placed on.
`widgetParams`	Using this parameter, set the region to show hotels from in the widget's hotel selection. You can also set the sorting method (by default, the selection shows popular hotels in the chosen region).	If you pass the `{}` value, the search form won't be pre-filled. To pre-fill the search form with a city or region value, pass the following parameter: `pointTo: { geoId: 2, }` Where `geoId` is the number corresponding to the region. For example, `213` is Moscow. To pre-fill the search form with the value of a specific hotel, pass the following parameter: `pointTo: { hotelSlug: 'hotel_slug', }` For example: `hotelSlug: 'beta-izmailovo'`. To pre-fill in the check-in and check-out dates, pass the `StartDate: 'date'` and `EndDate: 'date'` parameters, respectively. Specify the date in `'YYYY-MM-DD'` format, where `YYYY` is year. You can pass several parameters at once: for example, pre-fill in the city and the check-in and check-out dates, or the hotel and the check-in and check-out dates. In this case, the parameter value will look like this: `{ pointTo: { geoId: 2, }, startDate: '2022-06-18', endDate: '2022-06-18' }`

The code consists of two parts: the widget embed code and the widget container.

Embed code of the selection of hotels widget

Add this code to the head element at the beginning of the page.

<script async src="https://aflt.travel.ya.ru/widgets/api.js" type="text/javascript"></script>
<script type="text/javascript">
    (function (w) {
        function start() {
            w.removeEventListener('YaTravelAffiliateLoaded', start);
            w.YaTravelAffiliate.createWidget({
      "type": "hotelsSet",
      "containerId": "travelWidget",
      "widgetParams": {
              "title": "Selection of hotels",
              "slugs": [
                      "moscow/17-3-kapsulnyi-launzh-otel",
                      "nizhny-novgorod/marins-park-hotel-nizhnii-novgorod",
                      "moscow-oblast/vozdvizhenskoe-park-otel"
              ]
      },
      "urlParams": {
              "origin": "https://travel.yandex.ru/",
              "partner": "distribution",
              "params": {
                      "affiliate_clid": "12345",
                      "service": "hotelsSet",
                      "utm_source": "distribution",
                      "utm_medium": "cpa"
              }
      },
      "theme": "light"
});
        }

        w.YaTravelAffiliate
            ? start()
            : w.addEventListener('YaTravelAffiliateLoaded', start);
    })(window);
</script>

Widget container

Add this code to the body element in the place where you want to display the widget.

<div id="travelWidget"></div>

Parameters of the selection of hotels widget embed code:

Parameter	Description	Acceptable values
`type`	Widget type.	`hotelsSet`
`containerId`	ID of the element the widget will be rendered in. Must match the ID of the element added to `body`.
`urlParams`	Parameters for creating a link to click through to Yandex Travel.	The parameter value consists of several parts: The `origin` value is always `https://travel.yandex.ru/`. The `partner` value is always `distribution`. The `params` contains utm tags: The `utm_source` is always `distribution`. The `utm_medium` value is always `cpa`. The `affiliate_clid` is the value of the platform the widget is placed on.
`widgetParams`	Using this parameter, set the holets IDs to show hotels from in the widget's hotel selection.	The parameter value should look like this: `{ "affiliateClid": '6789', "slugs": [ "moscow/17-3-kapsulnyi-launzh-otel", "nizhny-novgorod/marins-park-hotel-nizhnii-novgorod", "moscow-oblast/vozdvizhenskoe-park-otel" ], "title": 'Selection of hotels' }` Where: `affiliateClid` must have the value of the `affiliate_clid` of the platform that the widget is placed on. `slugs`: Mandatory. A list of hotels IDs which will be shown in the widget. `title`: The optional parameter. A line where you can specify an arbitrary name for the selection of hotels. If the parameter is not passed, the line "Selection of hotels" uses.

The code consists of two parts: the widget embed code and the widget container.

Embed code of the hotels on map widget

Add this code to the head element at the beginning of the page.

<script async src="https://aflt.travel.ya.ru/widgets/api.js" type="text/javascript"></script>
<script type="text/javascript">
(function (w) {
  function start() {
    w.removeEventListener('YaTravelAffiliateLoaded', start);
    w.YaTravelAffiliate.createWidget({
      "type": 'hotelsOnMap',
      "containerId": 'travelWidget',
      "urlParams": {
        "origin": 'https://travel-test.yandex.ru',
        "partner": "distribution",
        "params": {
          "clid": '6789',
          "utm_source": "distribution",
          "utm_medium": "cpa"
        },
      },
      "widgetParams": {
        "affiliateClid": '6789',
        "geoId": 2,
      },
    });
  }

    w.YaTravelAffiliate
      ? start()
      : w.addEventListener('YaTravelAffiliateLoaded', start);
})(window);
</script>

Widget container

Add this code to the body element in the place where you want to display the widget.

<div id="travelWidget"></div>

Parameters of the hotels on map widget embed code:

Parameter	Description	Acceptable values
`type`	Widget type.	`hotelsOnMap`
`containerId`	ID of the element the widget will be rendered in. Must match the ID of the element added to `body`.
`urlParams`	Parameters for creating a link to click through to Yandex Travel.	The parameter value consists of several parts: The `origin` value is always `https://travel.yandex.ru/`. The `partner` value is always `distribution`. The `params` contains utm tags: The `utm_source` is always `distribution`. The `utm_medium` value is always `cpa`. The `affiliate_clid` is the value of the platform the widget is placed on.
`widgetParams`	Using this parameter, set the region to show hotels from in the widget's hotel selection.	The parameter value should look like this: `{ "affiliateClid": '6789', "geoId": 2, }` Where: `affiliateClid` must have the value of the `affiliate_clid` of the platform that the widget is placed on. `geoId`: is the number that corresponds to the region. For example, `213` is Moscow.

• Main stages and conditions of cooperation

• Traffic requirements

Contact support

Useful links

• Become a partner

• Yandex Distribution personal account

• Yandex Distribution Help

• Yandex Distribution Policy

Was the article helpful?

How to create a partner link in the Yandex Distribution interface

Partner API

Widgets

Related information

Useful links

Was the article helpful?