Telegram WebApp + бот: как запустить магазин внутри мессенджера
  • Telegram
  • Автор: Команда CrmAI
  • Опубликовано:
Telegram WebApp — магазин внутри мессенджера

История, которая случилась с моим знакомым — владельцем небольшого магазина корейской косметики. Он три года вёл продажи через Instagram: выкладывал фото товаров, отвечал в директ, принимал заказы голосовыми сообщениями, вручную записывал всё в блокнот. Знакомая картина? Бизнес рос, и в какой-то момент он понял, что тратит по шесть часов в день просто на переписку с клиентами. «Сколько стоит?», «Есть в наличии?», «Как оплатить?» — одни и те же вопросы по кругу.

Потом он услышал про Telegram Mini Apps. Сначала скептически отнёсся — «ну что там можно сделать в мессенджере». Но через месяц у него уже работал полноценный магазин прямо внутри Telegram: каталог с фильтрами, корзина, оформление заказа, оплата картой. Клиенты приходили из того же Instagram, но теперь вместо «напишите в директ» была кнопка «Открыть магазин». Результат? Время на обработку заказов сократилось втрое, а конверсия выросла на 40% — потому что люди перестали «отваливаться» на этапе переписки.

Эта статья — для тех, кто хочет повторить подобный результат. Мы разберём, что такое Telegram WebApp (они же Mini Apps), как создать магазин внутри мессенджера, какие есть подводные камни и ограничения, и когда эта технология действительно имеет смысл для бизнеса.

telegram-webapp-magazin-v-messendzhera-telegram-mini-apps.png

Что такое Telegram Mini Apps и почему это не просто «ещё один бот»

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

Представьте себе мобильное приложение, которое не нужно скачивать. Пользователь нажимает кнопку в чате с ботом — и перед ним открывается полноценный интерфейс: красивые карточки товаров, фильтры, корзина, форма заказа. Всё это работает быстро, выглядит нативно и не требует установки. Для бизнеса это означает отсутствие барьера «скачайте наше приложение» — того самого барьера, на котором теряется до 70% потенциальных клиентов.

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

Telegram активно развивает эту технологию. За последние пару лет появились Mini Apps для банков (Тинькофф, например), сервисов доставки, игр. Durger King (да, это не опечатка — они специально так назвали) запустил полноценный магазин мерча через Mini App. Это уже не эксперимент, а работающий канал продаж.

Почему магазин в Telegram — это удобно (и когда это имеет смысл)

Прежде чем бросаться делать магазин в Telegram, стоит понять: а нужно ли это вашему бизнесу? Mini Apps — не универсальное решение, но для определённых сценариев они работают отлично.

Главное преимущество — это контекст. Человек уже в Telegram, он привык там общаться, он доверяет этому приложению. Когда вы предлагаете ему что-то купить, не заставляя переходить на внешний сайт — конверсия растёт. Это подтверждается статистикой: по данным самого Telegram, конверсия в Mini Apps на 30-50% выше, чем при переходе на внешние сайты. Причина простая — меньше шагов, меньше трения.

Telegram Mini Apps хорошо работают, когда:

  • Ваша аудитория уже в Telegram. Если вы продвигаетесь через Telegram-каналы, чаты, рекламу в мессенджере — магазин внутри Telegram будет естественным продолжением.
  • У вас понятный каталог. До 50-100 товаров Mini App справляется отлично. Для огромных каталогов с тысячами SKU лучше полноценный сайт.
  • Цикл покупки короткий. Косметика, еда, подарки, билеты — то, что покупают импульсивно или регулярно. Для B2B с длинным циклом согласований Mini App вряд ли подойдёт.
  • Вам важна скорость запуска. Сделать Mini App можно быстрее, чем полноценный интернет-магазин. Это хороший вариант для MVP или тестирования гипотез.
  • Мобильная аудитория преобладает. Mini Apps оптимизированы под мобильные устройства и выглядят там нативно.

Когда Mini Apps не подойдут? Если ваша аудитория не в Telegram (например, возрастная категория 50+, которая сидит в Одноклассниках). Если вам нужна сложная логика — программа лояльности с уровнями, конфигуратор продуктов, сложные фильтры. Если критична SEO-оптимизация — Telegram-магазины не индексируются поисковиками. В этих случаях лучше классический сайт, а Telegram использовать как дополнительный канал.

