Telegram Mini Apps

Host web apps that open inside Telegram — create, edit, and link them to your bot from the NxCreator dashboard.

A Telegram Mini App is a web page that opens inside the Telegram client — full-screen, themed to match the user's Telegram, and aware of who opened it. NxCreator hosts the page for you and gives you an editor, so you can ship one without your own server or domain.

What is a Mini App

Mini Apps are ordinary HTML/CSS/JS pages loaded in Telegram's in-app browser. Telegram injects a window.Telegram.WebApp object that exposes the theme, the launch parameters, the current user (verified via a signed initData string), and native UI like the main button and back button. Use them for onboarding flows, dashboards, stores, forms, mini-games — anything that needs more than a chat message.

Create a Mini App

In the dashboard, open Mini Apps from the sidebar and click New Mini App. Give it a name. NxCreator provisions hosting and shows it in the list with a live URL and an online/offline status.

Each Mini App gets its own hosted URL on NxCreator. You do not need to buy a domain or run a server.

Edit the code

Click the edit icon on a Mini App to open the code editor. It is a full HTML file — write your markup, styles, and scripts, save, and the hosted page updates. Load Telegram's SDK from their CDN at the top of the page:

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <script src="https://telegram.org/js/telegram-web-app.js"></script>
</head>
<body>
  <h1 id="hello">Loading…</h1>
  <script>
    const tg = window.Telegram.WebApp;
    tg.ready();
    tg.expand();
    const user = tg.initDataUnsafe.user;
    document.getElementById('hello').textContent =
      user ? 'Hi ' + user.first_name : 'Open me from Telegram';
  </script>
</body>
</html>

Link it to your bot

Point users at the Mini App from your bot using the hosted URL. Common ways:

// Inline button that opens the Mini App
bot.command('app', (ctx) =>
  ctx.reply('Open the app', {
    reply_markup: {
      inline_keyboard: [[
        { text: 'Open', web_app: { url: 'https://<your-mini-app-url>' } }
      ]]
    }
  })
);

// Reply-keyboard button
ctx.reply('Menu', {
  reply_markup: {
    keyboard: [[ { text: 'Dashboard', web_app: { url: 'https://<your-mini-app-url>' } } ]],
    resize_keyboard: true
  }
});

You can also set it as the bot's menu button or attach it as a chat-menu Mini App from @BotFather so it appears next to the message input.

The Telegram WebApp SDK

API	Use
`WebApp.ready()`	Tell Telegram the page has loaded (removes the loading placeholder).
`WebApp.expand()`	Expand the Mini App to full height.
`WebApp.initData`	Signed launch string — send it to your bot/backend and verify it to trust the user.
`WebApp.initDataUnsafe.user`	The opener's Telegram profile (display only — do not trust without verifying initData).
`WebApp.themeParams`	Colors matching the user's Telegram theme.
`WebApp.MainButton`	The native bottom action button — set text, show/hide, onClick.
`WebApp.BackButton`	The native back button.
`WebApp.sendData(str)`	Send data back to the bot and close the Mini App (works for keyboard-button apps).

Anything security-sensitive must verify WebApp.initData on the server using your bot token. initDataUnsafe can be spoofed and is for display only.

Plan limits

Plan	Mini Apps
Free	5
Pro	40
Business	Unlimited

AI agents can create and edit Mini Apps over MCP — see MCP Server. Mini App tools work on the full HTML document (create_mini_app, get_mini_app_html, update_mini_app_html).

Last updated August 11, 2026

Was this page helpful?