Widget popular routes

Widget popular routes

A top destinations list is a very useful instrument in 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 in order 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 a city, for which the top-5 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 – a language, in which the results are shown (Russian and English are supported so far);
  • Currency – a currency, in which the cost of tickets will be shown.

Copy the code from the “GET CODE” block and place it on your website, after that the widget will be built in 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 uses the following styles:

  • width - specifies the width of the area that will occupy the unit with widgets and a widget;
  • float - the widgets to each other;
  • margin - padding between widgets.

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

   

   

   

Was this article helpful?

Have more questions? Submit a request