[{"data":1,"prerenderedAt":303},["ShallowReactive",2],{"blog-en-telegram-mini-app-guide":3},{"id":4,"title":5,"body":6,"date":287,"description":288,"extension":289,"meta":290,"navigation":107,"path":291,"readTime":292,"seo":293,"slug":294,"stem":295,"tags":296,"__hash__":302},"blogEn\u002Fen\u002Fblog\u002Ftelegram-mini-app-guide.md","Telegram Mini App — What It Is, How It Works, and When You Need One",{"type":7,"value":8,"toc":280},"minimark",[9,13,16,21,24,27,30,67,144,151,178,182,189,195,201,205,208,222,225,229,240,243,263,266,270,273,276],[10,11,12],"p",{},"A client calls and says: \"I want an app inside Telegram.\" I used to ask — a bot or a mobile app? Now there's a third option, and it's often the best one.",[10,14,15],{},"A Telegram Mini App is a full web application that opens right inside the messenger. The user taps a button in the bot, and instead of a chain of messages, they get a proper interface with buttons, forms, images — just like a normal website.",[17,18,20],"h2",{"id":19},"how-its-different-from-a-regular-bot","How it's different from a regular bot",[10,22,23],{},"A regular bot is a conversation. Commands, buttons, text. It works great for linear tasks: notifications, FAQ, simple forms. But as soon as something more complex comes up — a shopping cart, a schedule with filters, a dashboard with charts — the bot starts to drag down the UX.",[10,25,26],{},"A Mini App is HTML + CSS + JavaScript in a separate window overlaid on the chat. The user never leaves Telegram but works with a full-featured interface. Telegram passes the user's data to the app, and the app can send data back to the bot.",[10,28,29],{},"Here's what a Mini App gets out of the box:",[31,32,33,42,45,51,61,64],"ul",{},[34,35,36,37,41],"li",{},"Full-screen mode (",[38,39,40],"code",{},"tg.expand()",")",[34,43,44],{},"User data without authentication: name, ID, username",[34,46,47,48,41],{},"Sending data back to the bot (",[38,49,50],{},"tg.sendData()",[34,52,53,54,57,58,41],{},"Native confirmations (",[38,55,56],{},"tg.showAlert()",", ",[38,59,60],{},"tg.showConfirm()",[34,62,63],{},"A back button in the Telegram header",[34,65,66],{},"Automatic theme adaptation (dark\u002Flight)",[68,69,74],"pre",{"className":70,"code":71,"language":72,"meta":73,"style":73},"language-javascript shiki shiki-themes github-light github-dark","\u002F\u002F Initialization\nconst tg = window.Telegram.WebApp\ntg.ready()\ntg.expand()\n\n\u002F\u002F Get user data\nconst user = tg.initDataUnsafe.user\nconsole.log(user.first_name) \u002F\u002F \"Alex\"\n\n\u002F\u002F Send data back to the bot\ntg.sendData(JSON.stringify({ action: 'order', product_id: 42 }))\n","javascript","",[38,75,76,84,90,96,102,109,115,121,127,132,138],{"__ignoreMap":73},[77,78,81],"span",{"class":79,"line":80},"line",1,[77,82,83],{},"\u002F\u002F Initialization\n",[77,85,87],{"class":79,"line":86},2,[77,88,89],{},"const tg = window.Telegram.WebApp\n",[77,91,93],{"class":79,"line":92},3,[77,94,95],{},"tg.ready()\n",[77,97,99],{"class":79,"line":98},4,[77,100,101],{},"tg.expand()\n",[77,103,105],{"class":79,"line":104},5,[77,106,108],{"emptyLinePlaceholder":107},true,"\n",[77,110,112],{"class":79,"line":111},6,[77,113,114],{},"\u002F\u002F Get user data\n",[77,116,118],{"class":79,"line":117},7,[77,119,120],{},"const user = tg.initDataUnsafe.user\n",[77,122,124],{"class":79,"line":123},8,[77,125,126],{},"console.log(user.first_name) \u002F\u002F \"Alex\"\n",[77,128,130],{"class":79,"line":129},9,[77,131,108],{"emptyLinePlaceholder":107},[77,133,135],{"class":79,"line":134},10,[77,136,137],{},"\u002F\u002F Send data back to the bot\n",[77,139,141],{"class":79,"line":140},11,[77,142,143],{},"tg.sendData(JSON.stringify({ action: 'order', product_id: 42 }))\n",[10,145,146,147,150],{},"On the bot side, aiogram receives this through the ",[38,148,149],{},"web_app_data"," handler:",[68,152,156],{"className":153,"code":154,"language":155,"meta":73,"style":73},"language-python shiki shiki-themes github-light github-dark","@router.message(F.web_app_data)\nasync def webapp_data(message: Message):\n    data = json.loads(message.web_app_data.data)\n    await message.answer(f\"Order received for product {data['product_id']}\")\n","python",[38,157,158,163,168,173],{"__ignoreMap":73},[77,159,160],{"class":79,"line":80},[77,161,162],{},"@router.message(F.web_app_data)\n",[77,164,165],{"class":79,"line":86},[77,166,167],{},"async def webapp_data(message: Message):\n",[77,169,170],{"class":79,"line":92},[77,171,172],{},"    data = json.loads(message.web_app_data.data)\n",[77,174,175],{"class":79,"line":98},[77,176,177],{},"    await message.answer(f\"Order received for product {data['product_id']}\")\n",[17,179,181],{"id":180},"real-projects-ive-built","Real projects I've built",[10,183,184,188],{},[185,186,187],"strong",{},"Fitness tracker for gyms."," The client wanted members to see their schedule and book trainings inside Telegram. With a regular bot, that's 4-5 dialog steps. In a Mini App — one screen with a schedule and a \"Book now\" button. Conversion went up.",[10,190,191,194],{},[185,192,193],{},"Shopping cart."," While a bot's cart is awkward \"you added an item, type \u002Fcart to view it,\" a Mini App is a full ecommerce interface with photos, quantities, and totals.",[10,196,197,200],{},[185,198,199],{},"Order form for complex services."," When you need to select multiple parameters, upload photos, write a comment — a bot is a nightmare, a Mini App is a normal form.",[17,202,204],{"id":203},"when-a-mini-app-is-not-needed","When a Mini App is NOT needed",[10,206,207],{},"I don't recommend a Mini App when:",[31,209,210,213,216,219],{},[34,211,212],{},"The task is simple notifications or broadcasts",[34,214,215],{},"The audience is older and less tech-savvy",[34,217,218],{},"There's no budget or time — Mini Apps are more complex to build",[34,220,221],{},"You need push notifications without user action (bots handle this better)",[10,223,224],{},"Simple rule: if the interface fits in 3-4 bot steps — build a bot. If not — go Mini App.",[17,226,228],{"id":227},"tech-stack-and-pricing","Tech stack and pricing",[10,230,231,232,235,236,239],{},"I build Mini Apps with ",[185,233,234],{},"Vue.js + Vite"," — quick to set up, familiar tooling. You can use React or vanilla JS too. Backend is FastAPI or the same aiogram through ",[38,237,238],{},"sendData",".",[10,241,242],{},"Real-world pricing:",[31,244,245,251,257],{},[34,246,247,248],{},"Simple Mini App (form + 2-3 screens): ",[185,249,250],{},"$200–350",[34,252,253,254],{},"Medium (shop, schedule, profile): ",[185,255,256],{},"$400–700",[34,258,259,260],{},"Complex (dashboard, analytics, integrations): ",[185,261,262],{},"$800+",[10,264,265],{},"I always charge Mini App hosting separately — it's a regular frontend that needs its own domain and deployment.",[17,267,269],{"id":268},"bottom-line","Bottom line",[10,271,272],{},"A Mini App isn't a replacement for a bot — it's a complement. Where a bot starts breaking down in multi-screen dialogs, a Mini App saves the day. Users figure it out quickly — Telegram has already trained them for it.",[10,274,275],{},"If you have questions about implementation — write to me, let's figure it out.",[277,278,279],"style",{},"html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":73,"searchDepth":86,"depth":86,"links":281},[282,283,284,285,286],{"id":19,"depth":86,"text":20},{"id":180,"depth":86,"text":181},{"id":203,"depth":86,"text":204},{"id":227,"depth":86,"text":228},{"id":268,"depth":86,"text":269},"2025-05-20","Explaining how Mini Apps differ from regular bots, when to build one, and how much it costs. With real project examples.","md",{},"\u002Fen\u002Fblog\u002Ftelegram-mini-app-guide","7 min",{"title":5,"description":288},"telegram-mini-app-guide","en\u002Fblog\u002Ftelegram-mini-app-guide",[297,298,299,300,301],"Telegram","Mini App","Vue.js","WebApp","Development","N4gjep9ytzFSIM95ZFjNYgrO3VMy75wfybAiunxHJAY",1785055845269]