About Telegram WebApp in Scenarios

Telegram WebApp allows opening web applications directly in Telegram, allowing creating interactive interfaces with full access to web technologies and the ability to interact with the bot.

Context and Problem

In many scenarios, you need to provide users with complex interfaces:

  • Forms with many fields
  • Interactive product catalogs
  • Game interfaces
  • Complex settings

Telegram WebApp solves this task by allowing creating full web applications that integrate with the bot and work directly in Telegram.

Key Concepts

What is Telegram WebApp

Telegram WebApp is a web application that opens directly in Telegram through a special button. It has access to Telegram WebApp API, allowing interacting with the bot and receiving user data.

Configuration Through Inline Keyboard

To open WebApp, you need to:

  1. Create a button in inline keyboard
  2. Specify ActionType: "open-web-app" in JSON configuration
  3. Specify WebApp URL in ActionBody
  4. Enable "Inline keyboard (Telegram and Widget only)" option

Approach Options

WebApp vs Regular Website

Telegram WebApp:

  • ✅ Pros: Bot integration, access to Telegram API, works directly in Telegram
  • ❌ Cons: Works only in Telegram, window size limitations

Regular website:

  • ✅ Pros: Works everywhere, more design freedom
  • ❌ Cons: No bot integration, need to open browser

Why we use WebApp: For interactive interfaces that require bot integration, WebApp provides the best capabilities and user experience.

Adopted Solutions

Required HTTPS

WebApp must be accessible via HTTPS. This is a Telegram requirement for user security.

Responsive Design

WebApp should have responsive design for different devices (desktop and mobile), as Telegram works on different platforms.

Telegram WebApp API

For full bot integration, it's recommended to use Telegram WebApp API, which allows:

  • Sending data back to bot
  • Closing WebApp
  • Receiving user data
  • Managing WebApp interface

Implications for Users and Implementation

For Integrators

When using Telegram WebApp, it's important to:

  1. Configure HTTPS — WebApp must be accessible via HTTPS
  2. Create responsive design — for different devices and screen sizes
  3. Use Telegram WebApp API — for bot integration
  4. Configure button — use inline keyboard with ActionType: "open-web-app"

Common Errors

Error: WebApp does not open
Problem: ActionType: "open-web-app" is not specified or inline keyboard is not enabled
Solution: Check button JSON configuration and inline keyboard settings

Error: WebApp does not work via HTTP
Problem: Telegram requires HTTPS for WebApp
Solution: Configure HTTPS for WebApp

Error: WebApp does not adapt to mobile devices
Problem: Responsive design is missing
Solution: Add media queries and responsive styles

Limitations

  • WebApp works only in Telegram (does not work in Widget)
  • Site must be accessible via HTTPS
  • WebApp size is limited by Telegram window dimensions
  • Some browser functions may be limited

Usage Examples

JSON Button Configuration

{
  "ActionType": "open-web-app",
  "ActionBody": "https://www.example.com/webapp"
}

Using Telegram WebApp API

// Check if site is opened in Telegram
if (window.Telegram && window.Telegram.WebApp) {
  const tg = window.Telegram.WebApp;
  
  // Send data back to bot
  tg.sendData(JSON.stringify({action: 'purchase', item: 'product123'}));
  
  // Close WebApp
  tg.close();
}