Одна вітрина для сайту й 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: інтернет-магазинВсі кейси
