Nanfeng

Notes on software development, code, and curious ideas

Expand a Telegram Mini App on Open with WebApp.ready and expand

In ,
Load the Telegram Web App SDK, call WebApp.ready and WebApp.expand in the correct order, and expand a Mini App to the maximum available height when opened.

Telegram may initially open a Web App in a partial-height sheet. Call the provided API to request the expanded state:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
  <title>Telegram Web App</title>
  <style>
    html, body { height: 100%; margin: 0; overflow: hidden; }
    .full-screen { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
  </style>
</head>
<body>
  <div class="full-screen"><h1>Your Web App Content</h1></div>
  <script src="https://telegram.org/js/telegram-web-app.js"></script>
  <script>Telegram.WebApp.expand();</script>
</body>
</html>
+