This article describes the appearance settings for the old version of White Label Web.

To configure the current version of White Label, please use [this guide]. You can learn more about the differences between versions [here].

How to add menu to the header

To add links to the White Label header like in the picture above:

1. Open White Label settings in your Travelpayouts account by launching the Aviasales or Hotellook Tools tab.

2. Open the Sections tab.

3. Add the following code to the Site header block at the top:

 <header itemscope="" itemtype="http://schema.org/WPHeader" role="banner">
 <div class="header__inner">
 <nav>
 <ul class="header__menu">
 <li><a href="#">Link 1</a></li>
 <li><a href="#">Link 2</a></li>
 <li><a href="#">Link 3</a></li>
 </ul>
 </nav>
 </div>
 </header>

4. Specify the link to the desired site in the href parameter by replacing # with the correct link. Replace "Link 1" with your link text. You can delete unnecessary links or insert more, for example:

5. Add a design for the menu items in the header. This can be done in two ways:

• add a <style> tag to the Site header block and place the code below in it.
• insert the code in the Styles tab in the Customize CSS Styles section.

The second option is convenient because you will be able to keep all styles in one place and the Sections tab will not be overloaded with code. Also, in this option, you do NOT need to add a <style> tag.

The code for the design:

<style> 
 /* START styles for header */
 header .header__inner {
 width: 960px;
 margin: 15px auto;
 }
 header ul.header__menu{
 margin: 0;
 padding: 0;
 }
 header .header__menu li{
 list-style: none;
 display: inline-block;
 margin-right: 30px;
 }
 header .header__menu li a{
 text-transform: uppercase;
 font-size: 16px;
 font-weight: bold;
 text-decoration: none;
 color: #00AFDD;
 }
 header .header__menu li a:hover{
 opacity: 0.8;
 }
 @media (max-width: 960px) {
 header .header__inner {
 width: 100%;
 margin: 15px;
 }
 }
 /* END styles for header */
</style>

You can change the style as you like. If you lack knowledge of CSS, find a freelance developer who can help you.

The Site header block should look like this when both the main code and the design code are included:

6. Click Save and Update to save the changes.

How to add menu to the footer

1. Open White Label settings in your Travelpayouts account by launching the Aviasales or Hotellook Tools tab.

2. Open the Sections tab.

3. Add the following code to the Site footer block:

<footer>
 <div class="footer__inner">
 <nav>
 <ul class="footer__menu">
 <li><a href="#">Link footer 1</a></li>
 <li><a href="#">Link footer 2</a></li>
 <li><a href="#">Link footer 3</a></li>
 </ul>
 </nav>
 </div>
</footer>

4. Specify the link to the desired site and the link text in the href parameter.

5. Add a design for the menu items in the footer. This can be done in two ways:

• add a <style> tag to the Site footer block and place the code below in it.
• insert the code in the Styles tab in the Customize CSS Styles section.

The second option is convenient because you will be able to keep all styles in one place and the Sections tab will not be overloaded with code. Also, in this option, you do NOT need to add a <style> tag.

The code for the design:

<style> 
 footer .footer__inner {
 width: 950px;
 margin: 15px auto;
 }
 footer ul.footer__menu{
 margin: 0;
 padding: 0;
 }
 footer .footer__menu li{
 list-style: none;
 display: inline-block;
 margin-right: 30px;
 }
 footer .footer__menu li a{
 text-transform: uppercase;
 font-size: 16px;
 font-weight: bold;
 text-decoration: none;
 color: #00AFDD;
 }
 footer .footer__menu li a:hover{
 opacity: 0.8;
 }
 @media (max-width: 960px) {
 footer .footer__inner {
 width: 100%;
 margin: 15px;
 }
 }
</style> 

You can change the style as you like. If you lack knowledge of CSS, find a freelance developer who can help you.

The Site footer block should look like this when both the main code and the design code are included:

6. Click Save and Update to save the changes.

How to add a banner or advertisement to the search results

Travelpayouts White Label has the ability to add widgets, banners, and affiliate links from advertisers. In this article, we will talk about how to add any code to the search results (between flights or hotels).

