Регистрация Войти
Войти через VK Войти через FB Войти через Google Войти через Яндекс

Поиск по сайту

Наш Telegram бот: @htmlweb_bot

Телеграм WEB APP приложения

Основная документация по приложениям для телеграм: https://core.telegram.org/bots/webapps#initializing-mini-apps. Здесь мы разбираем рабочие примеры использования WEB APP приложений tg.

Как заменить кнопку меню у бота?

Идем в @botfather и пишем команду: /setmenubutton
Далее выбираем бота, которому хотим сделать кнопку вызова веб приложения
Указываем ссылку по которой доступно наше веб-приложение, обязательно https://
Пишем имя кнопки - будет отображаться внизу слева

Как открыть web - приложение по inline-кнопке?

['parse_mode' => 'html',
 'disable_web_page_preview' => true,
 'reply_markup' => js_encode([
 'inline_keyboard' => [
        [['text' => 'WebApp', 'web_app' => [ 'url' =>'https:/htmlweb.ru/web_app.php']]],
    ],
'resize_keyboard' => true
]

Как создать простейшее TG WEB APP приложение?

    <script src="https://telegram.org/js/telegram-web-app.js"></script>
    // После этого нам будет доступен объект:
    window.Telegram.WebApp
        .initData //получаем данные от пользователя в виде строки (работает только при запуске из меню команд бота).
        .initDataUnsafe // получаем данные от пользователя в виде объекта (работает только при запуске из меню команд бота).
            .user.id // уникальный идентификатор пользователя
            .user.isBot // бот ли пользователь (true/false)
            .user.first_name // имя пользователя
            .user.last_name // "фамилия" пользователя
            .user.username // ник пользователя
            .user.language_code // код языка пользователя
        .isExpanded // возвращает true, если приложение открыто на всю высоту, false - если нет.
        .viewportHeight // вернёт ширину окна.
        .sendData(data) // отправляет данные боту в строковом виде, после чего закрывает приложение (работает только если приложение запущено с keyboard button).
        .ready() // метод позволяет отследить, когда приложение готово к отображению.
        .expand() // метод позволяет растянуть окно на всю высоту.
        .close() // метод закрывает приложение.

Основная документация по приложениям для телеграм: https://core.telegram.org/bots/webapps#initializing-mini-apps

Сканировать QR код WEB приложении телеграм

showScanQrPopup(['text'=>'Сканируем QR код'][, callback])
Telegram.WebApp.onEvent('qrTextReceived', eventHandler)
Telegram.WebApp.offEvent('qrTextReceived', eventHandler)

Как закрыть приложение после отправки данных

Если надо, чтобы страница отправила данные о пользователе вам на сервер и сразу закрылась, то добавьте на страницу html блок с кодом:

<script src="https://telegram.org/js/telegram-web-app.js"></script>
    <script>
    fetch('https://htmlweb.ru/web_app.php',
        {method: 'POST',
            body: JSON.stringify(Telegram.WebApp.initDataUnsafe),
            credentials: 'include',
            headers    : {
                'Content-Type': 'application/json'
            }}).then(function(e){
                e.text().then(function(e) {
                    Telegram.WebApp.showAlert(e);
                    Telegram.WebApp.close();})});
</script>

Как распахнуть WEB app приложение на весь экран?

Если надо, чтобы страница открывалась на весь экран, то добавьте на страницу html блок с кодом:

<script>
    document.addEventListener('DOMContentLoaded', function () {
        if (window.Telegram && window.Telegram.WebApp) {
            window.Telegram.WebApp.expand();
        }
    });
</script>

Наши телеграм-боты

.
Прокомментировать/Отблагодарить