Welcome to our guide on developing Telegram Mini Apps! Telegram Mini Apps offer a seamless way to enhance user interaction within the Telegram ecosystem, allowing businesses, developers, and creators to integrate custom web applications directly into Telegram chats. These lightweight, highly interactive web apps can be accessed through special menu buttons or inline buttons in messages, providing users with a rich and immersive experience without ever leaving the chat interface.
Reach out if you need custom telegram mini app development or support.
Telegram Mini Apps are an innovative way to engage with your audience, offering various benefits:
- Seamless Integration: Directly integrate your services into Telegram, one of the most popular messaging platforms with millions of active users.
- Enhanced User Experience: Provide users with interactive and sophisticated web apps without the need for separate downloads or installations.
- Versatility: From e-commerce and customer support to games and quizzes, the possibilities are endless.
- Rapid Development: With the support for web technologies, developers can quickly create and deploy Mini Apps.
This repository serves as a starter guide for anyone looking to develop Telegram Mini Apps. Whether you're a seasoned developer or just starting out, our resources will help you understand the essentials and best practices for creating engaging Mini Apps within Telegram.
- Official docs: https://core.telegram.org/bots/webapps
- Telegram Promo Bot: Durger King
The Web App must be hosted somewhere. Hosting it on a GitHub repository is a quick, free way to do it:
- Create a repository (or fork this one)
- On the repository: Settings > Pages:
- Source: Deploy from a branch
- Branch: master, / (root), Save
- Wait a few minutes for the web to be deployed. It will be available at:
https://{github-username}.github.io/{repository-name}/{location-inside-repository}
-
Show the user a special menu button (near the message input field):
- Go to Bot Father
- Select your bot
Bot Settings—Menu Button—Specify../Edit menu button URL- Send a URL to your Web App (in this case,
https://{github-username}.github.io/{repository-name}/index.html)
-
The second way is to send a button with the data that contains field
web_appwith a URL to a Web App:{ "text": "Test web_app", "web_app": { "url": "https://{github-username}.github.io/{repository-name}/index.html" } }
To connect a Web App to the Telegram client, place the script telegram-web-app.js in the <head> tag before any other scripts, using this code (more info):
<script src="https://telegram.org/js/telegram-web-app.js"></script>Once the script is connected, a window.Telegram.WebApp object will become available.
This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
Currently, two official plugins are available:
- @vitejs/plugin-react uses Babel for Fast Refresh
- @vitejs/plugin-react-swc uses SWC for Fast Refresh
If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
- Configure the top-level
parserOptionsproperty like this:
export default {
// other rules...
parserOptions: {
ecmaVersion: 'latest',
sourceType: 'module',
project: ['./tsconfig.json', './tsconfig.node.json'],
tsconfigRootDir: __dirname,
},
}- Replace
plugin:@typescript-eslint/recommendedtoplugin:@typescript-eslint/recommended-type-checkedorplugin:@typescript-eslint/strict-type-checked - Optionally add
plugin:@typescript-eslint/stylistic-type-checked - Install eslint-plugin-react and add
plugin:react/recommended&plugin:react/jsx-runtimeto theextendslist
Need custom development or have questions about Telegram Mini Apps? Softstack is here to help. Reach out to us for bespoke development services, consultation, or any inquiries related to Telegram Mini Apps and the TON ecosystem. Our team is committed to providing the support and expertise you need to succeed.
Let's build something great together.
