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 and have an active subscription.

To create and set up White Label:

1. Open your Travelpayouts account.

2. Open the White Label section and select WL Web. At the top of the screen, you'll see the expiration date of your subscription.

If you don’t have a subscription yet

If you haven’t subscribed yet, click the Subscription options button to choose a plan and make a purchase.

Check out the What is White Label Web from Travelpayouts, to learn more about the solutions and the difference between types.

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. In the Your website domain field, enter the URL of the page of your website where you want to place the widget without http, and click Next.
  2. A Project for your website will be created automatically. 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.

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. Place the code from step 3 on that page.
  2. Additionally, add the following code on the same page, specifying the URL of the page where the search results should be displayed in the resultsURL parameter: 
<script ... /> <!-- embed code -->
<script>
  window.TPWL_CONFIGURATION = {
    ...window.TPWL_CONFIGURATION,
    resultsURL: 'URL of the target page'
  };
</script>

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