# 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

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

### Using Telegram WebApp API

```javascript
// 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();
}
```

---

## Related Documents

- **Reference:** [Telegram WebApp Documentation](https://core.telegram.org/bots/webapps) — official Telegram documentation about WebApp
- **Explanation:** [Inline Keyboard](/en/scenariodialog/explanation/inline-keyboard.md) — configuring inline keyboard for WebApp