Что можно сделать в Telegram-магазине: возможности и ограничения

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

Каталог товаров

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

Корзина и оформление заказа

Добавление/удаление товаров, изменение количества, подсчёт итоговой суммы. Форма с контактными данными и адресом доставки. Можно предзаполнять данные, если пользователь уже покупал раньше. Telegram передаёт имя и телефон пользователя (с его согласия), что упрощает оформление.

Платежи

Telegram Payments — встроенная система оплаты. Работает через платёжных провайдеров (ЮKassa, Stripe, и другие). Пользователь платит прямо в Telegram, не переходя на сторонние сайты. Деньги приходят вам на счёт за вычетом комиссии. Для России — с оговорками, об этом ниже.

Личный кабинет

История заказов, статус текущих заказов, сохранённые адреса. Можно реализовать программу лояльности с накоплением бонусов. Telegram даёт уникальный ID пользователя — это позволяет «узнавать» его при повторных визитах без явной авторизации.

Ограничения, о которых нужно знать

Telegram Mini Apps — это веб-приложения со своими особенностями. Вот что может вас ограничить:

Размер экрана. Mini App открывается в окне, которое занимает часть экрана (особенно на десктопе). На мобильных устройствах окно разворачивается почти на весь экран, но всё равно остаётся панель Telegram сверху. Проектируйте интерфейс с учётом этого — большие баннеры и сложные раскладки могут выглядеть не так, как хотелось бы.

Навигация. В Mini App нет привычного браузерного URL, нельзя открыть несколько вкладок. Вся навигация происходит внутри одного окна. Это нормально для линейных сценариев (каталог → товар → корзина → оплата), но сложные многоуровневые структуры могут запутать пользователя.

Офлайн-режим. Mini App требует интернета. Если связь пропала — приложение не работает. Нельзя сохранять данные локально так же надёжно, как в нативных приложениях. Это не критично для магазина, но стоит учитывать.

Важно про платежи в России

Telegram Payments через ЮKassa работает, но есть нюансы. Во-первых, нужен договор с ЮKassa (это несложно, но требует времени). Во-вторых, ЮKassa берёт комиссию около 3.5%. В-третьих, для некоторых категорий товаров есть ограничения. Альтернатива — вести на внешнюю платёжную страницу, но это добавляет шаг и снижает конверсию. Для небольших объёмов можно принимать оплату переводом на карту с подтверждением в боте.

Архитектура решения: из каких частей состоит Telegram-магазин

Чтобы понимать, что предстоит делать (или заказывать), давайте разберём архитектуру типичного Telegram-магазина. Она состоит из нескольких компонентов, каждый из которых выполняет свою роль.

Компоненты Telegram-магазина:

1
Telegram-бот

Точка входа для пользователя. Бот отправляет приветственное сообщение с кнопкой «Открыть магазин», обрабатывает команды (/start, /help, /orders), отправляет уведомления о статусе заказа. Создаётся через BotFather — это бесплатно и занимает пять минут.

2
Mini App (WebApp)

Веб-приложение с интерфейсом магазина. Это обычный фронтенд — HTML, CSS, JavaScript. Можно использовать любой фреймворк: React, Vue, просто jQuery. Главное — подключить Telegram WebApp SDK, который даёт доступ к данным пользователя и кнопкам Telegram.

3
Бэкенд (сервер)

Обрабатывает логику: хранит каталог товаров, принимает заказы, взаимодействует с платёжной системой, отправляет уведомления через бота. Может быть написан на чём угодно: Python, Node.js, PHP. Или использовать готовые платформы.

4
База данных

Хранит товары, заказы, данные пользователей. PostgreSQL, MySQL, MongoDB — выбирайте по вкусу. Для простых проектов можно обойтись Google Sheets через API или Airtable.

5
CRM-система

Опционально, но рекомендуется. Сюда попадают заказы для обработки менеджерами, ведётся история клиентов, настраиваются автоматические уведомления. Интеграция с CRM превращает Telegram-магазин в часть общей системы продаж.

