Setting up Aviasales and Hotellook landing page

In this article, you can find information about setting up Travelpayouts landing pages. The landing page code you can find here.

Setting up a landing page
How to set the departure and arrival city in the search form
The White Label setting for a landing page
Statistics

This article describes the process of customizing your flight tickets and hotel search landing pages. By default, the landings are designed to work with aviasales.com and hotellook.com services, but you can add any tools to them at your discretion.

Links to the source code of the pages can be found in the article Landings from Aviasales and Hotellook.

Setting up a landing page

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

var set_marker = '11501';

replace 11501 with your partner ID.

Set_cookies is a systemic parameter and does not affect the landing. It does not need to change.

Please note! This ID is not only just automatically inserted into the search form code, but also into all widgets placed on a landing page. That is why you should replace it, even if you want to place your own search form.

Create a search form in your affiliate’s dashboard. Clear the checkbox Short code and copy the search form handle-code:

Insert this code into the string:

var set_handle = "96070048c84676bf2e585f9f912b3ed7";

After that, the code is completely functional, and a landing page may be hosted. However, these are not the only settings. You may set it up default departure and destination cities in the search form or make it so that the search results open on your website’s subdomain .

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

If you want the departure and arrival city on your search form to be automatically filled in with a certain value, you need to make small changes to the code. To do this:

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 searchOrigin;
var searchDestination;

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

3. Insert needed 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.

You can now 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;

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

3. Substitute the desired 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.

You can now upload the landing to the hosting.

The White Label setting for a landing page

To set the White Label for a landing page, you will need to first create and set up the White Label.

Next, open the search form code (that was placed or will be placed on your landing page) in the affiliate’s dashboard and select the URLs of White Label in these fields:

Flights. Domain for flight results
Hotels. Domain for hotel results

The White Label shall be opened upon clicking on the widgets as well if you find the widgets’ code (they are marked with the inserts <!- add widget ->) in js/app.js. Specify your White Label address in the parameters host and searchUrl.

How to change the logo on the landing page

Find this part in the code of index.html:

2017-04-12 12.55.49.ubvse.png

and replace

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

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.