To display any text, banner, or advertisement (for example, from Google) in the White Label search results:

1. Open White Label settings in your Travelpayouts account by launching the Aviasales or Hotellook Tools tab.

2. Open the Sections tab.

3. At the bottom of the code block Site footer, add the following code:

<!-- START connect the library for processing jquery -->
<script
 src="https://code.jquery.com/jquery-3.3.1.min.js"
 integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
 crossorigin="anonymous"></script>
<!-- END connect the library for processing jquery -->

<div id="append-block"></div>
<script>
 $(function(){
 $("div#append-block").click(function(){

 //check the fifth block in the flights search results, if we have it, display advertising after it, if not, display after the first block  

  if ($(".ticket:nth-child(5)").length > 0) {
    if ($(".ticket--with-labels").length > 0) {
        $("div.dpt-block-1").show();
        $(".ticket--with-labels").before($("div.dpt-block-1"));
    }
    if ($(".ticket:nth-child(4)").length > 0) {
        $("div.dpt-block-2").show();
        $(".ticket:nth-child(4)").after($("div.dpt-block-2"));
    }
    if ($(".layout-manager").length > 0) {
        $("div.dpt-block-3").show();
        $(".layout-manager").append($("div.dpt-block-3"));
    }
    if ($(".ticket:nth-child(7)").length > 0) {
        $("div.dpt-block-4").show();
        $(".ticket:nth-child(7)").after($("div.dpt-block-4"));
    }
  } else {
    if ($(".ticket--with-labels").length > 0) {
        $("div.dpt-block-1").show();
        $(".ticket--with-labels").before($("div.dpt-block-1"));
    }
    if ($(".ticket:nth-child(1)").length > 0) {
        $("div.dpt-block-2").show();
        $(".ticket:nth-child(1)").after($("div.dpt-block-2"));
    }
    if ($(".layout-manager").length > 0) {
        $("div.dpt-block-3").show();
        $(".layout-manager").append($("div.dpt-block-3"));
    }
    if ($(".ticket:nth-child(1)").length > 0) {
        $("div.dpt-block-4").show();
        $(".ticket:nth-child(1)").after($("div.dpt-block-4"));
    }
  }

//check the fifth block in the hotels search results, if we have it, display advertising after it, if not, display after the first block
  if ($(".search-results-cards-wrapper-card:nth-child(5)").length > 0) {
    if ($(".search-results-cards-wrapper-card:first-child").length > 0) {
        $("div.dpt-block-1").show();
        $(".search-results-cards-wrapper-card:first-child").before($("div.dpt-block-1"));
    }
    if ($(".search-results-cards-wrapper-card:nth-child(4)").length > 0) {
        $("div.dpt-block-2").show();
        $(".search-results-cards-wrapper-card:nth-child(4)").after($("div.dpt-block-2"));
    }
    if ($(".search_results-wrapper").length > 0) {
        $("div.dpt-block-3").show();
        $(".search_results-wrapper").append($("div.dpt-block-3"));
    }
    if ($(".search-results-cards-wrapper-card:nth-child(7)").length > 0) {
        $("div.dpt-block-4").show();
        $(".search-results-cards-wrapper-card:nth-child(7)").after($("div.dpt-block-4"));
    }
  } else {
    if ($(".search-results-cards-wrapper-card:first-child").length > 0) {
        $("div.dpt-block-1").show();
        $(".search-results-cards-wrapper-card:first-child").before($("div.dpt-block-1"));
    }
    if ($(".search-results-cards-wrapper-card:nth-child(1)").length > 0) {
        $("div.dpt-block-2").show();
        $(".search-results-cards-wrapper-card:nth-child(1)").after($("div.dpt-block-2"));
    }
    if ($(".search_results-wrapper").length > 0) {
        $("div.dpt-block-3").show();
        $(".search_results-wrapper").append($("div.dpt-block-3"));
    }
    if ($(".search-results-cards-wrapper-card:nth-child(1)").length > 0) {
        $("div.dpt-block-4").show();
        $(".search-results-cards-wrapper-card:nth-child(1)").after($("div.dpt-block-4"));
    }
  }

});

//emulate a click to initiate the display of ads
 setTimeout(function(){
 $("div#append-block").click();
 }, 9000);
});
</script>

