WebApp / MiniApp
WebApp (Mini-App) — это веб-приложение, которое открывается прямо внутри Telegram или MAX. Клиент не уходит в браузер, не переключается между приложениями: магазин, корзина, календарь записи, форма — всё работает в окне мессенджера.
Квесча предоставляет готовые WebApp-шаблоны и действие «WebApp/MiniApp» в сценарии действий, которое получает данные из приложения и передаёт их в логику бота.
Когда нужен WebApp
| Задача | Что в боте без WebApp | WebApp решает |
|---|---|---|
| Каталог из 50 товаров | 50 блоков с кнопками | Один экран с поиском и фильтром |
| Запись на услугу | 5-7 блоков-вопросов | Календарь с выбором даты и времени за 2 клика |
| Корзина с подсчётом | Сложная логика на переменных | Динамическая корзина в WebApp |
| Большая форма | 10 блоков «введите...» | Одна форма со всеми полями сразу |
WebApp значительно снижает количество кликов, сокращает воронку и улучшает конверсию.
Часть 1. Готовые WebApp в Квесче
| Приложение | Назначение | Где работает | Подробно |
|---|---|---|---|
| cat_shop | Магазин-каталог | Telegram, MAX | Магазин (cat_shop) |
| cat_cafe | Меню кафе / ресторана | Telegram, MAX | Кафе (cat_cafe) |
| calendar | Календарь записи | Telegram, MAX | Календарь (calendar) |
Все WebApp подключаются к боту через кнопку с типом «Ссылка» в блоке или через «Команды» на доске сценария.
Скриншот 1. Подключение WebApp к кнопке блока.
Часть 2. Связь WebApp с ботом
WebApp работает в браузере — внутри Telegram, но изолированно. Чтобы передать данные обратно в бот — в Квесче есть действие «WebApp/MiniApp» в сценарии действий.
Подписчик нажал кнопку WebApp
↓
Открывается приложение (cat_shop / calendar / ...)
↓
Клиент совершил действие (заказ, запись)
↓
WebApp отправляет данные в бот → запускается следующий блок
↓
В блоке — сценарий действий с действием «WebApp/MiniApp»
↓
Действие сохраняет данные WebApp в переменные / список
↓
Бот реагирует: подтверждение, оплата, уведомление менеджеру
Скриншот 2. Жизненный цикл взаимодействия с WebApp.
Часть 3. Действие «WebApp/MiniApp» — типы операций
Добавляется в сценарии действий того блока, который запускается после работы клиента в WebApp.
В действии 7 типов операций:
| Тип | Назначение |
|---|---|
| Каталог: обработка заказа | Достать состав заказа из cat_shop / cat_cafe в переменные/список |
| Календарь: данные из приложения | Получить выбранную дату/время из календаря |
| Календарь: сделать запись | Записать клиента в указанный календарь |
| Календарь: получить все записи клиента | Извлечь историю записей клиента |
| Календарь: получить запись клиента | Получить конкретную запись по ID |
| Календарь: удалить запись клиента | Отменить одну запись |
| Календарь: удалить все записи клиента | Очистить все записи клиента (для переноса/тестов) |
Скриншот 3. Выбор операции WebApp.
Часть 4. Типовые сценарии
Сценарий 1. Магазин (cat_shop)
- Кнопка «Каталог» с типом WebApp → открывается cat_shop.
- Клиент собирает корзину, оформляет заказ.
- WebApp возвращает в бот сводку заказа.
- Блок с действием «WebApp/MiniApp» → операция «Каталог: обработка заказа» → данные в переменные (массивы товаров, цен, количеств) и в список «Заказы».
- Блок платежа для итоговой суммы.
- После оплаты — уведомление менеджеру.
→ Подробно: WebApp Магазин (cat_shop).
Сценарий 2. Кафе (cat_cafe)
Аналогично cat_shop, но интерфейс заточен под меню:
- категории блюд;
- модификаторы (без лука, без острого);
- комментарий к заказу.
→ Подробно: WebApp Кафе (cat_cafe).
Сценарий 3. Запись на услугу (calendar)
- Кнопка «Записаться» → открывается calendar.
- Клиент выбирает услугу, дату, время.
- Блок с действием «WebApp/MiniApp» → операция «Календарь: данные из приложения» → сохраняет в переменные
#{дата},#{время},#{recordId}. - Подтверждение → операция «Календарь: сделать запись» фиксирует запись.
- Напоминание за час через цепочку с задержкой.
→ Подробно: WebApp Календарь (calendar).
Сценарий 4. Просмотр своих записей
- Кнопка «Мои записи».
- Блок с действием «WebApp/MiniApp» → «Календарь: получить все записи клиента».
- В переменной — массив записей. Перебор и формирование строки.
- Сообщение клиенту со списком.
- Кнопка отмены → «Календарь: удалить запись клиента» по
recordId.
Часть 5. Архитектура
Принцип 1. WebApp заменяет сложные ветвистые сценарии
Если в вашем боте больше 5 блоков-вопросов подряд (например, «выберите день», «выберите время», «выберите услугу») — пора заменять на WebApp.
Принцип 2. Передавайте параметры в WebApp через URL
WebApp может принимать параметры (товары, услуги, цены) через GET-параметры URL. Их обычно подкидывают через действие «Ссылки» или конструктор кнопки.
Принцип 3. Возврат данных обрабатывайте сразу
Сценарий действий с операцией WebApp должен стоять в первом блоке после кнопки WebApp. Если поставить дальше — данные могут потеряться.
Принцип 4. Сохраняйте состояние в списках
Корзины, записи, заказы — храните в списках, не в локальных переменных. Локальные исчезнут после диалога; список остаётся.
Принцип 5. Используйте теги для статусов
После записи в календаре ставьте тег записан-2026-08-21. Это упростит сегментацию и рассылки.
Принцип 6. Делайте моб-первый UX
Большинство клиентов открывают WebApp с телефона. В Telegram WebApp ограничен по высоте — длинные формы плохо влезают.
Часть 6. Когда не использовать WebApp
- Простой диалог из 1-2 вопросов — кнопки в блоках быстрее открываются.
- VK / WhatsApp / Viber — WebApp полноценно работает в Telegram и MAX. В других мессенджерах поведение ограничено.
- Нужна сложная кастомная логика — если готовых cat_shop/calendar мало, выгоднее заказать кастомное WebApp у Квесчи.
Частые ошибки
- Данные из WebApp не приходят — проверьте, что блок-приёмник идёт сразу после WebApp-кнопки (без блоков-вопросов между).
- Корзина пустая, хотя клиент что-то добавлял — переменные WebApp не подключены в действии. Проверьте имена в операции «Каталог: обработка заказа».
- WebApp не открывается — кнопка должна иметь именно тип WebApp / MiniApp, а не обычную ссылку.
- В VK WebApp не работает — это ограничение мессенджера. Сделайте альтернативную ветку для VK через обычные блоки.
- Бот не получает уведомление о записи — настройте операцию «Календарь: сделать запись», а не только «Данные из приложения».
Что дальше
- WebApp Магазин (cat_shop) — каталог товаров с корзиной.
- WebApp Кафе (cat_cafe) — меню заведения.
- WebApp Календарь (calendar) — запись на услуги.
- Платежи — приём оплат после WebApp-заказа.
- Списки — хранение заказов и записей.
- Цепочки — напоминания о записи с задержкой.