1. Приклад роботи віджету

Вступ

Кожен, хто хоч раз купував квитки, стикався з такою ситуацією - вартість квитків на різні дати може істотно відрізнятися. На ціну впливає день тижня, місяць і навіть пору року. Використовуючи ці знання мандрівники істотно економлять на перельотах.

Ми вирішили допомогти нашим користувачам і свого часу створили « Календар низьких цін ». У цьому календарі відображаються найдешевші авіаквитки за обраними напрямками на безліч дат.

Календар низьких цін відмінно зарекомедовала себе. Його використовують як окремий пошуковий сервіс велику кількість відвідувачів нашого сайту. Для наших партнерів розроблений віджет , Який дозволяє розмістити «Календар низьких цін» у себе на сайті.

налаштування віджета

Щоб налаштувати віджет і отримати його код для розміщення на сайті, перейдіть в розділ « Віджет календаря »В особистому кабінеті партнера.

В першу чергу, встановіть зовнішній вигляд календаря, задавши його ширину (Widget Width). Віджет вміє підлаштовуватися під розмір сторінки, для цього встановіть галку в чек-боксі "Гумова".

Вкажіть місто вильоту і прильоту, які будуть вказані за умовчанням в календарі. Якщо цього не зробити, то місто відправлення буде визначатися за IP адресою користувача, а місто призначення буде Бангкок.

Додатково доступні наступні настройки:

• В одну сторону - відзначте, якщо хочете отримати ціни для квитків в одну сторону;
• Тільки прямі рейси - відзначте, щоб в календарі відображалися за недотримання встановлених Законом рейсів;
• Хост - якщо плануєте розмістити віджет на White Label і хочете щоб результати відкривалися на вашому сайті, виберіть в цьому полі адреса White Label;
• Валюта - тип валюти, в якій буде відображатися вартість знайдених квитків;
• Мова - якою мовою відображаються результати ( список підтримуваних мов );
• Додатковий маркер - використовуйте цей параметр, для збору детальної статистики ( докладніше про додаткове маркере );
• Період - від параметра залежить, що буде відображатися в календарі: рік або місяць;
• Період, дні - кількість днів за замовчуванням, на які розраховується поїздка;
• Додати реферальную посилання - додає під формою пошуку посилання Пошук від Aviasales. Детальніше в статті реферальная програма .

Щоб розмістити віджет у себе, скопіюйте код з блоку «Код для розміщення на сайті» і вставте на сторінку сайту.

Приклад роботи віджету

пара рекомендацій

• Розміщуйте віджет в тематичних статтях про конкретному місті чи країні і вказуйте це місто в віджеті.
• Використовуйте разом з віджетом календаря віджет карти - це дозволить не тільки показати різні дати, але і різні напрямки для перельотів.
• Пропонуйте вашим відвідувачам встановити мобільні додатки пошуку авіаквитків і готелів. При установці по вашої партнерської посиланням користувачі закріплюються за вами назавжди і з кожної їх покупки ви отримуєте винагороду.

Як вбудувати віджет календаря в Живий журнал

Щоб розмістити віджет календаря в Живому журналі, використовуйте наступний код:

<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 проектах він іноді може не відображатися. Для вирішення цієї проблеми рекомендується використовувати наступний код:

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 вкажіть посилання на код скрипта вашого календаря з особистого кабінету.