AutoMate AI

Posted on Jul 8

Complete Guide to Telegram Mini Apps in 2026

#telegram #miniapps #web3 #tutorial

Telegram Mini Apps are the most underrated distribution channel in tech right now.

900 million users. Native payments. No app store approval. Your app runs inside Telegram.

I've built 5 Mini Apps this year. Here's everything I learned.

What Are Mini Apps?

Web apps that run inside Telegram. Users tap a button in a bot or group → your app opens → full screen, looks native.

What you can do:

Access user's Telegram info (name, photo, language)
Request payments (credit card or TON crypto)
Send notifications via the bot
Share to chats and groups
Access device features (camera, location)

What you can't do:

Run in background
Send push notifications directly (must go through bot)
Access phone contacts or other apps

Why Mini Apps Win

Distribution. Telegram has 900M+ users. No app store. No downloads. Click and use.

Payments. Built-in. Credit cards work globally. TON crypto native. Low friction.

Viral loops. "Share to chat" built in. Users spread your app.

Trust. Running inside Telegram feels safer than random websites.

Speed. Web tech means fast iteration. Ship daily, not quarterly.

Technical Stack

Mini Apps are just web apps with a JavaScript SDK.

Required:

HTML/CSS/JS (or any framework that compiles to web)
Telegram Mini App SDK
HTTPS hosting

Recommended:

React or Vue (component-based UI)
Tailwind CSS (fast styling)
Netlify/Vercel (easy hosting)
Node.js backend (if needed)

Getting Started (30 Minutes)

Step 1: Create Your Bot

Open @botfather in Telegram
Send /newbot
Follow prompts to name it
Save the API token

Step 2: Enable Mini Apps

In @botfather:

/mybots → select your bot
Bot Settings → Menu Button
Enter your Mini App URL (we'll create this next)

Step 3: Create the App

<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
    <title>My Mini App</title>
    <script src="https://telegram.org/js/telegram-web-app.js"></script>
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, sans-serif;
            padding: 20px;
            background: var(--tg-theme-bg-color);
            color: var(--tg-theme-text-color);
        }
        .user-card {
            background: var(--tg-theme-secondary-bg-color);
            padding: 20px;
            border-radius: 12px;
            text-align: center;
        }
        .user-photo {
            width: 80px;
            height: 80px;
            border-radius: 50%;
        }
    </style>
</head>
<body>
    <div class="user-card">
        <img class="user-photo" id="photo">
        <h2 id="name"></h2>
        <p>Welcome to my Mini App!</p>
    </div>

    <script>
        const tg = window.Telegram.WebApp;

        // Tell Telegram we're ready
        tg.ready();
        tg.expand(); // Full screen

        // Get user info
        const user = tg.initDataUnsafe.user;
        if (user) {
            document.getElementById('name').textContent = user.first_name;
            document.getElementById('photo').src = user.photo_url || '';
        }
    </script>
</body>
</html>

Step 4: Host It

Deploy to any static host:

Netlify: Drag and drop
Vercel: vercel deploy
GitHub Pages: Push to repo

Must be HTTPS. Telegram rejects HTTP.

Step 5: Connect to Bot

Back to @botfather:

Set the URL to your hosted app
Open your bot → tap menu button → Mini App loads

Done. You have a working Mini App.

Using the SDK

Theme Colors

Telegram provides theme variables. Use them for native look:

:root {
    --bg: var(--tg-theme-bg-color);
    --text: var(--tg-theme-text-color);
    --hint: var(--tg-theme-hint-color);
    --link: var(--tg-theme-link-color);
    --button: var(--tg-theme-button-color);
    --button-text: var(--tg-theme-button-text-color);
}

App automatically adapts to user's Telegram theme.

Main Button

The big button at the bottom:

const tg = window.Telegram.WebApp;

// Show main button
tg.MainButton.text = "Continue";
tg.MainButton.show();

// Handle clicks
tg.MainButton.onClick(() => {
    // Do something
    tg.close(); // Close app and return to Telegram
});

// Loading state
tg.MainButton.showProgress();
// ... async work ...
tg.MainButton.hideProgress();

Payments

Two options: Telegram Payments (credit cards) or TON (crypto).

Telegram Payments:

// Backend creates invoice
const invoiceLink = await bot.createInvoiceLink({
    title: "Premium Subscription",
    description: "1 month access",
    payload: "premium_1mo",
    provider_token: "YOUR_PAYMENT_PROVIDER_TOKEN",
    currency: "USD",
    prices: [{ label: "Premium", amount: 999 }] // $9.99
});

// Frontend opens payment
tg.openInvoice(invoiceLink, (status) => {
    if (status === 'paid') {
        // Success! Update user's account
    }
});

TON Payments:

import { TonConnectUI } from '@tonconnect/ui';

const tonConnect = new TonConnectUI({
    manifestUrl: 'https://yourapp.com/tonconnect-manifest.json'
});

async function pay(amountTON) {
    const transaction = {
        validUntil: Math.floor(Date.now() / 1000) + 60,
        messages: [{
            address: "YOUR_WALLET_ADDRESS",
            amount: String(amountTON * 1e9)
        }]
    };

    await tonConnect.sendTransaction(transaction);
}

Haptic Feedback

Make it feel native:

// Impact feedback (light/medium/heavy/rigid/soft)
tg.HapticFeedback.impactOccurred('medium');

// Notification (success/warning/error)
tg.HapticFeedback.notificationOccurred('success');

// Selection changed
tg.HapticFeedback.selectionChanged();

Use sparingly. Too much is annoying.

Share to Chat

Let users share your app:

tg.switchInlineQuery('check this out', ['users', 'groups', 'channels']);

User picks a chat. Your bot's inline query appears. They send it.

Real World Example: Casino Game

I built a slots game Mini App:

Frontend:

React + Tailwind
Framer Motion for animations
Canvas for the slot machine

Backend:

Node.js on Railway
Redis for session/balance
Provably fair algorithm

Flow:

User opens app
Gets 100 free tokens
Plays slots
Can buy more tokens with TON
Can withdraw winnings to TON wallet

Stats after 1 month:

15K unique users
2.3M spins
$800 in token purchases

All inside Telegram. No app store, no downloads.

Best Practices

1. Mobile first. 95% of Telegram users are on mobile. Design accordingly.

2. Fast load. Under 2 seconds or users bounce. Optimize assets.

3. Use Telegram's design patterns. Users expect it to feel like Telegram.

4. Haptics on actions. Success, errors, interactions. Feels native.

5. Handle back button. On Android, back button should work:

tg.BackButton.show();
tg.BackButton.onClick(() => {
    // Navigate back in your app
});

6. Test on real devices. Telegram's desktop app and mobile behave differently.

Monetization Models

Freemium: Core free, premium features paid
Consumables: In-app currency, one-time purchases
Subscriptions: Monthly access via Telegram Stars or card
Ads: Banner or interstitial (less common)
Referrals: Users earn for inviting others

TON payments have lowest friction. No KYC, instant.

Complete Mini App tutorial — from zero to monetized — with code templates and deployment guide in AI Automation Blueprint 2026. $29 for the full developer guide.

DEV Community