Используйте инструкцию, чтобы настроить виджет популярных направлений и разместить его на сайте.
Список популярных направлений — очень полезный инструмент в продаже билетов. Он активно используется в форме поиска и в виде отдельного 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¤cy=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¤cy=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¤cy=rub&destination=IEV&destination_name=%D0%9A%D0%B8%D0%B5%D0%B2" charset='UTF-8'></script>
</div>
</div>
В коде используются следующие стили:
- width — определяет ширину области, которую будет занимать блок с виджетами и один виджет;
- float — расположение виджетов относительно друг друга;
- margin — отступы между виджетами.
Подробнее о работе со стилями узнайте на сайте htmlbook.ru.
Результат размещения данного кода будет таким: