Как мы перенесли web-сервис в Телеграм Mini Apps

До лета 2023 года перед разработчиками Точка.Нетворк стояла проблема: CJM становился сложным, и это затрудняло работу над продуктом. В итоге мы придумали решение — полностью отказались от веба и сосредоточили развитие платформы только в Mini Apps от Телеграма. Без этого было бы невозможно развивать продукт дальше.

В статье расскажу, как и почему мы отказались от веб-версии Точка.Нетворк — локального сообщества предпринимателей — и переместились в Телеграм.

Mini Apps работает на основе стандартных веб-технологий: HTML, CSS и JavaScript. Интеграция происходит через API Telegram, который позволяет обмениваться данными с Телеграм-ботом. Всё это даёт возможность бесшовно использовать мессенджер с существующими системами и сервисами. 

Изначально предполагалось, что Mini Apps будут использовать в основном интернет-магазины. Для демонстрационных целей команда Телеграма даже сделала специального бота — Durger King.

Однако разработчики и создатели продуктов стали использовать Mini Apps шире и разворачивать в webview полноценные сайты, не ориентированные на продажи: например, обучающие курсы. Примерно тем же путем пошли и мы.

Предпосылки к переносу сервиса в Телеграм

В основе Точка.Нетворк лежит платформа для общения и знакомств для предпринимателей. Изначально она создавалась как веб-сайт с функционалом мэтчинга. Развивали её по принципу “mobile-first”, потому что большинство наших пользователей использовали её с мобильных устройств. Поиск пути упрощения авторизации привёл нас к Телеграму, и мы создали бота. Авторизация проходила так: пользователь попадал со страницы входа, мы верифицировали его через бота и перебрасывали обратно на сайт. Так пользователям не нужно было придумывать логин и пароль.

Следующим шагом стали использовать бота для сервисных рассылок: например, отправляли уведомления о подборе собеседников. Также продублировали в webview функционал вкладки «Собеседники» и «Отзывы».  

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

Болело и у нас — разработчиков. Нужно было постоянно держать в голове, откуда зашёл пользователь, куда его дальше перекинет. CJM становился сложным и затруднял работу над продуктом. Поэтому летом 2023 года решили полностью отказаться от веба и сосредоточить развитие платформы только в Телеграме.

Нюансы перехода в Telegram

Переход сервиса в Телеграм-бот проходил постепенно. Самым сложным и важным было определиться, что показываем в Mini App, а что останется только в боте. В итоге решили завернуть всю статичную и справочную информацию в веб-приложение. Оно скрывается под кнопкой «Меню», которую переименовали в «Кабинет», а динамическая информация и рассылки продолжают приходить в Телеграм-бота. 

Таким образом, в Mini App переехал новый функционал: 

• поиск по всем участникам сервиса, 

• список популярных вопросов — FAQ,

• страница с собеседниками, рекомендованными за всё время.

В качестве главной стандартной страницы Mini App выступала страница поиска.

Вызвать Mini App можно было не только по кнопке «Кабинет». Мы воспользовались надстройкой Телеграма и добавили в бота «горячие клавиши» для быстрого доступа к функционалу, спрятанному в Mini App: поиску по всей базе участников, собственному профилю, FAQ. Но оказалось, что кнопки в нижнем меню бота не могут передавать нам информацию о том, что это за пользователь. 

То есть по клику на кнопку «Кабинет», которая запускает наш Mini App, Телеграм передаёт его ID в Телеграме и ник, а при клике на кнопки в нижнем меню бота не передаёт.

Мы решили эту проблему отправкой буферного сообщения в бота с кнопкой открытия webview.

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

Переход осуществлялся через кнопки со стрелками. Под каждым предложением разместили ещё три кнопки: посмотреть профиль собеседника, написать ему и отметить, что пользователь «не подходит».

Добиться идеальной «карусели» получилось не с первого раза. Например, сначала была стрелка для листания только в одну сторону и не было нумерации собеседников. Из-за этого пользователи не понимали, что им пришло шесть карточек, а не одна.

Кстати, в первых версиях под «каруселью» было не три кнопки, а четыре — в том числе «Как начать диалог», которая запускала функцию генерирования приветствий с помощью ChatGPT. Подробнее о ней писала на Хабре моя коллега Елена Володина.

