Виджет отеля

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

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

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

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

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

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

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

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

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

  • Проекты — выберите проект, на котором будет размещен виджет.
  • Ваш Sub ID — помогает разбираться в статистике. Например, узнать, с какой страницы и какого виджета перешёл посетитель (подробнее o Sub ID).
  • Домен — если планируете, чтобы при нажатии на название отеля или локацию результат открывался на вашем White Label, выберите его в этом поле.
  • Язык — язык виджета (доступные варианты: русский и английский). Язык влияет не только на внешний вид виджета, но и на результат поиска номеров. Если выбрать английский, то в поиске будут участвовать только англоязычные агентства.
  • Валюта — выбираем, в какой валюте будет отображаться стоимость проживания.
  • Отель — название отеля, который будет отображаться в виджете.
  • Отключить редирект отели — когда галка в поле не стоит, по умолчанию открывается отель на сайте Ostrovok.ru. Если галка стоит, откроется страница отеля на сайте Hotellook.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, можно существенно автоматизировать процесс создания контентных страниц и сделать ваш сайт еще более удобным для посетителей.