Как это работает вместе? Пользователь пишет боту или нажимает кнопку «Открыть магазин». Telegram открывает Mini App, передавая информацию о пользователе (ID, имя, язык). Mini App загружает каталог с бэкенда и показывает товары. Пользователь добавляет товары в корзину (корзина хранится на бэкенде или в локальном хранилище браузера). При оформлении заказа Mini App отправляет данные на бэкенд. Бэкенд создаёт заказ в CRM, инициирует платёж и отправляет пользователю подтверждение через бота.

Звучит сложно? На практике это проще, чем полноценный интернет-магазин. Не нужна авторизация — Telegram уже знает пользователя. Не нужно думать об адаптивной вёрстке для разных устройств — Mini App работает в стандартном окне. Не нужен SSL-сертификат для домена — Mini App хостится на вашем сервере, а Telegram обеспечивает безопасное соединение.

Пошаговое создание магазина: от идеи до запуска

Теперь давайте пройдём по конкретным шагам создания Telegram-магазина. Я постараюсь дать практические советы, которые пригодятся и если вы делаете сами, и если заказываете разработку.

Шаг 1: Регистрация бота

Всё начинается с создания бота. Откройте Telegram, найдите @BotFather (официальный бот для создания ботов — да, звучит как начало шутки). Отправьте команду /newbot, придумайте название и юзернейм. Через минуту у вас будет токен — длинная строка вроде "123456789:ABCdefGHIjklMNOpqrsTUVwxyz". Этот токен — ключ доступа к боту, храните его в секрете.

Затем настройте бота через BotFather: добавьте описание, аватарку, команды. Для Mini App важно включить inline-режим (команда /setinline) и добавить кнопку меню (команда /setmenubutton). Кнопка меню — это та самая кнопка «Открыть магазин», которая будет видна в чате с ботом.

Шаг 2: Выбор платформы или разработка с нуля

Здесь развилка. Можно пойти тремя путями:

Готовые конструкторы

Smartbot Pro, Botmother, SendPulse — предлагают шаблоны магазинов для Telegram. Быстрый старт, но ограниченная кастомизация.

Для кого: Быстрый запуск, тестирование гипотезы, небольшой каталог.

Готовые решения

Существуют готовые скрипты и шаблоны Telegram-магазинов. Покупаете, настраиваете под себя, разворачиваете на хостинге.

Для кого: Есть технический специалист, нужна кастомизация, средний бюджет.

Разработка с нуля

Полный контроль над функциональностью и дизайном. Требует разработчика или команды.

Для кого: Уникальные требования, большой каталог, интеграции со сложными системами.

Мой совет: если это ваш первый Telegram-магазин — начните с конструктора. Запустите MVP за пару дней, посмотрите на реакцию аудитории. Если всё взлетит — тогда можно инвестировать в кастомную разработку. Если не взлетит — сэкономите время и деньги.

Шаг 3: Создание каталога товаров

Каталог — сердце магазина. Для каждого товара нужно: название, описание, цена, фотографии (желательно несколько ракурсов), категория, наличие. Если у вас уже есть каталог в Excel или на сайте — отлично, можно импортировать. Если нет — придётся создавать с нуля.

Особенность Telegram: фотографии грузятся быстро, но слишком тяжёлые изображения замедляют интерфейс. Оптимизируйте картинки до разумного размера (300-500 КБ на фото). Для превью используйте миниатюры 200x200 пикселей, для детальной страницы — побольше.

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

Шаг 4: Настройка оплаты

С платежами в Telegram есть два основных варианта.

Telegram Payments. Встроенная система: пользователь платит прямо в Telegram, видит красивую форму с карточкой, получает подтверждение. Для подключения нужен платёжный провайдер — в России это обычно ЮKassa. Вы регистрируетесь в ЮKassa, получаете API-ключи, указываете их в настройках бота. Комиссия около 3.5% от суммы. Деньги приходят на ваш расчётный счёт.

Внешняя оплата. Пользователь нажимает «Оплатить», открывается ссылка на платёжную страницу вашего сайта или сервиса. После оплаты — возвращается в Telegram. Это добавляет шаг, но даёт больше гибкости: можно подключить любую платёжную систему, использовать рассрочку, принимать криптовалюту.

Для небольших объёмов и тестов можно начать с простого: клиент оформляет заказ в боте, бот присылает реквизиты для оплаты (карта, СБП), клиент платит и присылает скриншот. Да, это ручная работа, но на старте позволяет запуститься без интеграций.

Шаг 5: Интеграция с CRM

