How to add a hotel search or any other widget to your White Label

Important!

This setting is only available for White Labels with the "Page" type. If you’re using “Widget” type, you can’t apply this setting.

Learn more about the difference between White Label Web types here.

You can add additional widgets, such as a hotel search widget, below the search form on the main page of your White Label Web. This allows users to book accommodation right from your site.

For example, it can look like this:

To add widgets:

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

2. Open the Custom HTML code tab.

3. Find the tpwl__content tag (by default, it contains the popular destinations widget)

<div class="tpwl__content">
            <h3>Popular destinations</h3>
            <div id="tpwl-widget-weedles" class="tpwl-widget-weedles">
                <div class="tpwl-widget-weedle" data-destination="IST" is="weedle"></div>
                <div class="tpwl-widget-weedle" data-destination="DXB" is="weedle"></div>
                <div class="tpwl-widget-weedle" data-destination="MOW" is="weedle"></div>
                <div class="tpwl-widget-weedle" data-destination="LAS" is="weedle"></div>
                <div class="tpwl-widget-weedle" data-destination="NYC" is="weedle"></div>
                <div class="tpwl-widget-weedle" data-destination="LON" is="weedle"></div>
            </div>

4. Inside this tag, you can paste the code of any widget you want to display.

You can find the widget code on the brand program page in your Travelpayouts account. More on this in the article: How to customize a widget and insert it on your website.

You can also add a heading for the widget using the <h3></h3> tag. For example:

<h3>Hotel search</h3>
     <script async
     src="https://tp.media/content?currency=usd&trs=1607&shmarker=11501&show_hotels=true&powered_by=true&locale=en&primary_override=%23FF8E01&color_button=%23FF8E01&color_icons=%23FF8E01&secondary=%23FFFFFF&dark=%23262626&light=%23FFFFFF&special=%23C4C4C4&color_focused=%23FF8E01&border_radius=5&plain=false&promo_id=7873&campaign_id=101"
     charset="utf-8"></script>

5. In the final code, it will look like this:

You can learn how to configure the popular destinations widget in this article.