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

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

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

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

Так выглядит бот Durger King.
Так выглядит бот 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. Улучшилось взаимодействие с пользователями. 

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

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

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

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

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

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

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

Варианты перехода в Mini Apps из Телеграм-бота
Варианты перехода в Mini Apps из Телеграм-бота

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.

Комментарии (3)


  1. sogarkov
    24.09.2024 12:31

    Вы не боитесь, что в какой-то несчастливый день этот third party в виде Телеграм лишит вас доступа к вашим аккаунтам (причины не важны)?


    1. gegius Автор
      24.09.2024 12:31

      Мы ничего не боимся


      1. gegius Автор
        24.09.2024 12:31

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