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

Введение

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

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

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

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

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

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

2018-08-16_17-05-37.png

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

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

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

2018-08-16_17-17-35.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=ВашМаркер.&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 укажите ссылку на код скрипта вашего календаря из личного кабинета.

Была ли эта статья полезной?

Еще есть вопросы? Отправить запрос