How to set up the popular routes widget (to) and place it on your website.                          

The Popular routes widget is a very useful tool for ticketing. The widget uses a top-destinations list. With the help of the widget, this list can be shown in any part of a website.

External view

To configure the widget and get its code for posting it on your platform, go to the WayAway affiliate program, select Tools and then the Widgets section. Click Set up.

Widget settings

The widget has the following settings:

• Project — select the Project where the widget will be placed.
• Your SubID — your affiliate SubID (additional ID).
• Default destination — shows the city for which the top-five flights list is being formed.
• Language — the language in which the search results will be shown.
• Currency — the currency in which the tickets cost will be shown.
• Number of routes — 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. Find more details in the article about our Referral program.
• Widget width — specify the width (in px) of the widget on a webpage.
• Responsive — select the Responsive checkbox to make the widget responsive.
• Primary color — customize the colors of the widget in HEX format.

After finishing the configuration, click Copy code and place the widget code onto 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 one page

To place multiple widgets on one 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 src="//tp.media/content?currency=usd&promo_id=7291&shmarker=11501&campaign_id=200&trs=1607&locale=en&limit=6&powered_by=true&secondary=%23B9A0FD&destination=LAX" charset="utf-8"></script>
</div>
<div style='float: left; width: 30%; margin: 5px;'>
<script src="//tp.media/content?currency=usd&promo_id=7291&shmarker=11501&campaign_id=200&trs=1607&locale=en&limit=6&powered_by=true&secondary=%23B9A0FD&destination=LON" charset="utf-8"></script>
</div>
<div style='float: left; width: 30%; margin: 5px;'>
<script src="//tp.media/content?currency=usd&promo_id=7291&shmarker=11501&campaign_id=200&trs=1607&locale=en&limit=6&powered_by=true&secondary=%23B9A0FD&destination=BKK" 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 will look as follows: