Виджет популярных направлений

Виджет популярных направлений

Список популярных направлений очень полезный инструмент в продаже билетов. Он активно используется в форме поиска и в виде отдельного xml-файла. А с помощью «Виджета популярных направлений» этот список можно вывести в любом месте сайта.

Внешний вид

Чтобы создать и настроить виджет, перейдите в личный кабинет партнера.

Виджет может быть фиксированной ширины или автоматически подстраиваться под разрешение экрана (или отведенную для него область). Чтобы сделать виджет адаптивным, установите галку в чек-бокс «Резиновая».

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

Виджет содержит следующие настройки:

  • Город прилета по умолчанию — указывается город, для которого формируется топ-5 популярных перелетов;
  • Хост — если планируете разместить виджет на White Label и хотите чтобы результаты открывались на вашем сайте, укажите в этом поле адрес White Label;
  • Язык — на каком языке отображаются результаты (пока поддерживается только русский и английский);
  • Валюта — тип валюты, в которой будет отображаться стоимость найденных билетов;
  • Доп. маркер — дополнительный маркер помогает разбираться в статистике. Например узнать с какой страницы и какого виджета перешел посетитель (подробнее про дополнительный маркер).

Чтобы встроить виджет на сайт, скопируйте код из блока «Код для вставки» и разместите на странице сайта.

Как разместить несколько виджетов на странице

Чтобы разместить несколько виджетов на странице в один ряд, воспользуйтесь подобным кодом (здесь приводится пример размещения трех виджетов):

<div style=«width: 100%; float: center;«>
<div style=«float: left; width: 30%; margin: 10px;«>
<script async src=«//www.travelpayouts.com/weedle/widget.js?width=260px&marker=16886&host=hydra.aviasales.ru&locale=ru&currency=rub&destination=MOW&destination_name=%D0%9 °C%D0%BE%D1%81%D0%BA%D0%B2%D0%B0» charset=«UTF-8»></script>
</div>
<div style=«float: left; width: 30%; margin: 10px;«>
<script async src=«//www.travelpayouts.com/weedle/widget.js?width=260px&marker=16886&host=hydra.aviasales.ru&locale=ru&currency=rub&destination=MSQ&destination_name=%D0%9 °C%D0%B8%D0%BD%D1%81%D0%BA» charset=«UTF-8»></script>
</div>
<div style=«float: left; width: 30%; margin: 10px;«>
<script async src=«//www.travelpayouts.com/weedle/widget.js?width=260px&marker=16886&host=hydra.aviasales.ru&locale=ru&currency=rub&destination=IEV&destination_name=%D0%9A%D0%B8%D0%B5%D0%B2» charset=«UTF-8»></script>
</div>
</div>

В коде используются следующие стили:

  • width — определяет ширину области, которую будет занимать блок с виджетами и один виджет;
  • float — расположение виджетов относительно друг друга;
  • margin — отступы между виджетами.

Результат размещения данного кода будет таким:

 


Подробнее о работе со стилями узнайте на сайте htmlbook.ru.

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

Еще есть вопросы? Отправить запрос