Одна витрина для сайта и Telegram
Mini App открывает существующий магазин. Каталог, цены, размеры и наличие берутся с того же сайта.
Кейс · Telegram Mini App
Airstep · Telegram Mini App · E-commerce
Магазин Airstep в Telegram
Для магазина обуви Airstep открыли всю витрину внутри Telegram-бота. Покупатель видит тот же каталог, цены и доступные размеры, оформляет заказ и получает статусы в одном чате.
Задача и решение
Покупатели Airstep уже получали статусы заказов в боте @AirstepOrdersBot. Но для покупки приходилось отдельно открывать магазин в браузере.
Мы открыли существующий магазин прямо в боте. Отдельное приложение потребовало бы дублировать каталог и наличие по размерам и поддерживать две витрины.
1
Открыть бот
Кнопка магазина есть в ответе на /start и в меню.
2
Выбрать обувь
Покупатель видит каталог, размеры и наличие с сайта.
3
Оформить заказ
Оплата работает как на сайте, подтверждение и статусы приходят в чат.
Что сделали
Покупка начинается в боте и возвращается в тот же чат после оформления.
Кнопки Telegram для покупателя
Магазин открывается из /start и меню бота. Кнопки «Назад» и «Оформить заказ» работают в Telegram, а лишние плавающие кнопки сайта скрыты.
Меньше ручного ввода
Имя покупателя подставляется из Telegram. Номером телефона можно поделиться одной кнопкой через запрос контакта.
Заказы и статусы в одном чате
Перед оформлением бот просит разрешение писать покупателю. Затем присылает подтверждение со списком до 8 товаров и сообщает о статусах.
Источник виден в админке
Заказ помечен как Telegram и содержит источник. Если сообщение о статусе не доставлено, админка предупреждает.
Галерея интерфейсов
Реальные экраны с телефона: от кнопки в боте до подтверждения заказа. Нажмите на изображение, чтобы увеличить его.
Стек и проверка
Тот же магазин на Django работает внутри Telegram Mini App.
Технологии
Python · Django · PostgreSQL · Telegram Bot API (webhook) · Telegram Mini Apps (telegram-web-app.js) · JavaScript
Проверки
36 новых автотестов для Mini App, 495 тестов по проекту, проверка безопасности и тест в Telegram на телефоне.
Безопасность
Сервер проверяет подпись данных Mini App и секретный ключ вебхука. Подтверждение заказа видит только покупатель, который его оформил.
Встраивание
Витрину может встроить только web.telegram.org. Админка и API закрыты от встраивания.
Частые вопросы
Это магазин, который открывается прямо в Telegram-боте. Покупатель смотрит каталог и оформляет заказ, не выходя из мессенджера.
Нет. В Airstep Mini App открывает тот же магазин, поэтому цены, размеры и наличие совпадают с сайтом.
После разрешения на сообщения бот подтверждает заказ и присылает следующие статусы в тот же чат.
Подпись данных Telegram проверяется на сервере. Вебхук защищён секретным ключом, а данные подтверждения видит только покупатель, оформивший заказ.
Каталог в чате от $1 150, Mini App от $1 550. Объём и стоимость вашего магазина определяем после брифа. Подробнее о магазине в Telegram под ключ
06 · Магазин в Telegram
Хотите открыть свой магазин в Telegram?
Расскажите, как сейчас работают каталог, заказы и бот. Подскажем, как открыть магазин в Telegram с вашими данными.
Магазин в Telegram под ключКейс Airstep: интернет-магазинВсе кейсы
