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

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

Внешний вид

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

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

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

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

Проекты — выберите проект, на котором будет размещен виджет.
Ваш Sub ID — дополнительный маркер (Sub ID) помогает разбираться в статистике. С его помощью можно, например, узнать, с какой страницы и какого виджета перешёл посетитель (подробнее про Sub ID).
Город прилета по умолчанию — указывается город, для которого формируется топ-5 популярных перелетов.
Домен — если планируете разместить виджет на White Label и хотите, чтобы результаты открывались на вашем сайте, укажите в этом поле адрес White Label.
Язык — на каком языке отображаются результаты (пока поддерживаются только русский и английский языки).
Валюта — тип валюты, в которой будет отображаться стоимость найденных билетов.
Количество предложений — задайте количество городов, которые будут отображаться в виджете.
Добавить реферальную ссылку — добавляет под формой поиска ссылку Поиск от Aviasales. Подробнее в статье Реферальная программа.

Чтобы встроить виджет на сайт, нажмите кнопку Скопировать код и разместите код на странице вашего сайта.

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

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

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

<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%9C%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%9C%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.

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