Как создать мини-приложение: 6 шагов
Создайте бота
В @BotFather отправьте
/newbot, задайте имя и юзернейм с окончанием bot. Мини-приложение всегда запускается из бота.Сделайте веб-страницу
Сверстайте страницу на HTML и JavaScript и опубликуйте её по ссылке. В тег head первым скриптом подключите https://telegram.org/js/telegram-web-app.js: через объект Telegram.WebApp страница связывается с Telegram.
Привяжите кнопку меню
В @BotFather отправьте
/setmenubuttonили откройте Bot Settings > Menu Button. Укажите текст кнопки и адрес страницы: кнопка появится слева от поля ввода у всех пользователей бота.Настройте главное мини-приложение
В
/mybotsвыберите бота, затем Bot Settings > Configure Mini App. В профиле бота появится кнопка Launch app, туда же загружают демо-видео и скриншоты. Приложение будет открываться по ссылке t.me/имябота?startapp.Проверьте на тестовом сервере
Для проверок есть тестовый сервер Telegram. В Telegram Desktop откройте ☰ Settings, сделайте Shift + Alt + правый клик по Add Account и выберите Test Server. На iPhone 10 раз нажмите на значок Settings, затем Accounts > Login to another account > Test.
Включите отладку
На Android включите отладку по USB, в настройках Telegram дважды нажмите и удерживайте номер версии внизу и выберите Enable WebView Debug. Потом подключите телефон к компьютеру и откройте chrome://inspect/#devices в Chrome.
Как бот запускает мини-приложение и что выбрать
| Способ | Где настраивается | Когда подходит |
|---|---|---|
| Кнопка меню | @BotFather: /setmenubutton или Bot Settings > Menu Button | Приложение нужно под рукой в чате с ботом |
| Главное мини-приложение | @BotFather: Bot Settings > Configure Mini App | Бот и есть приложение: кнопка Launch app в профиле, вкладка Apps в поиске |
| Кнопка под сообщением | В коде бота, кнопка типа web_app | Приложению нужно отправить сообщение в чат от имени пользователя |
| Кнопка клавиатуры | В коде бота, кнопка клавиатуры типа web_app | Простая форма: данные вернутся боту методом sendData |
| Прямая ссылка | t.me/имябота?startapp=параметр | Ссылка в канале или на сайте, параметр уходит в приложение |
Пример: кнопка меню через BotFather
Вы: /setmenubutton
BotFather просит выбрать бота. Вы выбираете @spisok_pokupok_bot.
BotFather просит адрес страницы и текст кнопки. Вы отправляете https://example.com/list/ и «Открыть список».
Итог: в чате с ботом слева от поля ввода появилась кнопка «Открыть список». Она открывает страницу внутри Telegram.
Можно ли сделать мини-приложение без программирования
Мини-приложение это обычная веб-страница, поэтому для витрины или формы подойдёт любой способ собрать сайт, который отдаёт страницу по ссылке. Адрес такой страницы привязывают к боту в @BotFather.
Чтобы страница знала тему оформления Telegram и данные пользователя, нужен скрипт telegram-web-app.js. Для оплаты и ответов боту без кода не обойтись.
Как сделать мини-приложение в боте с оплатой
Цифровые товары внутри мини-приложения продают за Telegram Stars, физические через счета подключённого платёжного провайдера. Успешные приложения с главным мини-приложением и оплатой в Stars Telegram может показать в подборке Telegram Mini App Store.
Что учесть в интерфейсе
Telegram советует учитывать безопасную зону экрана, чтобы элементы Telegram не перекрывали кнопки приложения, особенно в полноэкранном режиме. На слабых Android-телефонах лучше сократить анимации.
Боты из каталога для этой задачи
BotFather@BotFather · бот
создать бота, получить токен бота, настроить бота
Durger King@durgerkingbot · мини-приложение
посмотреть, как работает мини-приложение, открыть мини-приложение в Telegram
Частые вопросы
Как сделать мини приложение в телеграм боте?
Создайте бота в @BotFather, опубликуйте веб-страницу со скриптом telegram-web-app.js и привяжите её адрес к боту командой /setmenubutton или в Bot Settings > Configure Mini App.
Есть ли конструктор мини приложений в телеграм?
В документации Telegram отдельного конструктора нет: мини-приложение это веб-страница. Её собирают любым инструментом для сайтов и подключают к боту через @BotFather.
Как открыть своё мини приложение по ссылке?
После настройки главного мини-приложения работает ссылка t.me/имябота?startapp. Текст после startapp= приложение получит как параметр запуска.
Можно ли проверить мини приложение до запуска?
Да, на тестовом сервере Telegram с отдельным тестовым аккаунтом. В Telegram Desktop его добавляют через Shift + Alt + правый клик по Add Account в настройках.
Источники
Обновлено