4. To change the contents of a block, edit the code located between the div tags with the dpt-block classes:

<div class="dpt-block-1" style="display:none">
//Here you can place any code or text.
</div>

This is how to place the banner code with a link to the advertiser’s website:

<div class="dpt-block-1" style="display:none">
<a target="_blank" href="https://c45.travelpayouts.com/click?shmarker=78606&promo_id=1300&source_type=banner&type=click"><img src="https://c45.travelpayouts.com/content?promo_id=1300&shmarker=78606&type=init" alt="728x90" width="728" height="90"></a>
</div>

How to add a slider

To make your White Label from Travelpayouts more visually appealing and informative - add an image slider to the top of it. In the slider, you can display banners with information about travel brands and other useful things. Users will be able to scroll through the tabs of the slider and find additional valuable information. For example:

Preparing for the addition of a slider

First, add the jquery library connection code to make everything work correctly.

1. Open the White Label settings and go to the Sections tab.

2. At the bottom of the code block Site footer, place the following code:

<script
 src="https://code.jquery.com/jquery-3.3.1.min.js"
 integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
 crossorigin="anonymous">
</script>

Please note! The jquery library connection code is only added once. If you add other tools to your White Label (for example a pop-up or information block), you do not need to re-insert the code.

Adding a slider

To add a slider, place the following code in the Site header block:

<div class="slider__block header__slider">
 <div class="slide slide_1">
 <div class="text__wrap_slider1">
 <span class="title">Get <br/> travel insurance <br/> without leaving home</span>
 <a href="#" title="" class="btn__slider_one">Choose a policy</a>
 </div>
 </div>
 <div class="slide slide_2">
 <div class="text__wrap_slider2">
 <span class="img"><img src="http://sem-dev.co.ua/WLNEW/level-travel-logo.png" alt=""/></span>
 <span class="title">Tiring vacation planning? <br/> Package tour - the best solution!</span>
 <a href="#" title="" class="btn__slider_two">View tours</a>
 </div></div>
</div>

Note! The code contains examples of sliders that can be added to the White Label. Please replace them with your own information.

Each <div class=«slide slide_1»>…</div> tag is a separate slider and you can add any number of them. The content of the slider should be put inside this tag: text, image, link.

• To add text to the slider, use the span tag with the title class. For example:

<span class="title">Get <br/> travel insurance <br/> without leaving home</span>

• To add an image to the slider, use the span tag with the img class and the img tag with a link to the image. For example:

<span class="img"><img src="http://sem-dev.co.ua/WLNEW/level-travel-logo.png" alt=""/></span>

Customizing the visual appearance

You can customize the appearance of the slider by adding the code below using one of the following options:

• insert the code to the Site footer block of the Sections tab.
• insert the code in the Styles tab in the Customize CSS Styles section.
  The second option is more convenient because you will be able to keep all styles in one place and the Sections tab will not be overloaded with code.
  

The example below shows the code for two sliders. You can change it as you wish, use it for additional sliders, or create your own code based on this example. If you lack knowledge of HTML, CSS, and JS, find a freelance developer who can help you. Don't forget to use tag <style>.

