How to customize a widget

Many brands at Travelpayouts have customizable widgets. That means that you can change the style and title or choose the values that will be shown in the fields of the widget by default. This article will guide you through the process of setting up customizable widgets.

Note! Posting third-party codes on Facebook and other social networks is prohibited. We recommend using affiliate links for working with social networks.

Setting up Widgets 

Note! To work with the widgets, you must be signed up for Travelpayouts and connect to at least one of the programs from the catalog.

1. Go to the affiliate program page, open the Tools tab, and go to the Widgets section.

2. Click the Set up button on the desired widget.

3. A two-part form will be displayed:

  • On the left side are the settings of the widget.
  • On the right side is the preview, which allows you to see exactly how the widget will look on the site. When you change one of the settings on the left side of the form, the preview on the right will be instantly updated to reflect the changes.

4. Make needed changes to the widget. Basic parameters found in widget settings (each widget has its own set of customizable fields) can include:

  • Width
  • Background color (HEX — format)
  • The color of the substrate under the shape
  • Colors of the sections
  • Backlight color
  • Automatically start a search
  • Country of travel
  • The beginning of the trip
  • End of the trip
  • Number of tourists
  • Type of display (horizontal/vertical)
  • Animation
  • Number of lines
  • Number of columns
  • The width of the cell
  • Appearance — tiles
  • Additional content

If there is a checkbox titled «start search automatically» in the widget settings, then you can start the search automatically when you open a page with a widget. To start the auto search, you need to specify:

  • Country of travel
  • The beginning of the trip
  • The end of the trip
  • Number of tourists

4. If there are several Projects connected to the program, select the desired one from the drop-down list in the Project field.  If necessary, set the SubID as well.

5. Copy the code of the final widget by clicking on the Copy code button at the bottom of the page. 

6. Paste the widget code to the code of your webpage, for example:


Now all purchases made using your widgets will bring you rewards. You will be able to see this information in the Reports section of your account. Read more in the Travelpayouts reports overview article.