Use these instructions to set up the popular destinations widget and place it on your website.      

A top-destinations list is a very useful instrument for ticketing. It's 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 retrieve its code for posting on your website, go to the Aviasales affiliate program, select Tools, and you'll find 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 checkbox to make the widget responsive.

Widget settings

The widget has the following settings:

• Projects — select the Project where the widget will be placed
• Your SubID — partner SubID
• Default destination — shows the city for which the top five flights list is formed
• Hosts — 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 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 Powered by Travelpayouts link under the search form. More details: Referral program.

After finishing the configuration, click Copy code and place the widget code on your website. Please note that if your website 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 in a row on a page, use the following code (here is an example for three widgets in a row):

<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>
<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>
<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>
</div>
</div>

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: