WebApp в Telegram-боте

Привет! В этом разборе мы познакомимся с базовым определением WebApp и преимуществами внедрения данного инструмента в проекты.

Читай разбор, в конце мы закрепили полезную инструкцию, как встроить открытие WebApp в кнопку, используя HTTP-блок на платформе Leadtex 👇🏼

Что такое WebApp в Telegram?

WebApp - это веб-приложение, которое открывается в отдельном окне прямо в мессенджере Telegram.

Ключевые преимущества внедрения WebApp:

✔️ Улучшение пользовательского опыта и сокращение количества ошибок в рамках бота.

✔️ Отсутствие необходимости "уводить" пользователя за пределы мессенджера - все действия в одном месте.

✔️ Расширение функциональных возможностей чат-бота.

✔️ Возможность синхронизации действий пользователя в чат-боте и веб-приложении.

В WebApp можно встроить любую ссылку на сайт или веб-приложение.

Сервисы, которые Академия Х задействует для разработки WebApp приложений на no-code:

📍Сreatium - многофункциональный конструктор сайтов.

📍Directual - облачная low-code платформа для разработки веб-приложений и автоматизированных систем для бизнеса.

Как можно отобразить WebApp для пользователя?

• Нажатие на reply-кнопку (кнопки, которые заменяют печатную клавиатуру пользователя).
• Нажатие на inline-кнопку (кнопки, которые отображаются в сообщении).
• Нажатие на кнопку "Меню" в чат-боте (создается в BotFather).

WebApp работает только в чат-ботах?

Нет, WebApp работает также в каналах и чатах в рамках мессенджера, однако не имеет доступа к личному диалогу с пользователем, поэтому удержать аудиторию и отследить ее действия - невозможно.

Топ-проектов для внедрения WebApp в чат-ботах

1.Магазины в мессенджере

2.Чат-боты для онлайн-образования

3.Личный кабинет / бронирования / запись на услуги

4.Геймификация: головоломки, квесты, тесты, викторины, ребусы, калькуляторы и другие мини-игры.

Для чего WebApp следует внедрять в проекты:

✔️ Улучшение пользовательского опыта: удобный доступ к материалам бота в веб-интерфейсе, визуализация данных.

✔️ Расширение функциональных возможностей чат-ботов и дополнительные интеграции (платежные сервисы, CRM-системы и т.д.)

✔️ Моноканальность и повышение конверсии - нет необходимости перенаправлять пользователей на другие ресурсы.

✔️ Расширенные возможности аналитики пользовательского поведения: возможность встраивать рекламные инструменты (пиксели) и подключать системы аналитики.

✔️ Кастомный дизайн и повышение узнаваемости.

✔️ Инновационность решения.

Мини-чек-лист по внедрению WebApp в чат-бот

Для того. чтобы внедрить WebApp в кнопку, нам потребуется:

• ссылка для подстановки
• HTTP-блок на платформе Leadtex.

Мы будем использовать метод "sendMessage", подробнее здесь 👈🏼

Скрипт для копирования 👇🏼

https://api.telegram.org/bot{{Токен}}/sendMessage?

chat_id={{telegram_id}}&

text=Твой текст&

reply_markup= {

  "inline_keyboard":[

   [

     {

      "text":"Название кнопки",

      "web_app":{

        "url":"ccылка"

      }

     }

   ],

   [

     {

      "text":"Название кнопки",

      "callback_data":"значение"

     }

   ]

  ]

}

Важно! Перед добавлением скрипта воспользуйтесь валидатором JSON, чтобы скорректировать размещение объектов.

Благодаря подстановке данных значений - первая inline-кнопка будет открывать WebApp в чат-боте.

А в - последующую(ие) ты можешь внедрить любые значения с перенаправлением на переключатель или поставить номера блоков для навигации пользователей в сценарии в формате /b12345566.

Как подставить ссылку на WebApp для постоянного меню в BotFather?

• Переходим в @BotFather
• Выбираем нужного бота из списка
• Выбираем пункт "Bot Settings"
• В настройках кликаем на пункт "Menu Button"
• Отправляем боту ссылку для WebApp и заголовок для отображения на кнопке.

✅Готово! Теперь в чат-бот добавлено основное меню с назначенным заголовком, которое будет открывать WebApp.