Партнерский медиа-виджет "Лучшая цена" с biletix.ru

Для отображения виджета на странице необходимо разместить два элемента:

1. Код виджета (можно демонстрировать до 10 разных виджетов на странице): <div class="biletix_widget_container__best" data-wiget-type="media" 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" data-theme="media" 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. Дополнительные параметры в тэге виджета:

- data-disable-css="true" - отключение загрузки дефолтного css. Пример: <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. Отсылаемые виджетом события:

- __biletix__widget__was_loaded (идентификатор события) - событие окончания загрузки виджета (получена лучшая цена). Данные внутри события (по ним можно понимать какой виджет загружен если проставить data-channel разные для всех виджетов): { "detail": elem.getAttribute("data-channel") }