A Beginner’s Guide to Creating a Telegram Mini App in 2024

by

Telegram Mini Apps have become a popular way to enhance user experiences within the Telegram ecosystem. Whether you’re building a game, a productivity tool, or an e-commerce solution, Mini Apps offer a seamless way to interact with users directly inside Telegram. In this guide how to create mini apps, we’ll walk you through the process of creating your first Telegram Mini App in 2024.

What is a Telegram Mini App?

A Telegram Mini App is a web-based application that runs inside Telegram using the Web Apps API. These apps can be launched from bot messages, inline buttons, or menus, providing a smooth experience without requiring users to leave Telegram.

Prerequisites

Before getting started, ensure you have the following:

  • A Telegram account
  • A Telegram Bot (created using @BotFather)
  • Basic knowledge of HTML, CSS, JavaScript
  • A server to host your app (optional for local development)

Step 1: Create a Telegram Bot

  1. Open Telegram and search for @BotFather.
  2. Start a chat and send the command /newbot.
  3. Follow the instructions to set up your bot and get your bot token.
  4. Save the bot token, as it will be required to communicate with Telegram’s API.

Step 2: Set Up Your Web App

Since Telegram Mini Apps are web-based, you need to create a simple web page.

<!DOCTYPE html>

<html lang=”en”>

<head>

    <meta charset=”UTF-8″>

    <meta name=”viewport” content=”width=device-width, initial-scale=1.0″>

    <title>My Telegram Mini App</title>

    <script src=”https://telegram.org/js/telegram-web-app.js”></script>

    <style>

        body { text-align: center; font-family: Arial, sans-serif; }

        button { padding: 10px 20px; font-size: 16px; }

    </style>

</head>

<body>

    <h1>Welcome to My Mini App</h1>

    <button id=”close”>Close App</button>

    <script>

        let tg = window.Telegram.WebApp;

        tg.expand(); // Expands the app to full screen

        document.getElementById(“close”).addEventListener(“click”, () => {

            tg.close();

        });

    </script>

</body>

</html>

This is a basic HTML page that utilizes the Telegram Web Apps API to create a Mini App.

Step 3: Hosting Your Web App

You need to upload your HTML file to a hosting service. Some free options include:

  • GitHub Pages
  • Vercel
  • Netlify

After deploying, note the URL of your hosted app.

Step 4: Configure the Bot to Use the Mini App

Once your web app is live, configure your bot to launch it.

  1. Use the Telegram Bot API to set the web app:

curl -X POST https://api.telegram.org/bot<YOUR_BOT_TOKEN>/setChatMenuButton \

     -H “Content-Type: application/json” \

     -d ‘{“menu_button”: {“type”: “web_app”, “text”: “Open App”, “web_app”: {“url”: “https://your-hosted-app.com”}}}’

  1. Now, when users interact with your bot, they will see an “Open App” button.

Step 5: Enhancing the Mini App

Retrieving User Data

You can access user information using the Telegram Web Apps API:

let user = tg.initDataUnsafe.user;

console.log(`Hello, ${user.first_name}`);

Sending Data to Your Bot

If you need to send data to your bot for processing:

fetch(`https://api.telegram.org/bot<YOUR_BOT_TOKEN>/sendMessage`, {

    method: “POST”,

    headers: { “Content-Type”: “application/json” },

    body: JSON.stringify({

        chat_id: user.id,

        text: “Hello from the Mini App!”

    })

});

Step 6: Testing Your Mini App

To test your Mini App:

  • Open your bot in Telegram.
  • Click the Open App button.
  • Interact with the app and ensure everything works smoothly.

Conclusion

Congratulations! You’ve successfully built a basic Telegram Mini App. You can now explore more advanced features like authentication, payments, and integrating third-party APIs to create a richer experience.

Ready to take your Mini App to the next level? Start experimenting and share your creations with the Telegram community!