Настройка White Label с типом «Виджет» в личном кабинете

В этой статье мы рассмотрим, как настроить White Label с типом виджет в личном кабинете Travelpayouts. Если вам нужен White Label как отдельная страница, посмотрите эту статью: Настройка White Label c типом страница.

Больше о том как выбрать тип White Label вы найдёте в статье Руководство по настройке White Label Web от Travelpayouts.

Обратите внимание! Чтобы получить доступ к White Label в личном кабинете, вы должны быть зарегистрированы на платформе Travelpayouts и оформить подписку.

Чтобы создать и настроить White Label-виджет:

1. Откройте личный кабинет Travelpayouts;

2. Перейдите в раздел WL Web. В верхней части экрана вы увидите до какого числа у вас действует подписка;

Если нет подписки

Если вы ещё не оформили подписку, нажмите на кнопку Варианты подписки, чтобы выбрать подходящий вариант и приобрести его.

Обязательно прочитайте статью Что такое White Label Web от Travelpayouts, чтобы узнать больше про решение и доступные типы.

3. Нажмите кнопку Создать White Label.

4. Выберите тип Виджет.

5. Откроется страница, содержащая различные разделы для настройки вашего White Label. Рассмотрим каждую вкладку отдельно.

Домен

Начните создание и настройку White Label с этого раздела.

  1. В поле Ваш домен укажите ссылку на страницу вашего сайта, где будет вставлен виджет и буду отображаться результаты поиска и нажмите Дальше.
    Сссылка указывается без http/https (если используете кириллический домен, то указывайте его как есть, например, «билеты.рф»).
  2. Автоматически создастся проект для вашего сайта. Укажите основной язык и валюту (дополнительные вы сможете указать позже);
  3. Нажмите Сохранить и обновить.

Содержание

На этой вкладке вы можете настроить форму поиска, которая будет отображаться на вашем White Label, а также добавить языки и валюты.

  • Дополнительные языки — выберите из списка нужные языки, на которых должна отображаться страница с формой поиска и его результатами.
  • Дополнительные валюты — укажите валюты, которые пользователи смогут выбрать в форме поиска и результатов. Возможные варианты будут отображаться в выпадающем списке над поисковой формой.
  • Город вылета/назначения — можно указать город вылета и прилёта, которые будут указаны в полях формы поиска авиабилетов по умолчанию.
  • Реферальная ссылка под формой — под виджетом будет отображаться ссылка, с помощью которой другие пользователи смогут зарегистрироваться в Travelpayouts, как партнёры, и стать  вашими рефералами. Вы получаете 7% от заработка каждого реферала в течение 2 лет.

Нажмите Сохранить и обновить, чтобы сохранить изменения.

Дизайн

На вкладе можно изменить шрифт, скругление элементов и цветовую схему оформления White Label виджета.

Вы можете изменить следующие цвета, подставляя значения в формате HEX:

  • Фон карточек;
  • Фон кнопок;
  • Ссылки;
  • Иконки в форме;
  • Основной текст;
  • Текст на кнопках;
  • Цвет обводки.

Обратите внимание! Вы можете выбрать только те шрифты, которые доступны в выпадающем списке.

Нажмите Сохранить и обновить, чтобы сохранить изменения.

Как вставить виджет на страницу

Скопировать код для вставки можно на вкладке Код вставки.

Чтобы вставить виджет нужно выполнить следующие шаги:

  1. Скопировать основной код white-label решений и вставить его внутри тега <head> на вашем сайте.
  2. Скопировать и вставить код виджета на страницу, где будет находиться поисковая форма и будут отображаться результаты поиска.
  3. Скопируйте и вставьте код результатов поиска на ту же страницу, что указана в предыдущем пункте, чтобы результаты поиска отображались под поисковой формой.

    Если вы хотите, чтобы результаты поиска отображались на другой странице: 
    • Разместите на ней код из пункта 3 выше
    • Дополнительно разместите на ней следующий код и в параметре resultsURL укажите адрес страницы, где нужно отображать результаты поиска:
       
      <script ... /> -> код вставки
      <script>
      window.TPWL_CONFIGURATION = {
       ...window.TPWL_CONFIGURATION,
      resultsURL = 'URL нужной страницы';
      };
      </script>

Как добавить cookie policy

Чтобы сайт, где размещён виджет White Label от Travelpayouts, соответствовал требования GDPR и аналогичным законам, вам нужно самостоятельно разместить на странице cookie policy баннер. 

Как можно добавить баннер?

Вы можете реализовать cookie policy баннер несколькими способами:

1. Использование сторонних сервисов

Есть готовые решения, которые позволяют без программирования добавить баннер. Популярные сервисы:

  • Cookiebot
  • OneTrust
  • Osano

2. Добавление собственного кода на сайт

Пример кода для баннера cookie policy:

<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;">
    Мы используем файлы cookie для улучшения работы сайта. <a href="/cookie-policy" style="color: #00AFDD; text-decoration: underline;">Подробнее</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;">ОК</button>

Этот код создаёт фиксированный баннер внизу страницы с кнопкой «ОК» и ссылкой на политику cookie.

3. Использование плагинов (если White Label встроен в сайт на CMS)

Если ваш White Label используется внутри сайта на WordPress, Joomla или другой CMS, можно установить готовый плагин для уведомлений о cookie, например:

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