Подключение мини-приложения для кнопки в боте (веб-бот)

В данной статье разберём особенности подключения мини-приложения в Telegram боте.
В этой статье

В данной статье разберём особенности подключения мини-приложения в Telegram боте.

eeed516e0b51192c1259f38ff1720e9f.png

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

Также, вы можете использовать функцию мини-приложения для простого открытия окна браузера в диалоге с ботом без обработки нажатий.

 

Интеграция с Tilda

Обязательным этапом является вставка HTML скрипта в код всего сайта или отдельной страницы, для этого необходимо выбрать в Tilda: Все блоки — Другие — HTML — Код, в блок вставляем:

<script src="https://telegram.org/js/telegram-web-app.js"></script>
<script src="https://puzzlebot.top/webapp.js"></script>
<script src="https://puzzlebot.top/webapp_tilda.js"></script>

В кнопки, которые должны запускать команды бота, вставляем ссылку формата:

#pbt_cmd NAME_COMMAND

Важно правильно указать ссылку:

  1. Между #pbt_cmd и названием команды есть пробел
  2. Название команды пишем английскими буквами 

Не забудьте опубликовать изменения на сайте и в конструкторе. 

 

Вызов мини-приложения

1f164907b37249afc2a0baff92f3cbdf.png

Вызвать окно мини-приложения можно через кнопки Обычной клавиатуры и Инлайн клавиатуры выбрав действие для кнопки мини-приложение.

Важно! Для обработки нажатий кнопок на сайте подходит только Обычная клавиатура.

 

Подготовка сайта

3f627c323f4745637ae68b98c5021052.png

Для обработки нажатий на кнопки необходимо в код HTML страницы сайта между тегами <head>…</head> подключить следующие скрипты:

<script src="https://telegram.org/js/telegram-web-app.js"></script>

<script src="https://puzzlebot.top/webapp.js"></script>

Доступные действия:

  • PuzzleBot.sendCommand('НАЗВАНИЕ_КОМАНДЫ') — вызов команды, который приведёт к закрытию окна браузера, пример: <button onclick="PuzzleBot.sendCommand('/start');">Запустить команду /start</button>
  • PuzzleBot.changeVariable('ПЕРЕМЕННАЯ', 'НОВОЕ_ЗНАЧЕНИЕ') — изменение переменной, которое приведёт к закрытию окна браузера, пример: <button onclick="PuzzleBot.changeVariable('BALANCE', 10);">Изменить переменную</button>

Также, вы можете скачать архив демонстрационного сайта для загрузки его к себе на хостинг: Mini App demonstration site (PuzzleBot).zip