<style>  
  /* slyder */
    .slider__block {
        width: 1440px;
        height: 402px;
        background: #fff;
        overflow: hidden;
        margin: 0 auto;
    }

    /* the first slide */
    .slider__block .slide_1 {
        width: 100%;
        background: url('https://cdn.travelpayouts.com/marketing/kit_travel/bg-slide-1.jpg') no-repeat;
        height: 402px;
        background-position: center;
        position: relative;
    }

    /* the second slide */
    .slider__block .slide_2 {
        width: 100%;
        background: url('https://cdn.travelpayouts.com/marketing/kit_travel/bg-slide-2.jpg') no-repeat;
        height: 402px;
        background-position: center;
        position: relative;
    }

    .slider__block .slick-prev {
        left: 134px;
        z-index: 1;
        width: 56px;
        height: 56px;
    }

    .slider__block .slick-prev:before {
        background: url('https://cdn.travelpayouts.com/marketing/kit_travel/arrow-slide-left.png') no-repeat;
        height: 56px;
        width: 56px;
        background-position: center;
        opacity: 1;
        content: "";
        display: block;
    }

    .slider__block .slick-prev, .slider__block .slick-next {
        top: calc(50% - 29px);
    }

    .slider__block .slick-next {
        right: 134px;
        z-index: 1;
        width: 56px;
        height: 56px;
    }

    .slider__block .slick-next:before {
        background: url('https://cdn.travelpayouts.com/marketing/kit_travel/arrow-slide-right.png') no-repeat;
        height: 56px;
        width: 56px;
        background-position: center;
        opacity: 1;
        content: "";
        display: block;
    }

    .text__wrap_slider1 {
        position: absolute;
        top: 63px;
        left: 285px;
    }

    .text__wrap_slider1 .title {
        color: #fff;
        font-size: 38px;
        line-height: 45px;
        font-family: 'Roboto';
        font-style: normal;
        font-weight: 900;
    }

    .text__wrap_slider1 .btn__slider_one {
        font-size: 17px;
        line-height: 23px;
        font-family: Open Sans;
        color: #fff;
        border-radius: 8px;
        border: 1px solid #fff;
        padding: 11px 0;
        text-decoration: none;
        display: block;
        width: 195px;
        text-align: center;
        margin-top: 36px;
    }

    .text__wrap_slider1 .btn__slider_one:hover {
        opacity: .8;
    }

    .text__wrap_slider2 {
        width: 100%;
        text-align: center;
        margin-top: 70px;
    }

    .text__wrap_slider2 span.img {
        width: 100%;
        text-align: center;
        display: block;
    }

    .text__wrap_slider2 span.img img {
        display: inline;
    }

    .text__wrap_slider2 span.title {
        color: #fff;
        font-size: 38px;
        line-height: 45px;
        font-family: 'Roboto';
        font-style: normal;
        font-weight: 900;
        margin-bottom: 45px;
        width: 100%;
        display: block;
        margin-top: 12px;
    }

    .btn__slider_two {
        font-size: 17px;
        line-height: 23px;
        font-family: Open Sans;
        color: #262626;
        border-radius: 8px;
        border: 1px solid #FFE600;
        padding: 11px 25px;
        text-decoration: none;
        text-align: center;
        margin-top: 36px;
        background: #FFE600;
    }

    .text__wrap_slider2 .btn__slider_two:hover {
        opacity: .8;
    }

    /* styles to adapt the slider */
    @media (max-width: 1440px) {
        .slider__block {
            width: 100%;
        }
    }

    @media (max-width: 1199px) {
        .slider__block,
        .slider__block .slide_1 {
            height: 330px;
            background-size: auto 100%;
        }

        .slider__block .slide_2 {
            height: 330px;
        }

        .text__wrap_slider1 .title,
        .text__wrap_slider2 span.title {
            font-size: 32px;
            line-height: 38px;
        }

        .slider__block .slick-prev {
            left: 15px;
        }

        .slider__block .slick-next {
            right: 15px;
        }
    }

    @media (max-width: 991px) {
        .slider__block {
            margin-top: 60px;
        }

        .slider__block,
        .slider__block .slide_1 {
            height: 280px;
            background-size: auto 100%;
        }

        .slider__block .slide_1 {
            background-position-x: 70%;
        }

        .slider__block .slide_2 {
            height: 280px;
        }

        .text__wrap_slider2 {
            margin-top: 45px;
        }

        .text__wrap_slider1 {
            left: 90px;
        }

        .slider__block .slick-prev, .slider__block .slick-next {
            top: 50%;
        }
    }

    @media (max-width: 767px) {

        .slider__block .slick-prev:before, .slider__block .slick-next:before,
        .slick-next:before {
            height: 30px;
            width: 30px;
            background-size: 100% 100%;
        }

        .slider__block .slick-prev,
        .slider__block .slick-next {
            height: 30px;
            width: 30px;
        }

        .slider__block .slide_1,
        .slider__block .slide_2 {
            padding: 0 50px;
            display: flex !important;
            align-items: center;
            justify-content: center;
        }

        .slider__block .slide_1 {
            background-position-x: 0;
            background-size: 300% 150%;
        }

        .text__wrap_slider1 .title,
        .text__wrap_slider2 span.title {
            font-size: 26px;
            line-height: 30px;
        }

        .text__wrap_slider1 {
            /*margin-top: 40px;*/
            position: static;
            text-align: center;
        }

        .text__wrap_slider2 {
            margin-top: 0;
        }

        .text__wrap_slider1 .btn__slider_one {
            margin: 20px auto 0;
        }

        .text__wrap_slider2 span.title {
            margin-bottom: 35px;
        }
    }

    @media (max-width: 576px) {
        .text__wrap_slider1 .title,
        .text__wrap_slider2 span.title {
            font-size: 21px;
            line-height: 24px;
        }

        .slider__block {
            height: 253px;
            margin-bottom: 0 !important;
        }

        .slider__block .slide_1,
        .slider__block .slide_2 {
            display: block !important;
            padding: 40px 28px 0;
        }

        .slider__block .slide_2 {
            padding-top: 20px;
        }

        .text__wrap_slider2 span.title {
            margin-bottom: 25px;
        }

        .text__wrap_slider1 .btn__slider_one,
        .btn__slider_two {
            margin: 24px auto 0;
            padding: 12px 0;
            width: 100%;
        }


        .btn__slider_two {
            margin-top: 10px;
            display: block;
        }

        .text__wrap_slider2 span.title {
            margin-bottom: 0px;
        }

        .slider__block .slick-prev,
        .slider__block .slick-next {
            display: none !important;
        }

        .text__wrap_slider1 .title br {
            display: none;
        }

        .text__wrap_slider1 .title span {
            display: block;
            text-transform: uppercase;
        }

        .text__wrap_slider1 .title, .text__wrap_slider2 span.title {
            line-height: 26px;
            font-weight: 700;
        }

        .text__wrap_slider2 span.title {
            margin-top: 3px;
        }

        .header__slider .slick-dots {
            bottom: 20px;
            display: flex;
            justify-content: center;
        }

        .header__slider .slick-dots li button {
            display: none;
        }

        .header__slider .slick-dots li {
            margin: 0 8px;
            background: #333647;
            border: 1px solid #333647;
            border-radius: 42px;
            width: 8px;
            height: 8px;
            transition: 0.4s;
        }

        .header__slider .slick-dots li.slick-active {
            background: transparent;
        }
    }
