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

mceclip0.png

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

mceclip1.png

  • Projects — select the project 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 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.

mceclip2.png

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, daysthe length of the trip

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