Опубликовано 16 Август, 2022 | Telegram | 4 211 просмотров

Вы можете использовать свои страницы на Linkrr в качестве Telegram Mini Apps.

 

Добавьте HTML блок на страницу в Linkrr с кодом:

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

Скопируйте ссылку на страницу в Linkrr.

1. Перейдите в Телеграм.
2. Найдите диалог с @BotFather
3. Создайте бота если он еще не создан.
4. Перейдите в настройки бота и выберите "Configure mini app" и "Enable mini App"
5. Отправьте боту ссылку на страницу в Linkrr

Теперь в настройках вашего бота будет кнопка Open App, которая откроет мини-апп.

 

 

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

Для этого отправьте команду в @botfather /newapp и следуйте инструкциям.

 

Еще вы можете добавить кнопку на мини-апп как меню вашего бота.

Для этого отправьте команду в @botfather /setmenubutton и следуйте инструкциям.

В диалоге с вашим ботом рядом с полем для ввода текста появится кнопка с указанным именем, например "Menu". Если её нажать, то откроется страница.

 

Управление состоянием бота

Управление состоянием бота должно быть реализовано в сервисах - конструкторах чатботов. Например, это можно сделать через Salebot.

На странице в Linkrr в блоках "Ссылка" и "Баннер" нужно заполнить поле Webhook.

После этого, при каждом клике по этим блокам на странице, Linkrr будет отправлять вебхуки в Salebot. А Salebot будет управлять ботом.

Важно! В поле "Ссылка" нужно указать "tg:", иначе иначе Телеграм перехватывает нажатие и показывает окно перехода по ссылке.

 

К URL вебхука автоматически будут добавлены все параметры, с которыми человек посетит страницу с мини-апп. А также, будет добавлен параметр telegram_id с id этого пользователя.

 

 

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

<script>
  document.querySelectorAll('[data-biolink-block-id] a:not([class^="carousel-control-"])').forEach(item => {
    item.addEventListener('click', event => {
      setTimeout(() => {
        window.Telegram.WebApp.close();
      }, 500);
    })
  })
</script>

 

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

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