Этот шаг часто пропускают, а зря. Без CRM вы будете тонуть в хаосе: заказы в одном месте, клиенты в другом, переписка в третьем. CRM собирает всё в одну точку.

Что должна делать интеграция: при новом заказе создавать сделку в CRM с данными клиента и списком товаров; при изменении статуса заказа — обновлять статус сделки; при ответе менеджера — отправлять сообщение клиенту в Telegram; хранить историю покупок клиента.

Если используете CrmAI — у нас есть готовая интеграция с Telegram-ботами. Заказ падает в воронку, клиент видит статус в боте, менеджер работает в привычном интерфейсе CRM. Для других CRM (AmoCRM, Битрикс24) тоже есть готовые решения или можно настроить через webhook.

telegram-webapp-magazin-v-messendzhera-telegram.png

Измерение конверсии: как понять, что магазин работает

Запустили магазин — отлично. Но как понять, насколько он эффективен? Какие метрики отслеживать?

Ключевые метрики Telegram-магазина:

Новые пользователи

Сколько людей начали диалог с ботом. Показывает эффективность рекламы и привлечения.

Открытия Mini App

Сколько людей открыли магазин. Отношение к новым пользователям — конверсия в интерес.

Добавления в корзину

Сколько людей положили товар в корзину. Показывает привлекательность каталога.

Оформленные заказы

Сколько заказов оформлено. Главная метрика. Отношение к добавлениям в корзину — конверсия checkout.

Оплаченные заказы

Сколько заказов реально оплачено. Отношение к оформленным — конверсия оплаты.

Средний чек

Сколько в среднем тратит клиент. Растёт при правильных upsell и cross-sell.

Как отслеживать? Telegram даёт базовую статистику в BotFather (количество пользователей, активность). Но для детального анализа нужно настроить свою аналитику. Самый простой способ — логировать события на бэкенде: открыл магазин, посмотрел товар, добавил в корзину, оформил заказ. Потом строить отчёты в CRM или BI-системе.

Для продвинутого анализа можно интегрировать Яндекс.Метрику или Google Analytics. Mini App — это веб-страница, и стандартные счётчики там работают. Главное — правильно настроить цели: просмотр товара, добавление в корзину, оформление заказа. Тогда увидите полную воронку и поймёте, где теряются клиенты.

Отдельно отслеживайте источники трафика. Откуда приходят люди — из рекламы, из постов в каналах, по рекомендациям? Используйте UTM-метки в ссылках на бота. Это поможет понять, какие каналы привлечения работают лучше.

Реальный кейс: магазин корейской косметики в Telegram

Вернёмся к истории, с которой я начал. Мой знакомый — назовём его Артём — продавал корейскую косметику. Аудитория — девушки 18-35 лет, активные в Instagram и Telegram. Ассортимент — около 150 позиций: кремы, маски, сыворотки, декоративная косметика.

Проблема до запуска Mini App

Артём вёл продажи через Instagram Direct. Выкладывал посты, сторис, получал сообщения «Сколько стоит вот эта маска?». Дальше начиналась переписка: объяснить цену, наличие, способ доставки, принять заказ, получить оплату на карту, проверить поступление, отправить трек-номер. На каждый заказ уходило 15-20 минут переписки. При 10-15 заказах в день — это почти весь рабочий день.

Ещё одна проблема — потерянные клиенты. Человек писал вечером, Артём отвечал утром, к этому моменту клиент уже забывал или покупал в другом месте. Конверсия из обращения в заказ была около 30%.

Решение: Mini App с каталогом и оплатой

Мы сделали Telegram-магазин с полным каталогом. Карточки товаров с фото, описаниями, отзывами. Фильтры по категориям (уход за лицом, для волос, макияж) и типу кожи. Корзина с подсчётом суммы. Форма заказа с предзаполнением данных из Telegram. Оплата через ЮKassa.

Бот отправляет автоматические уведомления: «Ваш заказ принят», «Заказ оплачен», «Заказ отправлен, трек-номер такой-то». Всё это без участия Артёма — он только упаковывает и отправляет посылки.

Метрика До Mini App После Mini App Изменение
Время на заказ 15-20 минут 2-3 минуты -85%
Конверсия в заказ 30% 45% +50%
Средний чек 2 800 ₽ 3 400 ₽ +21%
Повторные покупки 15% 28% +87%

Почему вырос средний чек? В Mini App есть блок «С этим товаром покупают» — автоматические рекомендации на основе корзины. Клиентка добавляет крем — видит подходящую сыворотку. В переписке Артём редко успевал делать upsell, а тут система делает это автоматически.

Почему выросли повторные покупки? Бот напоминает о заказе через месяц: «Ваш крем, наверное, заканчивается — не хотите заказать ещё?». Простая автоматизация, которая невозможна при ручной переписке.

Типичные ошибки при создании Telegram-магазина

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

Слишком сложный интерфейс

Люди приходят в Telegram-магазин за быстрой покупкой. Если им нужно пройти 10 экранов, чтобы заказать один товар — уйдут. Упрощайте: минимум шагов от просмотра до оплаты. Идеал — три клика: выбрал, положил в корзину, оплатил.

Плохие фотографии

В маленьком окне Mini App качество фото критично. Размытые, тёмные, мелкие картинки отталкивают. Инвестируйте в хорошие фото товаров — это окупается. Или хотя бы используйте фото от производителя, они обычно качественные.

Нет ответа на вопросы

Пользователь хочет что-то спросить (про доставку, про товар) — а бот не отвечает или отвечает «напишите на почту». Настройте хотя бы базовые FAQ в боте или быстрый перевод на менеджера. Молчащий бот убивает доверие.

Нет уведомлений о статусе

Клиент заказал и... тишина. Когда отправят? Где посылка? Не получив обратной связи, люди нервничают и пишут сами. Настройте автоматические уведомления: заказ принят, оплачен, отправлен, доставлен.

Забыли про мобильную версию

Mini App должен отлично работать на телефоне — там 90% пользователей. Проверяйте интерфейс на реальных устройствах: кнопки достаточно большие? Текст читается? Формы удобно заполнять?

Нет аналитики

Запустили магазин и не знаете, что там происходит. Сколько людей открывает? Где уходят? Какие товары смотрят, но не покупают? Без аналитики невозможно улучшать. Настройте отслеживание с первого дня.

Когда переходить на полноценный сайт

Telegram-магазин — не замена сайту, а дополнительный канал продаж. Но в какой момент стоит задуматься о полноценном интернет-магазине?

Каталог вырос за пределы 200-300 товаров. Mini App справится и с большим количеством, но навигация станет неудобной. Для больших каталогов нужны продвинутые фильтры, фасетный поиск, сравнение товаров — всё это проще реализовать на полноценном сайте.

Нужна SEO-оптимизация. Telegram-магазины не индексируются поисковиками. Если органический трафик важен для вашего бизнеса — нужен сайт. Можно использовать оба канала: сайт для поискового трафика, Telegram для лояльной аудитории.

Требуется сложная логика. Конфигураторы продуктов (как на сайтах мебели или техники), сложные программы лояльности, персонализированные каталоги — всё это проще делать на классическом сайте.

Аудитория не в Telegram. Если ваши клиенты — люди за 50, которые пользуются WhatsApp или звонят по телефону, Telegram-магазин будет пустовать. Проверяйте, где ваша аудитория, прежде чем инвестировать.

Хороший подход — использовать Telegram как один из каналов. Основной сайт + Telegram-бот для тех, кому удобнее покупать в мессенджере. Синхронизация каталога, общая CRM, единые цены и акции. Клиент выбирает удобный способ, вы получаете продажи из разных источников.

Хотите запустить продажи в Telegram?

Мы помогаем бизнесу создавать магазины в Telegram — от простых ботов до полноценных Mini Apps с CRM-интеграцией. Расскажем про возможности, посчитаем сроки и бюджет, предложим оптимальное решение под ваши задачи.

Обсудить проект

Telegram Mini Apps — штука, которая реально работает и приносит деньги. Не экспериментальная игрушка, а нормальный канал продаж с понятной экономикой. Ограничения есть, не для всех подойдёт. Но если аудитория сидит в Telegram и товар понятный — попробовать стоит.

Начните по-маленькому: сделайте бота, закиньте десяток-два товаров, посмотрите реакцию. Полетит — расширяйте, прикручивайте платежи, интегрируйте с CRM. Не полетит — потратите пару дней, зато поймёте, как ваши клиенты хотят покупать. В любом случае это опыт.

Полезные материалы