Виджеты

Вы можете добавить на сайт виджеты Яндекс Путешествий, которые сократят пользователям путь к бронированию. Виджет адаптируется под любые устройства, поэтому не помешает вашему контенту.

Доступные типы виджетов: Топ отелей, Поиск отелей, Подборка отелей и Отели на карте.

Топ отелей

Поиск отелей

Подборка отелей

Отели на карте

Код состоит из двух частей: кода вставки виджета и контейнера виджета.

Код вставки виджета топа отелей

Добавьте этот код в элемент head в начале страницы.

<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",
        "widgetParams": {
          "geoId": 213,
          "sorting": "popular",
          "affiliateClid": "2897026"
      },
        "urlParams": {
           "origin": "https://travel.yandex.ru/",
           "partner": "distribution",
           "params": {
             "affiliate_clid": "2897026",
             "service": "topHotels",
             "utm_source": "distribution",
             "utm_medium": "cpa"
          }
        }
    });
  }

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

Контейнер виджета

Добавьте этот код в элемент body в том месте, где хотите показывать виджет.

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

Параметры кода вставки виджета топа отелей:

Параметр	Описание	Допустимые значения
`type`	Тип виджета.	`topHotels`
`containerId`	ID элемента, в котором будет отрисован виджет. Должен совпадать с ID элемента, который добавляется в `body`.
`urlParams`	Параметры для построения ссылки перехода на Яндекс Путешествия.	Значение параметра состоит из нескольких частей: `origin` всегда имеет значение `https://travel.yandex.ru/`; `partner` всегда имеет значение `distribution`; `params` содержит utm-метки: `utm_source` всегда имеет значение `distribution`; `utm_medium` всегда имеет значение `cpa`; `affiliate_clid` должен иметь значение площадки на которой размещается виджет.
`widgetParams`	С помощью этого параметра нужно задать регион, отели из которого будут показаны в подборке отелей виджета. Также можно задать способ сортировки (по умолчанию в подборке будут показаны популярные отели в выбранном регионе).	Значение параметра должно выглядеть так: `{ "affiliateClid": '2897026', "geoId": 2, "sorting": 'cheap', }` Где: `affiliateClid` должен иметь значение `affiliate_clid` площадки на которой размещается виджет; `geoId` —число, которое соответствует нужному региону. Например, `213` — Москва. `sorting` может принимать следующие значения: `popular`; `cheap`; `expensive`; `high_rating`.

Код состоит из двух частей: кода вставки виджета и контейнера виджета.

Код вставки виджета поиска отелей

Добавьте этот код в элемент head в начале страницы.

<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": {
             "affiliate_clid": "2897026",
             "service": "hotelsSearchForm",
             "utm_source": "distribution",
             "utm_medium": "cpa"
          }
        }
    });
  }

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

Контейнер виджета

Добавьте этот код в элемент body в том месте, где хотите показывать виджет.

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

Параметры кода вставки виджета поиска отелей:

Параметр	Описание	Допустимые значения
`type`	Тип виджета.	`hotelsSearchForm`
`containerId`	ID элемента, в котором будет отрисован виджет. Должен совпадать с ID элемента, который добавляется в `body`.
`urlParams`	Параметры для построения ссылки перехода на Яндекс Путешествия.	Значение параметра состоит из нескольких частей: `origin` всегда имеет значение `https://travel.yandex.ru/`; `partner` всегда имеет значение `distribution`; `params` содержит utm-метки: `utm_source` всегда имеет значение `distribution`; `utm_medium` всегда имеет значение `cpa`; `affiliate_clid` должен иметь значение площадки на которой размещается виджет.
`widgetParams`	С помощью этого параметра нужно задать регион, отели из которого будут показаны в подборке отелей виджета. Также можно задать способ сортировки (по умолчанию в подборке будут показаны популярные отели в выбранном регионе).	Если вы передаете значение `{}`, форма поиска не будет предзаполнена. Чтобы предзаполнить форму поиска значением города или региона, передайте параметр: `pointTo: { geoId: 2, }` Где `geoId` —число, которое соответствует нужному региону. Например, `213` — Москва. Чтобы предзаполнить форму поиска значением конкретного отеля, передайте параметр: `pointTo: { hotelSlug: 'слаг_отеля', }` Например, `hotelSlug: 'beta-izmailovo'`. Чтобы предзаполнить даты заезда и отъезда, передайте параметры `startDate: 'дата'` и `endDate: 'дата'` соответственно. Дата указывается в формате `'YYYY-MM-DD'` где `YYYY` — это год. Можно передать сразу несколько параметров, например, предзаполнить город и даты заезда и выезда, или предзаполнить отель и даты заезда и выезда. В этом случае значение параметра будет выглядеть так: `{ pointTo: { geoId: 2, }, startDate: '2022-06-18', endDate: '2022-06-18' }`

Код состоит из двух частей: кода вставки виджета и контейнера виджета.

Код вставки виджета подборки отелей

Добавьте этот код в элемент head в начале страницы.

<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": "Подборка отелей",
              "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>

Контейнер виджета

Добавьте этот код в элемент body в том месте, где хотите показывать виджет.

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

Параметры кода вставки виджета подборки отелей:

Параметр	Описание	Допустимые значения
`type`	Тип виджета.	`hotelsSet`
`containerId`	ID элемента, в котором будет отрисован виджет. Должен совпадать с ID элемента, который добавляется в `body`.
`urlParams`	Параметры для построения ссылки перехода на Яндекс Путешествия.	Значение параметра состоит из нескольких частей: `origin` всегда имеет значение `https://travel.yandex.ru/`; `partner` всегда имеет значение `distribution`; `params` содержит utm-метки: `utm_source` всегда имеет значение `distribution`; `utm_medium` всегда имеет значение `cpa`; `affiliate_clid` должен иметь значение площадки на которой размещается виджет.
`widgetParams`	С помощью этого параметра нужно задать ID отелей, которые будут показаны в подборке отелей виджета.	Значение параметра должно выглядеть так: `{ "affiliateClid": '6789', "slugs": [ "moscow/17-3-kapsulnyi-launzh-otel", "nizhny-novgorod/marins-park-hotel-nizhnii-novgorod", "moscow-oblast/vozdvizhenskoe-park-otel" ], "title": 'Подборка отелей' }` Где: `affiliateClid` — обязательный параметр. Должен иметь значение площадки на которой размещается виджет. `slugs` — обязательный параметр. Список, в котором перечислены ID отелей, которые будут показаны в виджете. `title` — необязательный параметр. Строка, в которой можно задать произвольный заголовок для подборки отелей. Если параметр не передан, будет использоваться строка "Подборка отелей".

Код состоит из двух частей: кода вставки виджета и контейнера виджета.

Код вставки виджета отелей на карте

Добавьте этот код в элемент head в начале страницы.

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

Контейнер виджета

Добавьте этот код в элемент body в том месте, где хотите показывать виджет.

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

Параметры кода вставки виджета подборки отелей:

Параметр	Описание	Допустимые значения
`type`	Тип виджета.	`hotelsOnMap`
`containerId`	ID элемента, в котором будет отрисован виджет. Должен совпадать с ID элемента, который добавляется в `body`.
`urlParams`	Параметры для построения ссылки перехода на Яндекс Путешествия.	Значение параметра состоит из нескольких частей: `origin` всегда имеет значение `https://travel.yandex.ru/`; `partner` всегда имеет значение `distribution`; `params` содержит utm-метки: `utm_source` всегда имеет значение `distribution`; `utm_medium` всегда имеет значение `cpa`; `affiliate_clid` должен иметь значение площадки на которой размещается виджет.
`widgetParams`	С помощью этого параметра нужно задать регион, отели из которого будут показаны в подборке отелей виджета.	Значение параметра должно выглядеть так: `{ "affiliateClid": '6789', "geoId": 2, }` Где: `affiliateClid` — обязательный параметр. Должен иметь значение площадки на которой размещается виджет. `geoId` — обязательный параметр. число, которое соответствует нужному региону. Например, `213` — Москва.

Виджеты

Узнайте больше

Полезные ссылки

Была ли статья полезна?