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. Click Customize button.

mceclip0.png

In the opened window you can set up the calendar and its appearance.

mceclip1.png

  • Sources — select the traffic source where the widget will be placed
  • Your Sub ID — use this option to collect detailed statistics (for details on Sub ID)
  • 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
  • Language — the language of the displayed results
  • Currency — the type of currency in which the price of found tickets will be displayed
  • Add my referral link — adds a link Powered by Travelpayouts under the search form. More details in the article Referral program.

mceclip2.png

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:

  • One way — select if you need only one way price
  • Only direct flights — select if you need price for direct flights
  • Range — period of the calendar: year or month
  • Range, days — the range of days during which the trip will be taking place.

mceclip3.png

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.

To place a widget in your site, click Copy code and paste the code into your 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