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.
Main properties
- 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 sub ID, 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.
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_marker — additional 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 create your own search form for Aviasales
At the request of our partners, we've created a new search form template through which one can create an absolutely unique airline ticket search form for your website.
This form supports jQuery 1.х & 2.х.
Important note: The template is offered as-is and can be adjusted by the partner. As we don’t provide developing services, please consider hiring a freelancer if you cannot adjust the template by yourself.
You can download the archive with the template here.
The archive includes:
- Images — the folder with the icons used in the search forms
- few_forms.html — the file template, which includes the code with examples of different types of search forms
- jquery.js — a file required for the template's functioning
- jquery.twidget.js — the file with the JS code of a search form. This file also includes the code example for localization of the search form’s fields
- reset.css, style.css — the style files
Invocation of a search form in the website code
The following code is used to post a search form on a website:
<div id="twidget" class="twidget-container"> </div>
<script>
$('#twidget').twidget({
locale: 'en',
marker: 1234,
default_origin: 'NYC',
default_destination: 'LAX',
default_hotel_location: 'rio'
});
</script>
Where twidget is the search form code invocation parameter.
Search form adjustment parameters
The following parameters can be assigned to a search form at its creation:
- locale — the search form language. It also affects the search results language
- marker — the affiliate ID
- default_origin — the default point of departure. Both an IATA code and a city name may be used. At the same time, an incomplete name may be entered — the autocomplete function will offer the required city
- default_destination — the default point of destination. Both an IATA code and a city name may be used
- default_hotel_location (for the hotel tab) — the default city in a hotel search form
- type — the search form type:
- avia — airline tickets only
- hotel — hotels only
- avia_hotel — a combined form (can be switched using tabs, the default value)
- open_in_new_tab — opens the search results in a new tab (the default value is true)
An example of search form implementation
A project on Github contains examples of search forms: https://github.com/tp-search-form/. A page example has been created for each repository. You can change any parameters and see the results of such changes. Examples of search forms include:
- Search for flights and hotels (English)
- Search for hotels (English)
Important notice!
The following problem may occur when using the search form: the search doesn't start automatically when you're directed to Aviasales/White Label. To fix this, you should comment on this string of code (jquery.twidget.js): container.find('input[name="with_request"]').remove();. Here is an example:
/* remove with_request input from aviasales form */
if(this.settings.locale == 'en') {
/* container.find('input[name="with_request"]').remove();*/
container.find('input[name="oneway"]').remove();
}
jquerytwidget.zip (800 KB)
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 -->