Aviasales search form (old version)

General information 

The Travelpayouts Partnership Platform offers various tools. This article will guide you through setting up and hosting search forms for flights.

To create a search form for airline tickets, go to the Programs section, select Aviasales, open the Tools tab, and click on Search Form.

Then click the Create new search form button to create a form and Edit to edit the form. You can configure the appearance and contents of the search form from here.

mceclip0.png

Main properties

mceclip1.png

mceclip2.png

  • Form size can be flexibly configured, with the ability to set any width from 200px to 940px.
  • The search form can be configured to be a search form for flight tickets only, for flight tickets and hotels, or for hotels only. 
  • The form is available in seven bundled color themes. You can also manually specify a color for the form (changing the color of the background, border, text, icons, and buttons).
  • The upper part of the form contains a logo (which can be disabled if necessary). We don't recommend hiding the logo since our trademark increases the trust placed in forms and, therefore, improves conversion rates. In addition, when the logo is clicked, a Travelpayouts ID (a cookie) is placed on the user’s device, meaning that all sales from the logo are counted for our partners.
  • The form is available in English, Russian, German, French, Spanish, and Italian.

Note! The search form code already contains your affiliate ID in encrypted form, so you don't need to add anything else.

To track the ratio of profitable clicks to the total number of clicks for different forms on different websites or pages, add a unique SubID, which is displayed in the statistics on your dashboard page.

If you need a unique form that fully “meshes” with your design, use HTML. HTML and CSS knowledge is necessary for this kind of customization. You can learn more about it here.

 

The full code of the search form

You can pre-set the values in the search form fields using the full code of the search form. To get the full code, clear the checkbox Short code.

mceclip3.png

 

Here’s an example of the full code of the search form:

<script charset="utf-8" type="text/javascript">
    window.TP_FORM_SETTINGS = window.TP_FORM_SETTINGS || {};
   window.TP_FORM_SETTINGS["0fcc950b8759491dfa491f3a878ad2fa"] = {
"handle": "0fcc950b8759491dfa491f3a878ad2fa",
"widget_name": "Test form",
"border_radius": "2",
"additional_marker": null,
"width": 940,
"show_logo": true,
"show_hotels": true,
"form_type": "avia_hotel",
"locale": "en_us",
"currency": "usd",
"sizes": "default",
"search_target": "_blank",
"active_tab": "avia",
"search_host": "search.jetradar.com",
"hotels_host": "search.hotellook.com",
"hotel": "",
"hotel_alt": null,
"avia_alt": null,
"retargeting": true,
"trip_class": "economy",
"depart_date": null,
"return_date": null,
"check_in_date": null,
"check_out_date": null,
"no_track": false,
"powered_by": true,
"source_id": 170736,
"id": 276955,
"marker": XXXXX,
"origin": {
"name": ""
},
"destination": {
"name": ""
},
"color_scheme": {
"name": "white_blue",
"icons": "icons_blue",
"background": "#ffffff",
"color": "#000000",
"border_color": "#c1c1c1",
"button": "#1b9ed9",
"button_text_color": "#ffffff",
"input_border": "#ffffff"
},
"hotels_type": "hotellook_host",
"best_offer": {
"locale": "en_us",
"currency": "usd",
"marker": 11501,
"search_host": "search.jetradar.com",
"offers_switch": false,
"api_url": "//minprices-jetradar.aviasales.ru/minimal_prices/offers.json",
"routes": []
},
"hotel_logo_host": null,
"search_logo_host": null,
"hotel_marker_format": null,
"hotelscombined_marker": null,
"sources": [
{
"id": 498,
"name": "Personal"
}
],
"responsive": false,
"height": 245
};
</script>
<script charset="utf-8" src="//www.travelpayouts.com/widgets/0fcc950b8759491dfa491f3a878ad2fa.js?v=2259" async></script>

Parameters of the search form

  • handle — a unique ID form (can’t be modified!)
  • widget_name — form name
  • border_radius — specifies the radius of rounded borders
  • additional_markeradditional marker
  • width — width of form
  • show_logo — if true, displays a logo of Aviasales
  • show_hotels — if true, displays the hotels search tab
  • form_type — type of form:
    • avia — flight tickets only
    • hotel — hotels only
    • avia_hotel — mixed form
  • locale — language of the form (cannot be changed without re-saving the form in the Personal Area, since translations are written in the JS code of the form)
  • multi_city — if true, activates multi-city search
  • currency — select the currency to display in search results
  • sizes — defines the size of the form (not in use at the moment)
  • search_target — defines how the search opens (_blank — on a new tab, _self — in the same window)
  • search_in_iframe — true: opens the search results on the page with an embedded White Label iframe, false: standard method, the search results page is opened on the domain/page specified in the search_host field
  • active_tab — name of the active tab by default
  • search_host — website where the flight search results are displayed (can be specified in your White Label). Note! To open the search results page on the page with the White Label embedded in the iframe, you should create and configure a White Label, add its iframe code on the required page, and paste the page address in this field. More about it here
  • hotels_host — website where hotel search results are displayed (can be specified in your White Label or a link to the page with the iframe code of White Label)
  • hotel — information about the default hotel
  • powered_by — adds a Powered by Travelpayouts link under the search form. Find out more in the article about our Referral program.
  • id — service parameter
  • marker — partner ID
  • origin — name or IATA code for point of departure. IATA code is displayed in uppercase letters, for example, NYC
  • destination — name or IATA code for flight destination. IATA code is displayed in uppercase letters, for example, LAX
  • color_scheme — the form's color scheme
  • hotels_type — service parameter
  • best_offer — settings of the Best Deals section (not in use at the moment)
  • hotel_logo_host — service parameter
  • search_logo_host — service parameter
  • hotel_marker_format — service parameter
  • hotelscombined_marker — service parameter
  • responsive — if true, makes the form responsive

Pay attention! If you are working with the full version of a code, you must make changes in the code directly on the page where it's embedded.

How to set dates in the Aviasales search form

In the short code of a search form, the departure date is usually equal to the current date (unless you’ve changed it in the settings). At the same time, in the full code of a search form, the date fields are empty by default. You can fix this by replacing depart_date and return_date with the following code:

 "depart_date": new Date().toISOString().slice(0, 10),
 "return_date": new Date(new Date().getTime()+(7*24*60*60*1000)).toISOString().slice(0, 10),

With the above code added, the departure date will be the current date and the return date plus seven days from the departure date.

How to add a tab to the Aviasales search form

By default, the Aviasales search form may be accompanied by a Hotellook search tab. To learn more about it, see the article entitled Search form.

This section is devoted to the process of adding another tab and placing the widget of any brand of the Travelpayouts Partnership platform.

Preparing the search form

First, you need to get a full search form code. To get the code, uncheck the Short code checkbox in the form settings (for more information, see the article about Editing search form code).

Example of search form code:

<script charset="utf-8" type="text/javascript">
window.TP_FORM_SETTINGS = window.TP_FORM_SETTINGS || {};
window.TP_FORM_SETTINGS["985437b11bec577746af671c9c8d812c"] = {
"handle": "985437b11bec577746af671c9c8d812c",
"widget_name": "Test Widget",
"border_radius": "2",
"additional_marker": null,
"width": 620,
"show_logo": true,
"show_hotels": true,
"form_type": "avia_hotel",
"locale": "en",
"currency": "usd",
"sizes": "default",
"search_target": "_blank",
"active_tab": "avia",
"search_host": "search.jetradar.com",
"hotels_host": "search.hotellook.com",
"hotel": "",
"hotel_alt": "Hotellook offers great deals and discounts on hotels worldwide",
"avia_alt": null,
"retargeting": true,
"trip_class": "economy",
"depart_date": null,
"return_date": null,
"check_in_date": null,
"check_out_date": null,
"no_track": false,
"powered_by": true,
"source_id": null,
"id": 239793,
"marker": 78606,
"origin": {
"name": ""
},
"destination": {
"name": ""
},
"color_scheme": {
"name": "white_blue",
"icons": "icons_blue",
"background": "#ffffff",
"color": "#000000",
"border_color": "#c1c1c1",
"button": "#1b9ed9",
"button_text_color": "#ffffff",
"input_border": "#ffffff"
},
"hotels_type": "hotellook_host",
"best_offer": {
"locale": "en",
"currency": "usd",
"marker": 78606,
"search_host": "search.jetradar.com",
"offers_switch": false,
"api_url": "//minprices-jetradar.aviasales.com/minimal_prices/offers.json",
"routes": []
},
"hotel_logo_host": null,
"search_logo_host": "jetradar.com",
"hotel_marker_format": null,
"responsive": false,
"height": 305
};
</script>
<script charset="utf-8" src="//www.travelpayouts.com/widgets/985437b11bec577746af671c9c8d812c.js?v=2103" async></script>

Place the resulting code on your website and check the correctness of the search form display. 

Additional tab

Let's now look at how to add the code of a new tab. After the closing tag </script> of the search form, add the following code (see a detailed description of the code mechanism and possible amendments to it below):

<script charset="utf-8" src="//www.travelpayouts.com/widgets/7d691de1732eecbd8b36df155619492e.js?v=2083" async></script>
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous">
</script>

<!-- START widget for a tab-->

<div class="widget-block"><script src="//tp.media/content?promo_id=4578&shmarker=11501&campaign_id=130&trs=1607&locale=en&powered_by=true&border_radius=5&plain=false&show_logo=true&color_background=%23f5d361&color_button=%235a9854" charset="utf-8"></script></div>

<!-- END widget for a tab-->


<!-- START script for adding a tab with an advertiser -->

<script>
window.onload = function() {
$('.mewtwo-tabs_list').append('<li class="mewtwo-tabs-tabs_list__item mewtwo-tabs-tabs_list__item--count3 mewtwo-tabs-tabs_list__item"><a class="widget-click"><span> Bus </span</a></li>');
$('.widget-block').appendTo('.mewtwo-widget');
$('.mewtwo-tabs-tabs_list__item--flights').click(function(e){
e.preventDefault();
$('.widget-block').hide();
$('.mewtwo-flights').removeClass('remove-w');
$('.mewtwo-hotels').removeClass('remove-w');
$('.mewtwo-tabs-tabs_list__item--count3').removeClass('mewtwo-tabs-tabs_list__item--active');
});
$('.mewtwo-tabs-tabs_list__item--hotels').click(function(e){
e.preventDefault();
$('.widget-block').hide();
$('.mewtwo-flights').removeClass('remove-w');
$('.mewtwo-hotels').removeClass('remove-w');
$('.mewtwo-tabs-tabs_list__item--count3').removeClass('mewtwo-tabs-tabs_list__item--active');
$('.mewtwo-tabs-tabs_list__item--count2').addClass('mewtwo-tabs-tabs_list__item--active');
});
$('.widget-click').click(function(e){
e.preventDefault();
$('.widget-block').show();
$('.mewtwo-flights').addClass('remove-w');
$('.mewtwo-hotels').addClass('remove-w');
$('.mewtwo-tabs-tabs_list__item--count3').addClass('mewtwo-tabs-tabs_list__item--active');
$('.mewtwo-tabs-tabs_list__item--count2').removeClass('mewtwo-tabs-tabs_list__item--active');
$('.mewtwo-tabs-tabs_list__item--count1').removeClass('mewtwo-tabs-tabs_list__item--active');
});
};
</script> 

<!-- END script for adding a tab with an advertiser -->


<!-- START style settings for a new tab -->

<style>
.widget-block{
display: none;
}

.mewtwo-widget section.remove-w{
display: none !important;
}

.mewtwo-widget--7d691de1732eecbd8b36df155619492e .mewtwo-tabs-tabs_list__item span {
color: #000000 !important;
LINE-HEIGHT: 50px !important;
width: 100%!important;
}

.mewtwo-widget--7d691de1732eecbd8b36df155619492e .mewtwo-tabs-tabs_list__item:last-child {
width: 100px !important;
text-align: center !important;
}
</style>

<!-- END style settings for a new tab -->

Pay attention to this block:

<!-- START widget for a tab-->

