Setting up Aviasales and Hotellook landing page

This article describes the process of customizing your flight tickets and hotel search landing pages. Links to the source code of the landing pages can be found in this article.

By default, the landings include Aviasales and Hotellook search forms, which allow your users to search for the cheapest flight tickets and hotel offers. They can enter destination cities and dates on the landing page and after clicking search they will be redirected to aviasales.com or hotellook.com websites where the list of all available options will be present.

However, you can set up default departure and destination cities in the search form or make it so that the search results open on your White Label.

But first, you must ensure that your Travelpayouts ID is added to the landing page.

Primary setup and uploading to the hosting site

1. First, unpack the template file and find index.html.
2. In this file find the following string:

var set_marker = '11501';

3. Replace 11501 with your Travelpayouts partner ID. This is a very important step because all purchases made using your landing page will be attributed to your account using this ID.

Note: set_cookies is a systemic parameter and does not affect the landing, don’t change it.

4. After that, the code is completely functional, and a landing page may be hosted.

Now you can set up default departure and destination cities in the search form or make it so that the search results open on your White Label.

How to set the departure and destination city in the search form of the flight tickets

If you want the departure and arrival cities in the flight search form on the landing page to be automatically pre-populated with a certain value, you need to make some small changes to the code.

1. Open the app.js file in the js folder in the landing page's source code and find the  block there.

<!-- add form widgets -->
docReady(function() {
var searchOrigin;
var searchDestination;

The variable searchOrigin is the city of departure, and the variable searchDestination is the city of arrival.

2. Insert needed cities using the airport's IATA code, for example:

<!-- add form widgets --> 
docReady (function() { 
var searchOrigin = 'BCN'; 
var searchDestination = 'MAD';

In this case, the city of departure is Barcelona, and the city of arrival is Madrid.

3. Upload the landing to the hosting.

How to set a specific city in the hotel search form

If you want the city of the hotel location on your landing page to be automatically populated with a certain value, you need to make the following changes to the code:

1. Open the app.js file in the js folder in the source code of the landing page and find the  block there:

<!-- add form widgets -->
docReady(function() {
var searchDestination;

The variable searchDestination is the city in which you want the users to find hotels.

2. Insert needed values as the IATA code of the city, for example:

<!-- add form widgets -->
docReady (function() {
var searchDestination = 'BCN';

In this case, Barcelona is selected as the destination city, where the users should search for the hotels.

3. Upload the landing to the hosting.

The White Label setting for a landing page

To set up a White Label for a landing page, first create and configure the White Label itself.

Important! White Label must be configured on a subdomain.

To display search results from the landing page on your White Label, you need to replace the link address in all searchUrl fields in the app.js file with the White Label, address in the format www.travel.example.com/flights for flights and www.travel.example.com/hotels for hotels.

How to change the logo on the landing page

Find this part in the code of index.html:

and replace

<svg class = "icon-logo">
<use xlink: href = "# logo" />
</svg>

with your logo code:

<img src="HerePasteLinkToYourLogo">

Statistics

For statistics tracking the click-throughs to landing pages, use the Reports. You can use SubID to track statistics for a specific tool.