Для отображения виджета на странице необходимо разместить два элемента:
1. Код виджета (можно демонстрировать до 10 разных виджетов на странице):
<div class="biletix_widget_container__best" data-from="Москва" data-to="Прага" data-date="3.02.2015" data-channel="widget_position_1"></div>
Подсвеченные параметры отвечают за направление (data-from и data-to) и дату вылета (data-date).
Параметр даты вылета может быть опущен или оставлен пустым, в таком случае поиск будет производиться с учетом вылета завтрашним днем.
Параметр data-channel используется для отображения в статистике переходов — в нем можно отразить местоположение конкретного виджета (посмотреть пример).
2. Скрипт для загрузки виджетов (поместить в конец страницы, перед закрывающим тегом </body>):
<script type="text/javascript" id="biletix_widget_best_price" src="https://ps.biletix.ru/static/widget/build/biletix_widget_best_price.min.js" async></script>
3. Стилизация виджета:
В таблице стилей (.css) вы можете переопределить любой графический элемент виджета.
Например, стилизация цвета кнопки (в синий #00a) производится добавлением следующего фрагмента кода:
/* обычное состояние кнопки */ a.biletix_widget_container__best__submit { background: #00a; border-color: #00a; } /* на кнопку наведен курсор */ a.biletix_widget_container__best__submit:hover { color: #00a; } /* кнопка покупки вдавлена */ a.biletix_widget_container__best__submit:active { background: #007; color: #55a; }4. Дополнительные параметры в тэге виджета:
<script type="text/javascript" id="biletix_widget_best_price" data-disable-css="true" src="https://ps.biletix.ru/static/widget/build/biletix_widget_best_price.min.js" async></script>
- data-wl-base="http://ps-beta.biletix.ru/demo/wl/" - указание url расположения WhiteLabel, в котором будут отображаться результаты поиска (первым вариантом будет вариант, отображаемый на виджете). Пример:
<div class="biletix_widget_container__best" data-from="Москва" data-to="Стамбул" data-wl-base="http://ps-beta.biletix.ru/demo/wl/"
data-date="" data-channel="test_channel"></div>
- data-alt-domain="ps-beta.biletix.ru" - указание на домен, по которому определяется логин партнёра
(в случае использования виджета на одном домене, а привязке продаж к другому домену). Пример:
<div class="biletix_widget_container__best" data-from="Москва" data-to="Стамбул" data-alt-domain="ps-beta.biletix.ru"
data-date="" data-channel="test_channel"></div>
5. Отсылаемые виджетом события:
{ "detail": elem.getAttribute("data-channel") }