Что поменяли: 

• Добавили вторую стрелку, чтобы «карусель» можно было листать в обе стороны.

• Вставили нумерацию для карточек в подборке.

• Убрали кнопку с ChatGPT и перенесли её на второй шаг «карусели» — теперь показываем её под профилем, который открыл пользователь.

Также пришлось изменить механику кнопки «Написать собеседнику», по нажатию которой планировалось, что пользователь перейдёт в его Телеграм-аккаунт и сможет отправить сообщение. 

Проблема заключалась в том, что Телеграм не передаёт нам информацию о нажатии на кнопку «Написать собеседнику». Так появлялось «слепое пятно»: мы не понимали, с кем пользователь реально связался или хотя бы сделал попытку. Пришлось переименовать кнопку в «Получить контакт». По нажатию на неё следующим сообщением приходила мини-карточка с кнопкой «Написать собеседнику» и кнопкой «Сгенерировать приветствие с помощью ChatGPT». 

При нажатии на «Получить контакт» мы отправляем отбивку и тому пользователю, чей контакт запросили. Это полезно по двум причинам: 

• Мы предупредили собеседника, что ему может написать человек из Нетворка.

• Если по какой-то причине собеседник не напишет сам, встречу сможет инициировать второй человек.

Самым сложным оказалось перенести в Mini App анкету участника, которую заполняет пользователь.

Первая проблема заключалась в том, что перемещение анкеты в Mini Apps ломало атрибуцию трафика. Webview в Телеграме воспринимается Яндекс.Метрикой как новый браузер, и связка между браузером, из которого пользователь попал к нам в бота, с браузером webview разрывалась. Это мешало нам понимать конверсию: какие люди зашли на лендинг, кто из них заполнил анкету и стал пользователям сервиса. Было непонятно, какой из источников трафика работает лучше. Правильная настройка Яндекс.Метрики также заняла у нас много времени.

Вторая проблема была связана с айфонами. Так как Mini Apps на iOS использует Safari, возникли дополнительные нюансы: например, при установке фокуса на поле ввода Safari «подводит» пользователя на центр свободного пространства над клавиатурой. Но в Mini Apps он это делал только визуально. По факту вы видели на экране поле ввода, а текст отображался выше. Даже после скрытия клавиатуры, когда Safari должен вернуть всё на место, этого не происходило. Из-за этого, если на странице были какие-то кнопки – нажатия, на них не регистрировались, так как отрисовка кнопок происходила ниже их реального положения.

Подобных проблем было немного, но чтобы их починить, пришлось сделать множество правок в общебанковский ui-kit.

Итоги перехода

1. Улучшилось взаимодействие с пользователями. 

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

2. Сократили time2market и стали быстрее доводить задачи до прода.

3. Улучшили показатели обратной связи от пользователей.

4. Смогли заметно расширить функционал платформы поиском, чатами, календарём мероприятий — так увеличили активность в сервисе на 42% год к году.

Несколько советов по работе с Telegram Mini Apps

1. Используйте initData для управления доступом и авторизацией

При разработке Mini Apps важно, чтобы авторизация пользователей была безопасной. Для проверки их подлинности используйте initData. У пользователя есть несколько точек входа в Mini Apps: inline button, bot menu button, inline mode, direct link, attachment menu (keyboard button).

initData передаётся во всех случаях, кроме keyboard button. Проверка подлинности осуществляется на вашем сервере путём расшифровки initData и сравнения её с ожидаемыми значениями.

2. Локальная разработка

Увы, экран Mini Apps в Телеграм всегда имеет маленький размер, что предъявляет особые требования к дизайну. Для локальной разработки Mini Apps рекомендую почитать эту статью. При желании можно провернуть всё с помощью ngrok без использования self-sign-сертификатов.

3. Экспериментируйте со встроенными кнопками – MainButton, BackButton и SettingsButton

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

4. Используйте showAlert, showPopup, showConfirm для организации уведомлений и диалогов с пользователями 

Они ограничены в кастомизации, но вам не потребуется реализовывать эти окна самим.

5. Одной из полезных функций является HapticFeedback 

Она добавляет вибрацию при нажатии на элементы вашего интерфейса. Посмотреть, как это работает, можно у бота @yoldi_hapticfeedback_bot.