Widget popular routes

Widget popular routes

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

Enter your personal partner account to create and adjust the widget.

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

Widget settings

The widget has the following settings:

  • Default destination – shows the city for which the top-five flights list is being formed;
  • Host – 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 (Russian and English are supported so far);
  • Currency – the currency in which the cost of tickets will be shown.

Copy the code from the “GET CODE” block and place it on your website. The widget will then be built into your website.

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.ru&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.ru&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.ru&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:

   

   

   

Was this article helpful?

Have more questions? Submit a request