Виджеты

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

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

Топ отелей

Поиск отелей

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

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

Добавьте этот код в элемент 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` может принимать следующие значения: `upopular`; `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' }`

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

• Основные этапы и условия работы

• Требования к трафику

Написать в службу поддержки

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

• Стать партнером

• Личный кабинет Яндекс Дистрибуции

• Справка Дистрибуции

• Политика Дистрибуции

Виджеты

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

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

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

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