Hotellook search form

General information

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

To create a search form for hotels, go to the Programs section, select Hotellook program, open the Tools tab and click on Search Forms.

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.

unnamed.png

Main properties

unnamed__1_.png

unnamed__2_.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 hotels only, for hotels and flight tickets, and for flight tickets 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, an affiliate marker (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 partner ID in encrypted form, you do not need to add anything else.

To track the ratio of profitable clicks to the total number of clicks for different forms on different sites 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 customization. You can learn more about this 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 it, clear the checkbox Short code.

2022-07-11_02-28-52.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": "hotel",
"search_host": "search.jetradar.com",
"hotels_host": "search.hotellook.com",
"hotel": "",
"hotel_alt": "",
"avia_alt": "",
"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": 170736,
"name": "My project"
}
],
"responsive": false,
"height": 245
};
</script>
<script charset="utf-8" src="//www.travelpayouts.com/widgets/0fcc950b8759491dfa491f3a878ad2fa.js?v=2259" async></script>

Parameters of 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 Hotellook
  • show_hotels — if true, displays 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 — responsible for 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 link Powered by Travelpayouts under the search form. Find out more in the article about our Referral program
  • id — service parameter
  • marker — affiliate 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)
    • locale — locale of the
    • currency — currency of the offers
    • search_host — website where the results are displayed
    • offers_switch — whether to display the section (true/false)
  • 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 Hotellook search form

In the short code of a search form the check-in 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 check_in_date and check_out_date with the following code:

 ""check_in_date"": newDate().toISOString().slice(0, 10),
""check_out_date"": newDate(newDate().getTime()+(7*24*60*60*1000)).toISOString().slice(0, 10),

With the above code added, the check-in date will be the current date and the check-out dated plus seven days from the check-in date.

How to create your own search form for Hotellook

At the request of our partners, we’ve created a new search form template through which one can create an absolutely unique hotels 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:

<divid="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 (for the flight tab) — 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 (for the flight tab) — the default point of destination. Both an IATA code and a city name may be used
  • default_hotel_location — 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:

Important notice!

The following problem may occur when using the search form: the search doesn’t start automatically when you’re directed to Hotellook/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 Hotellook 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 Hotellook search form

By default, the Hotellook search form may be accompanied by a Aviasales 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:

<scriptcharset="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>
<scriptcharset="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):

<scriptcharset="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-->

<divclass="widget-block"><scriptsrc="//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 block:

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

<divclass="widget-block">><scriptsrc="//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 -->