</style> 

Add the style call on the Metadata tab to each page type:

<link rel="stylesheet" type="text/css" href="https://kenwheeler.github.io/slick/slick/slick.css" />
<link rel="stylesheet" type="text/css" href="https://kenwheeler.github.io/slick/slick/slick-theme.css" />

You can change the style and number of tabs as you like. If you lack knowledge of HTML, CSS and JS, find a freelance developer who can help you.

Displaying the slider

To display the slider, add the following code to the Site footer block:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.css" type="text/css">
<script src="https://kenwheeler.github.io/slick/slick/slick.js" crossorigin="anonymous"></script>

<script>
 window.onload = function() {
 //slick slider
 $('.header__slider').slick({
 dots: true,
 arrow: true
 });
 
 if ($(window).width() < 577) {
 $('html body .ducklett-widget .ducklett-widget-wrapper--slider').slick({
 dots: true,
 arrows: false,
 slidesToShow: 1,
 slidesToScroll: 1,
 });
 }
};
</script>

An example of a slider can be found here: http://kit.travel

You can change the style of the slider as you like. If you lack HTML, CSS, and JS knowledge, find a freelance developer who can help you.

How to add a logo image

White Label allows you to place the logo in the header.

To add your logo to the header of the White Label:

1. Open White Label settings in your Travelpayouts account by launching the Aviasales or Hotellook Tools tab.

