Calendar widget

To configure the Calendar widget and get its code for posting on your website, go to the Aviasales/Jetradar affiliate program, select Tools and there is the "Widgets" section.

First of all, set the appearance of the calendar by setting its width (Widget Width). The widget can be adjusted to the size of the webpage, to do this, select the check box Responsive.

Enter the city of departure and destination, which will be showing by default in the calendar. If this is not done, the city of departure will be determined by the user's IP address, and the destination city will be Bangkok.

Additionally, the available options are:

2018-08-16_17-53-56.png

  • One way - select if you need only one way price;
  • Only direct flights - select if you need price for direct flights;
  • Language - the language of the displayed results;
  • Host - if you plan to place the widget on the White Label and want to open the results on your site, enter in this field the address of the White Label;
  • Currency - the type of currency in which the price of found tickets will be displayed;
  • Additional marker - use this option to collect detailed statistics (for details on additional marker);
  • Period - period of the calendar: year or month;
  • Period, days - the range of days during which the trip will be taking place;
  • Add my referral link - adds a link Powered by Travelpayouts under the search form. More details in the article Referral program.

To place a widget in your site, copy the code from the block "Code for posting on the site" and paste into the html code of the website.

Recommendations

  • Place the widget in the thematic articles about a particular city or country, and specify the city in the widget.
  • Use the Calendar widget with the Maps widget - you can show the different dates and different directions to destinations.

Example of widget

How to place the calendar in a project on React.js

With the usual placement of the calendar code in React.js projects, it may sometimes not be displayed. To solve this problem you can use the following code:

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=YourMarker.&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)} />
)
}
}

where in the script.src parameter specify a link to the script code of your calendar from your personal account.

Was this article helpful?

Have more questions? Submit a request