Виджет календаря низких цен Aviasales

Введение

Каждый, кто хоть раз покупал авиабилеты, сталкивался с такой ситуацией: стоимость билетов на разные даты может существенно отличаться. На цену влияет день недели, месяц и даже время года. Используя эти знания, путешественники существенно экономят на перелетах.

В своё время команда aviasales.ru создала «Календарь низких цен». В этом календаре отображаются самые дешёвые авиабилеты по выбранным направлениям на множество дат.

Календарь низких цен отлично зарекомендовал себя. Большое количество посетителей сайта aviasales.ru использует его в качестве отдельного поискового сервиса. Для наших партнёров разработан виджет, который позволяет разместить «Календарь низких цен» у себя на сайте.

mceclip0.png

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

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

mceclip1.png

Нажмите кнопку Настроить у виджета календаря. В открывшемся окне вы можете настроить работу календаря и его внешний вид.

mceclip0.png

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

В блоке Фильтр укажите город вылета и прилёта, которые будут выбраны по умолчанию в календаре. Если этого не сделать, то город отправления будет определяться по IP-адресу пользователя, а в качестве города назначения будет установлен Бангкок.

mceclip3.png

Дополнительно доступны следующие настройки:

  • В одну сторону — отметьте, если хотите получить цены для билетов в одну сторону.
  • Только прямые рейсы — отметьте, чтобы в календаре отображались цены для прямых рейсов.
  • Период — от параметра зависит, что будет отображаться в календаре: год или месяц.
  • Период, дни — количество дней по умолчанию, на которые рассчитывается поездка.

В блоке Оформление вы можете задать цвета виджета и его размеры:

mceclip4.png

Установите галку в чекбокс Резиновая, чтобы виджет автоматически подстраивался под размер доступной области на экране.

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

Пример работы виджета

 

Пара рекомендаций

  • Размещайте виджет в тематических статьях о конкретном городе или стране и указывайте этот город в виджете.
  • Используйте вместе с виджетом календаря виджет карты — это позволит не только показать разные даты, но и разные направления для перелётов.
  • Предлагайте вашим посетителям установить мобильные приложения поиска авиабилетов и отелей. При установке по вашей партнёрской ссылке пользователи закрепляются за вами навсегда и с каждой их покупки вы получаете вознаграждение.

Как встроить виджет календаря в Живой журнал

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

<lj-widget name="travelpayouts" marker="16686" origin="MOW" destination="LED" width="750" height="450">

где marker — партнёрский ID, указан в личном кабинете в правом верхнем углу. Остальные параметры соответствуют параметрам из основного кода виджета:

  • origin — город вылета по умолчанию (город, который будет установлен в календаре при первом открытии посетителем);
  • destination — город назначения по умолчанию;
  • currency — валюта, в которой отображается стоимость билетов;
  • width — ширина виджета;
  • searchUrl — если планируете разместить виджет на White Label и хотите, чтобы результаты открывались на вашем сайте, укажите в этом поле адрес White Label;
  • one_way — направление перелёта по умолчанию (false — туда-обратно, true — в одну сторону);
  • only_direct — только прямые рейсы;
  • locale — язык страницы с результатами поиска;
  • period — от параметра зависит, что будет отображаться в календаре: год или месяц;
  • range — количество дней по умолчанию, на которые рассчитывается поездка.

Как разместить календарь в проекте на React.js

При обычном размещении кода календаря в React.js проектах он иногда может не отображаться. Для решения этой проблемы рекомендуется использовать следующий код:

import React from 'react'

export default class AviasalesCalendar extends React.Component {

componentDidMount() { 
const script = document.createElement('script') 
script.src = '//www.travelpayouts.com/calendar_widget/iframe.js?marker=ВашID.&origin=IEV&destination=BKK&currency=rub&searchUrl=hydra.aviasales.ru&one_way=false&only_direct=false&locale=ru&period=year&range=7%2C14&powered_by=true&width=800' 
script.charSet = 'utf-8' 
script.async = true 
this.scriptTag.appendChild(script) 
}

render() { 
return ( 
<div ref={ref => (this.scriptTag = ref)} /> 
) 
} 
}

где в параметре script.src укажите ссылку на код скрипта вашего календаря из личного кабинета.