Виджет отеля

Отельный виджет отображает на странице вашего сайта краткую информацию о конкретном отеле:

  • название отеля;
  • количество звезд;
  • сильные стороны отеля с точки зрения других туристов;
  • рейтинг отеля.

При этом виджет содержит поля для ввода даты заселения и выезда из отеля. Если посетитель заинтересовался отелем, он может изучить стоимость проживания в отеле на конкретные даты. Цены будут показаны в самом виджете, без перехода на сайт hotellook.ru.

Настройки виджета

Чтобы настроить виджет и получить его код для размещения на сайте,в личном кабинете партнёра перейдите в партнёрскую программу Hotellook, выберите Инструменты и откройте вкладку «Виджеты».

В первую очередь вам доступна настройка размеров виджета:

2018-08-16_18-32-47.png

Чтобы изменить размер, введите нужное значение в разделе Оформление в поле «Ширина виджета» или потяните за его правый край. Виджет адаптивен: чтобы он автоматически подстраивался под размер страницы, установите галку в чекбокс Резиновая.

Следующие шаги — это основные настройки виджета:

  • Проекты — выберите проект, на котором будет размещен виджет.
  • Ваш Sub ID — помогает разбираться в статистике. Например, узнать, с какой страницы и какого виджета перешёл посетитель (подробнее o Sub ID).
  • Домен — сайт, на который происходит редирект с виджета. Когда пользователь нажимает «Показать центы», его перекинет именно на этот сайт, например, там можно указать адрес вашего White Label. При этом, если пользователь кликает на конкретное предложение, он будет перенаправлен на сайт выбранного агентства. 
  • Язык — язык виджета (доступные варианты: русский и английский). Язык влияет не только на внешний вид виджета, но и на результат поиска номеров. Если выбрать английский, то в поиске будут участвовать только англоязычные агентства.
  • Валюта — выбираем, в какой валюте будет отображаться стоимость проживания.
  • Отель — название отеля, который будет отображаться в виджете.
  • Отключить редирект отели — если галочка в поле не установлена, страница отеля откроется по умолчанию на сайте Ostrovok.ru. Если галочка установлена, страница отеля откроется на сайте выбранного агентства.
  • Добавить реферальную ссылку — добавляет под формой поиска ссылку Поиск от Aviasales. Подробнее в статье Реферальная программа.
  • Ширина — задаёт ширину виджета. Поставьте галку в Резиновая, чтобы сделать виджет адаптивным.

После того как все настройки выполнены, остаётся только нажать кнопку Скопировать код и разместить его у себя на сайте.

Обратите внимание, что если ваш сайт работает на WordPress вы можете использовать наш плагин для размещения виджетов и других партнёрских инструментов.

Пример работы виджета

Лайфхак: автоматизация работы с виджетом

Этот совет пригодится тем, кто много пишет о различных городах и странах, либо размещает у себя на сайте описание большого количества отелей. Вы можете автоматизировать работу с виджетом. Чтобы не приходилось каждый раз заходить в личный кабинет и вводить название очередного отеля.

Примечание: данный лайфхак проще внедрять, имея некоторые знания в области программирования или при наличии веб-разработчика.

В коде виджета используется уникальный id-номер отеля в нашей базе:

Именно по нему виджет определяет, какой отель показать. Если поставить вместо hotel_id=361763 номер отеля Moscow Hotel (hotel_id=525), что в Дубаи, то информация в нашем виджете автоматически изменится.

Главный вопрос: где взять hotel_id отелей?

Для этого у нас есть специальный API, который доступен всем партнерам сразу после регистрации. Выглядит он так:

http://engine.hotellook.com/api/v2/lookup.json?query=Moscow%20Hotel&lang=ru&lookFor=both&limit=1

В этом запросе передаются следующие параметры:

  • query — обязательный параметр, задается:
    • в виде текста, при этом строится автокомплит по тексту;
    • широтой и долготой (указываются через запятую), при этом выводятся ближайшие объекты.
  • lang — язык вывода. Может принимать любой iso-код языка (ru, es, fr, de, …) — если перевод на запрошенный язык отсутствует в базе, возвращается английское название объекта. По умолчанию — en.
  • lookFor — объекты выводимые в результатах:
    • city (города и острова);
    • hotel (отели);
    • both (все объекты, значение по умолчанию).
  • limit — ограничение количества выводимых результатов, от 1 до 100, по умолчанию — 10.
  • convertCase — автоматическое изменение раскладки (актуально для русскоязычных пользователей, например, при запросе «vjcrdf» будет найдена «москва»). Значения — 1 или 0, по умолчанию — 1.

В результате обращения к этому API, вы получите такой ответ:

{
    "results":{
        "locations":{
        },
        "hotels":[
        {
            "locationId":25495,
            "label":"Moscow Hotel",
            "locationName":"Дубаи, ОАЭ",
            "location":{
                "lat":25.259409,
                "lon":55.323037
                },
            "_score":68.33807,
            "id":"525",
            "fullName":"Moscow Hotel, Дубаи, ОАЭ"
            }
        ]
    },
    "status":"ok"
}

В ответе параметр «id»:«525» — это и есть наш искомый id отеля. Подробнее о работе с API отелей читайте в документации «API поиска отелей».

Всё, что вам нужно — это изменить код виджета:

<script async src=«//www.travelpayouts.com/chansey/iframe.js?width=500&hotel_id=id&locale=ru&host=hotellook.ru%2Fsearch&marker=16886.&currency=usd»></script>

И передавать в него полученный с помощью API уникальный id отеля.

Таким образом, используя комбинацию виджета отеля и API, можно существенно автоматизировать процесс создания контентных страниц и сделать ваш сайт еще более удобным для посетителей.