Popular routes widget

A top-destinations list is a very useful instrument for ticketing. It is actively used in the search form and in the form of a separate csv-file. With the help of the Top destinations widget, this list can be shown in any part of a website.

External view

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


The widget size can be fixed or automatically adjusted according to the screen resolution (or the space allocated for it). Select the Responsive check box to make the widget responsive.

Widget settings

The widget has the following settings:


  • Projects — select the project where the widget will be placed
  • Your Sub ID — partner Sub ID
  • Default destination — shows the city for which the top-five flights list is being formed
  • Hosts — specify the White Label address in this field if you wish to place the widget on the White Label and the results were opened on your website
  • Language — the language in which the results are shown
  • Currency — the currency in which the cost of tickets will be shown
  • Number of flights — set the number of cities to be displayed in the widget
  • Add my referral link — adds a link Powered by Travelpayouts under the search form. More details in the article Referral program

After finishing the configuration, click the Copy code and place the widget code on your website. Please note that if your site is powered by WordPress you can use our plugin to host widgets and other affiliate tools.

How to place multiple widgets on the page

To place multiple widgets on the page in a row, use code like this (here is an example of placing three widgets):

<div style='width: 100%; float: center;'>
<div style='float: left; width: 30%; margin: 5px;'>
<script async src="//www.travelpayouts.com/weedle/widget.js?marker=16886&host=hydra.aviasales.com&locale=en&currency=usd&destination=BKK&destination_name=Bangkok" charset="UTF-8"></script>
<div style='float: left; width: 30%; margin: 5px;'>
<script async src="//www.travelpayouts.com/weedle/widget.js?marker=16886&host=hydra.aviasales.com&locale=en&currency=usd&destination=LON&destination_name=London" charset="UTF-8"></script>
<div style='float: left; width: 30%; margin: 5px;'>
<script async src="//www.travelpayouts.com/weedle/widget.js?marker=16886&host=hydra.aviasales.com&locale=en&currency=usd&destination=PAR&destination_name=Paris" charset="UTF-8"></script>

In the code use the following styles:

  • width — specifies the width of the area in which widgets will occupy the unit
  • float — the widgets to each other
  • margin — padding between widgets

The result of the placement of the code would look like this: