How to add any banner or advertisement to White Label 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>