Setting up a White Label with Widget type

In this article, we’ll walk you through how to set up a White Label with the type Widget in your Travelpayouts account.

If you’re looking to set up a Page, check out this article: Setting up a White Label with Page type in your Travelpayouts account. To learn more about choosing the right White Label type, check the Travelpayouts White Label Web Setup Guide.

Note: To access White Label settings in your account, you must be registered on the Travelpayouts platform.

To create and set up White Label:

1. Open your Travelpayouts account.

2. Open the White Label section and select WL Web.

3. Click Create new.

4. Select Widget. 

5. A new page will open with several sections for setting up your White Label. Let’s go through each tab one by one.

Website domain

Start creating and setting up your White Label from this section.

  1. Select the Project with your website where you are planning to insert a White Label widget.
  2. Set the main language and currency (you’ll be able to add more languages and currencies later).
  3. Click Save and continue.

Content

In this tab, you can customize the destination for your widget as well as select additional languages and currencies.

  • Additional languages — choose the languages you want to show on the search page and in the results. They will appear in the dropdown menu above the search form.
  • Additional currencies — choose which currencies users can select in the search form and results. These currencies will also appear in the dropdown menu above the search form.
  • Pre-filled destination — set default departure and arrival cities that will automatically appear in the flight search form.
  • Show your Travelpayouts referral link — add a referral link below the search form. Anyone who signs up for Travelpayouts with this link will become your referral. You’ll earn 7% of each referral’s income for two years.
  • Show hotels — if this setup is enabled, when users search flights, they’ll be shown a Booking.com page with hotels at their destination. The flights open in a new tab, the hotels — in the initial tab.

Click Save and continue.

Design

In this tab, you can customize the font, border radius, and color scheme of your White Label widget.

You can customize the following colors by entering values in HEX format:

  • Tickers cards background
  • Button background
  • Links
  • Icons in the search form
  • Main text
  • Button text
  • Stroke color

Note: You can only choose fonts available in the dropdown list.

Click Save and continue.

How to place the widget on the website

You can copy the code of the White Label widget on the Your widget code tab: 

Follow these steps:

  1. Copy the main white-label code и place it between the tag <head> of your website code:
  2. Copy and insert the widget code on the page where you want the search form to appear.
  3. Copy and insert the search results code on the same page where you added the widget code. That way the search results will appear below the search form.

If you want the search results to appear on a different page:

1. Copy the additional code below and place it inside the same <script></script> tag as the main code from step 1 above.

Additional code:

<script ... /> -> код вставки
<script>
window.TPWL_CONFIGURATION = {
 ...window.TPWL_CONFIGURATION,
resultsURL = 'URL of the page where the results should be shown';
};
</script>

Example of how the main code should look:

<script data-noptimize="1" data-cfasync="false" data-wpfc-render="false">
      (function () {
        var script = document.createElement("script");
        script.async = 1;
        script.type = "module";
        script.src = "https://tpwgts.com/wl_web/main.js?wl_id=1";
        document.head.appendChild(script);

        window.TPWL_CONFIGURATION = {
          ...window.TPWL_CONFIGURATION,
          resultsURL: "URL of the page where the results should be shown",
        };
      })();
    </script>

2. Insert the following code <div id="tpwl-tickets"></div> in the <head> tag of the page where the search results should be displayed.

If needed, you can also add <div id="tpwl-search"></div> on that page so that the search form appears above the results.

How to add a cookie policy

To add a cookie policy to the website where you have placed the White Label widget, you have a few options:

1. Use a third-party service

There are ready-made solutions that let you add a cookie banner without coding. Popular services include:

  • Cookiebot
  • OneTrust
  • Osano

2. Add your own code to the site

Here’s an example of a simple cookie banner using HTML and JavaScript:

<div id="cookie-banner" style="position: fixed; bottom: 0; left: 0; width: 100%; background: #222; color: #fff; padding: 10px; text-align: center; font-size: 14px;"> We use cookies to improve your experience. <a href="/cookie-policy" style="color: #00AFDD; text-decoration: underline;">Learn more</a>. <button onclick="document.getElementById('cookie-banner').style.display='none'" style="margin-left: 10px; padding: 5px 10px; background: #00AFDD; color: white; border: none; cursor: pointer;">OK</button> </div>

This code creates a fixed banner at the bottom of the page with an "OK" button and a link to your cookie policy.

3. Use plugins (if the White Label is embedded in a CMS-based website)

If your White Label is integrated into a site built with WordPress, Joomla, or another CMS, you can install a plugin to handle cookie notifications. Examples include:

  • GDPR Cookie Consent
  • Cookie Notice & Compliance for GDPR/CCPA