Как встроить страницу в Telegram бота

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

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

  1. Перейдите в Телеграм.
  2. Найдите диалог с @BotFather
  3. Создайте бота если он еще не создан.
  4. Наберите команду /setmenubutton и веберите бота для которого надо установить страницу.
  5. Укажите URL страницы.
  6. Укажите название для кнопки (по умолчанию "Menu")

 

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

Если ее нажать, то откроется страница.

 

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

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

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

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

 

 

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

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

<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();
       }
   });
</script>
Последняя правка от 16 Декабрь, 2023