Travelpayouts: перезапустили инструмент для поиска авиабилетов

Главное о кейсе

Travelpayouts — крупнейшая аффилиатная платформа для тревел-индустрии, через которую партнеры по всему миру зарабатывают на продаже авиабилетов и отелей. Один из ключевых продуктов компании — White Label-сервис, позволяющий любому — от тревел-блогера до крупного медиа — встроить на свой сайт поиск авиабилетов под собственным брендом.
Однако продукту было уже больше 10 лет: устаревший интерфейс, неактуальные API и ограниченные настройки снижали конверсию и вызывали жалобы клиентов. Travelpayouts решила провести полный редизайн и технологическое обновление, чтобы сделать White Label современным, гибким и масштабируемым решением.
Наша команда подключилась на этапе разработки и полностью отвечала за фронтенд. Мы создали новый виджет на React, добавили широкие возможности кастомизации, поддержку 61 языка и гибкую интеграцию на любые сайты без ущерба стилю.

Как проект изменил жизнь пользователей

После обновления сервис стал современным, гибким и по-настоящему удобным инструментом для партнеров.

1. Настройка стала no-code. Партнеры теперь могут менять цвета, шрифты, кнопки и фон прямо в личном кабинете без участия разработчиков. Все изменения сразу отображаются в виджете.

2. Больше гибкости. Можно выбрать, как разместить поисковую форму и результаты — на одной странице или на разных, чтобы встроить виджет в структуру сайта максимально органично.

3. Виджет поддерживает 61 язык, включая арабский. Переводы подгружаются автоматически в зависимости от локации пользователя.

4. Единый визуальный стиль. Благодаря Shadow DOM виджет корректно отображается на любых сайтах, не конфликтует со стилями партнёров и всегда выглядит аккуратно.

Раньше White Label требовал больше ручных правок и технических знаний, теперь же это готовое решение, которое экономит время. Партнеры быстрее запускают свои площадки, а пользователи получают более приятный и интуитивный опыт поиска авиабилетов.

Бизнес-задача и ее решение

Задача:
Перезапустить устаревший White Label-сервис, сохранив его основную логику, но полностью обновив UX, UI и архитектуру. Цель — повысить конверсию и доход клиентов (а значит, и доход Travelpayouts, т.к. модель работы — revenue share).

Решение:
1. Полностью переписали фронтенд на React, обеспечив стабильную работу на тысячах внешних сайтов.
2. Реализовали изоляцию стилей через Shadow DOM, чтобы избежать конфликтов с дизайном сайтов-партнеров.
3. Настроили связь с личным кабинетом Travelpayouts: партнер может сам собрать свой виджет без помощи разработчиков.
4. Интегрировали систему локализации Crowdin и автоматическую подгрузку переводов (61 язык).
5. Добавили гибкие сценарии отображения поисковой формы и результатов — на одной или разных страницах.

Крафт (мастерство), реализация, технические детали

Мы работали параллельно с core-разработкой, маркетингом и продуктом Travelpayouts.
Что сделали технически:
- Реализовали виджет через Shadow DOM, что позволило полностью изолировать стили и обеспечить одинаковое отображение на любых внешних сайтах;
- Настроили no-code кастомизацию через личный кабинет: любое изменение instantly отражается в виджете;
- Провели интеграцию с Crowdin, доработав механизм синхронизации переводов вручную, когда автоматизация давала сбои;
- Провели RTL-адаптацию для арабского языка, переработав стили и компоненты, чтобы интерфейс выглядел корректно и эстетично даже при изменении направления текста;
- Решили конфликты старого и нового API, сохранив совместимость и обеспечив плавный переход.

Инсайты, гипотезы, процесс создания и взаимодействия с заказчиком

Локализация. Crowdin оказался негибким. Мы использовали его для перевода интерфейса, но столкнулись с рядом технических трудностей. Crowdin должен автоматически отправлять изменения переводов в Git, но по факту эта автоматизация не работала. При изменении переводов много времени приходилось тратить просто на доставку этих обновлений до Git. Какие-то языковые изменения не хотели прогружаться в код, и приходилось их вручную синхронизировать — это приводило к задержкам и дополнительной нагрузке на команду.

Еще одной сложностью стала адаптация верстки под арабский язык. Чтобы не получилось, как в данетке: в арабском городе установили щит с рекламой прохладительного напитка, разделенный на 3 фото. На первом фото — человек в пустыне, умирающий от жары. На втором — этот же человек пьет напиток. На третьей — счастливо улыбается. Все бы хорошо, но арабы читают справа налево.

Вот и нам для поддержки арабского языка потребовалась дополнительная работа по адаптации верстки. Простое автоматическое переключение направления текста делало виджет некорректным: скругленные углы элементов отображались неправильно, и общий вид портился. Мы переработали стили и структуру виджета, чтобы отображение на арабском языке было корректным, и сохранилась эстетичность интерфейса.

Скриншоты