<div class="widget-block">><script src="//tp.media/content?promo_id=4578&shmarker=11501&campaign_id=130&trs=1607&locale=en&powered_by=true&border_radius=5&plain=false&show_logo=true&color_background=%23f5d361&color_button=%235a9854" charset="utf-8"></script></div>

<!-- END widget for a tab-->

It contains the code of the widget you need to place in the additional tab. It may contain not only the widget, but also a banner or text. The main thing is that the block needs to be placed between the tags <div class="widget-block"> ... </div>.

To change the text on the new tab, find the following section of code:

$('.mewtwo-tabs_list').append('<li class="mewtwo-tabs-tabs_list__item mewtwo-tabs-tabs_list__item--count3 mewtwo-tabs-tabs_list__item"><a class="widget-click"><span> Bus </span></a></li>');

You can set any tab name between the tags <span> Bus </span> (instead of Bus used in the example).

Link to code example: https://codepen.io/barcovsky/pen/poaXZKY.

Code analysis

This section will help you understand the mechanism of the code. It's useful if you need to change the work logics or add another tab.

Let us consider these parts of code.

window.onload = function() {
$('.widget-block').appendTo('.mewtwo-widget');
$('.mewtwo-tabs-tabs_list__item--flights').click(function(e){
e.preventDefault();
$('.widget-block').hide();
$('.mewtwo-flights').removeClass('remove-w');
$('.mewtwo-hotels').removeClass('remove-w');
$('.mewtwo-tabs-tabs_list__item--count3').removeClass('mewtwo-tabs-tabs_list__item--active');
});

One needs to activate the Flights tab (mewtwo-flights) on a click and show the plane ticket search form. The Hotels (mewtwo-hotels) tab and additional tab (widget-block) aren't active, and their content is hidden.

$('.mewtwo-tabs-tabs_list__item--hotels').click(function(e){
e.preventDefault();
$('.widget-block').hide();
$('.mewtwo-flights').removeClass('remove-w');
$('.mewtwo-hotels').removeClass('remove-w');
$('.mewtwo-tabs-tabs_list__item--count3').removeClass('mewtwo-tabs-tabs_list__item--active');
$('.mewtwo-tabs-tabs_list__item--count2').addClass('mewtwo-tabs-tabs_list__item--active');
});

One needs to activate the Hotels (mewtwo-hotels) tab on a click and show the hotel search form. The Flights (mewtwo-flights) tab and additional tab (widget-block) are not active, and their content is hidden.

$('.widget-click').click(function(e){
e.preventDefault();
$('.widget-block').show();
$('.mewtwo-flights').addClass('remove-w');
$('.mewtwo-hotels').addClass('remove-w');
$('.mewtwo-tabs-tabs_list__item--count3').addClass('mewtwo-tabs-tabs_list__item--active');
$('.mewtwo-tabs-tabs_list__item--count2').removeClass('mewtwo-tabs-tabs_list__item--active');
$('.mewtwo-tabs-tabs_list__item--count1').removeClass('mewtwo-tabs-tabs_list__item--active');
});
};

One needs to activate an additional tab (widget-block) and show its content. The Flights (mewtwo-flights) tab and Hotels (mewtwo-hotels) tab aren't active, and their content is hidden.

If you want to add a fourth tab, you can either get creative or contact the developer. At each stage, add the processing of another tab .mewtwo-tabs-tabs_list__item--count4 and create another step for displaying the content on a tab click. 

To change the design of the additional tab, edit the code in the following block:

<!-- START style settings for a new tab -->

<style>

.widget-block{
display: none;
}

.mewtwo-widget section.remove-w{
display: none !important;
}

.mewtwo-widget--7d691de1732eecbd8b36df155619492e .mewtwo-tabs-tabs_list__item span {
color: #000000 !important;
LINE-HEIGHT: 50px !important;
width: 100%!important;
}

.mewtwo-widget--7d691de1732eecbd8b36df155619492e .mewtwo-tabs-tabs_list__item:last-child {
width: 100px !important;
text-align: center !important;
}
</style>

<!-- END style settings for a new tab -->