2. Open the Sections tab.

3. In the Site header block paste the code <img src="URL"> instead of code: 

<span class="TPWL-header-content-logo__img"></span>

where the URL is a link to the file with your logo.

Important: If you need the logo to be displayed in different languages, make sure to add the code to all language blocks on the Sections tab. You can find all blocks' languages on the right side of the tab.

Note! The file must be available on the Internet from any computer, not only on your local drive. You can use images (.png, .jpeg) and .gif as a logo.

How to change the size of the logo?

You can resize your logo using the width and height attributes directly in the <img> tag. Here's how it works:

<img src="URL" width="100" height="111">

This will set the image’s width to 100 pixels and height to 111 pixels.

How to add a favicon

To add a favicon to the White Label page, open the Metadata section in the settings of White Label and post this string in the form:

<link rel = "shortcut icon" type = "image / x-icon" href = "PastHereLinkToFavicon">

Repeat adding code for each page type (Main, Avia result page, Hotels result page, Hotel preview page).

Note! The image should be available on the Internet, and not be only on your local computer.

How to add a background image

1. Open White Label settings in your Travelpayouts account by launching the Aviasales or Hotellook Tools tab.

2. You can add the image using one of the options:

• add a <style> tag to the Site header block of the Sections tab and place the code below in it.
  
  
• insert the code in the Styles tab in the Customize CSS Styles section.
  The second option is convenient because you will be able to keep all styles in one place and the Sections tab will not be overloaded with code. Also, in this option, you do NOT need to add a <style> tag.
  
  

The code:

<style> 
 body .TPWL-template-wrapper .TPWL-template-header,
 body div.TPWL-header-content {
   background: rgba(0, 0, 0, 0);
 }
 body {
   background-image: url(https://cdn.travelpayouts.com/marketing/kit_travel/bg-slide-1.jpg);
   background-repeat: no-repeat;
   background-size: 100% auto;
 }
 .TPWL-widget--serp .filters_layout {
     background-color: #fff !important;
     border: 1px solid rgba(0, 0, 0, .12) !important;
     border-radius: 4px !important;
     padding: 10px !important;
 }
 .TPWL-widget .search_results-wrapper #tpwl-subscription {
     margin-bottom: 20px!important;
 }
 .TPWL-widget .filters .only-button {
     background: 0 0!important;
 }
 .TPWL-widget .filters_layout>main,
 .TPWL-widget .slider_substrate::after {
     width: 200px!important;
 }
 .TPWL-widget .filters .right-text {
     background: none!important;
 }
</style> 

Link to the image that will be used as the background in brackets after the url parameter. 

Note! The image should be accessible from the internet and should not be on your local computer only.

How to change the height of iframe

If you use iframe for pasting White Label on your page, by default it has a height of 500px. This is done to correctly display all the controls - the choice of currency and language, the choice of dates, and the number of travelers.

To decrease the height of the White Label iframe, please add this code to page where you paste iframe:

<style>
#tpcwl_iframe { 
min-height: 200px !important; 
}
</style>

In the White Label settings on the Sections tab, add a <style></style> tag to the bottom of the Site footer block and place the following code inside the tag:

body.TPWL--iframe .page { 
min-height: 200px !important; 
}

How to change the font

To change the font of your Travelpayouts White Label:

1. Open the White Label settings in your Travelpayouts account.

2. You can change the font using one of the following ways:

• insert the code (you can find the code below) at the top of the Site header section:
  
  
• insert the code in the Styles tab in the Customize CSS Styles section.
  The second option is more convenient because you will be able to keep all styles in one place and the Sections tab will not be overloaded with code.
  

The code:

<style type='text/css'>
 body, .mewtwo-modal, .mewtwo-widget, .TPWL-widget, .mewtwo-tabs-tabs_list__item span, .mewtwo-widget span, .mewtwo-placeholder-label {
 font-family: Arial,sans-serif !important;
 }
</style>

4. Specify the font you want to use on the site in the font family parameter.

Please note! If you have selected several languages, then the code must be added for each language.

How to change the width of the search form