Настройка 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. 

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

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

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

Домен

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

  1. Выберите проект с сайтом, где будет вставлен виджет и буду отображаться результаты поиска. 

     
  2. Укажите основной язык и валюту (дополнительные вы сможете указать позже);
  3. Нажмите Сохранить и обновить.

Содержание

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

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

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

Дизайн

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

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

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

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

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

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

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

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

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

Если нужно отображать результаты на другой странице:

1. Скопируйте дополнительный код ниже и разместите его в том же теге <script></script>, что и основной код и пункта 1 выше. 

Дополнительный код:

<script ... /> -> код вставки
<script>
window.TPWL_CONFIGURATION = {
 ...window.TPWL_CONFIGURATION,
resultsURL = 'URL нужной страницы';
};
</script>

Пример, как должен выглядеть основной код:

<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 нужной страницы",
        };
      })();
    </script>

2. Вставьте код <div id="tpwl-tickets"></div> в тег head той страницы, где должны отображаться результаты поиска. 

При необходимости на ней можно дополнительно добавить <div id="tpwl-search"></div> , если кроме результатов сверху должна отображться поисковая форма.

Готово! 
Обратите внимание. Страница с результатами поиска будет открываться в той же вкладке.

Как добавить 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