Aviasales calendar widget

To configure the Calendar widget and get its code for posting on your website, go to the Aviasales affiliate program, select Tools, and you'll find the Widgets section. Click the Set up button.

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

Projects — select the Project where the widget will be placed
Your SubID — use this option to collect detailed statistics (for details on SubID)
Host — if you plan to place the widget on a White Label and want to open the results on your website, enter the address of the White Label in this field
Language — the language of the displayed results
Currency — the currency in which the price of tickets found will be displayed
Add my referral link — adds a Powered by Travelpayouts link under the search form. More details: Referral program.

Enter the departure and destination city, which will be shown 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 following options are available:

One way — select if you need only one way price
Only direct flights — select if you need price for direct flights
Range — calendar period: year or month
Range, days — the length of the trip

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 Responsive checkbox.

To place a widget on your website, 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 routes to destinations.

Example of a 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=usd&searchUrl=hydra.aviasales.com&one_way=false&only_direct=false&locale=en&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 you specify a link to the script code of your calendar from your personal account.