{"id":14968453,"url":"https://github.com/softstack/telegram-mini-app","last_synced_at":"2025-04-05T22:06:34.603Z","repository":{"id":230009557,"uuid":"775383206","full_name":"softstack/telegram-mini-app","owner":"softstack","description":"Telegram Mini App Demo (TMA)","archived":false,"fork":false,"pushed_at":"2024-07-31T10:26:13.000Z","size":14654,"stargazers_count":190,"open_issues_count":6,"forks_count":194,"subscribers_count":5,"default_branch":"main","last_synced_at":"2025-03-29T20:06:29.397Z","etag":null,"topics":["botfather","evm","mini-app","react","solana","telegram","telegram-mini-app","tma","ton","walletconnect"],"latest_commit_sha":null,"homepage":"https://softstack.io","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/softstack.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-03-21T09:37:58.000Z","updated_at":"2025-03-14T22:35:38.000Z","dependencies_parsed_at":"2025-01-20T12:01:32.463Z","dependency_job_id":"59a804a5-34b2-43d3-a086-db46ee4cb35d","html_url":"https://github.com/softstack/telegram-mini-app","commit_stats":null,"previous_names":["softstackhq/telegram-mini-app","softstack/telegram-mini-app"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/softstack%2Ftelegram-mini-app","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/softstack%2Ftelegram-mini-app/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/softstack%2Ftelegram-mini-app/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/softstack%2Ftelegram-mini-app/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/softstack","download_url":"https://codeload.github.com/softstack/telegram-mini-app/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247406087,"owners_count":20933803,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["botfather","evm","mini-app","react","solana","telegram","telegram-mini-app","tma","ton","walletconnect"],"created_at":"2024-09-24T13:39:56.938Z","updated_at":"2025-04-05T22:06:34.579Z","avatar_url":"https://github.com/softstack.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Telegram Mini Apps Demo\n\nWelcome 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. \n\nReach out if you need custom telegram mini app development or support. \n\u003cp align=\"left\"\u003e\n\n  \u003ca href=\"https://t.me/yannikheinze\" alt=\"Telegram\" target=\"_blank\"\u003e\n    \u003cimg src=\"https://img.shields.io/badge/Telegram-2CA5E0?style=for-the-badge\u0026logo=WhatsApp\u0026logoColor=%231c1914\" /\u003e\n  \u003c/a\u003e\n\n  \u003ca href=\"mailto:hello@softstack.io\" alt=\"mail\" target=\"_blank\"\u003e\n    \u003cimg src=\"https://img.shields.io/badge/-Mail-f5f1ea?style=for-the-badge\u0026logo=gmail\u0026logoColor=%231c1914\" /\u003e\n  \u003c/a\u003e\n\n  \u003ca href=\"https://www.linkedin.com/company/softstack\" alt=\"LinkedIn\" target=\"_blank\"\u003e\n    \u003cimg src=\"https://img.shields.io/badge/-LinkedIn-f5f1ea?style=for-the-badge\u0026logo=Linkedin\u0026logoColor=%231c1914\" /\u003e\n  \u003c/a\u003e\n  \n  \u003ca href=\"https://softstack.io\" alt=\"Website\" target=\"_blank\"\u003e\n    \u003cimg src=\"https://img.shields.io/badge/-Website-f5f1ea?style=for-the-badge\u0026logo=nextdotjs\u0026logoColor=%231c1914\" /\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n## Why Telegram Mini Apps?\n\nTelegram Mini Apps are an innovative way to engage with your audience, offering various benefits:\n\n- **Seamless Integration**: Directly integrate your services into Telegram, one of the most popular messaging platforms with millions of active users.\n- **Enhanced User Experience**: Provide users with interactive and sophisticated web apps without the need for separate downloads or installations.\n- **Versatility**: From e-commerce and customer support to games and quizzes, the possibilities are endless.\n- **Rapid Development**: With the support for web technologies, developers can quickly create and deploy Mini Apps.\n\n## Getting Started\n\nThis 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.\n\n## Links\n* Official docs: [https://core.telegram.org/bots/webapps](https://core.telegram.org/bots/webapps)\n* Telegram Promo Bot: [Durger King](https://t.me/durgerkingbot)\n  \n## Quick setup\n\n#### 0. Host the Web App in GitHub Pages\n\nThe Web App must be hosted somewhere. Hosting it on a GitHub repository is a quick, free way to do it:\n\n1. Create a repository (or fork this one)\n2. On the repository: Settings \u003e Pages:\n    - Source: Deploy from a branch\n    - Branch: master, / (root), Save\n3. 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}`\n\n#### 1. Show the user a button to open a Web App. There are two ways:\n\n1. Show the user a special menu button (near the message input field):\n    1. Go to [Bot Father](https://t.me/BotFather)\n    2. Select your bot\n    3. `Bot Settings` — `Menu Button` — `Specify..`/`Edit menu button URL`\n    4. Send a URL to your Web App (in this case, `https://{github-username}.github.io/{repository-name}/index.html`)\n\n2. The second way is to send a button with the data that contains field `web_app` with a URL to a Web App:\n    ```json\n    {\n        \"text\": \"Test web_app\",\n        \"web_app\": {\n            \"url\": \"https://{github-username}.github.io/{repository-name}/index.html\"\n        }\n    }\n    ```\n\n#### 2. Add script to your Web App\n\nTo connect a Web App to the Telegram client, place the script `telegram-web-app.js` in the `\u003chead\u003e` tag before any other scripts, using this code ([more info](https://core.telegram.org/bots/webapps#initializing-web-apps)):\n```html\n\u003cscript src=\"https://telegram.org/js/telegram-web-app.js\"\u003e\u003c/script\u003e\n```\n\nOnce the script is connected, a `window.Telegram.WebApp` object will become available.\n\n# React + TypeScript + Vite\n\nThis template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.\n\nCurrently, two official plugins are available:\n\n- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh\n- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh\n\n## Expanding the ESLint configuration\n\nIf you are developing a production application, we recommend updating the configuration to enable type aware lint rules:\n\n- Configure the top-level `parserOptions` property like this:\n\n```js\nexport default {\n  // other rules...\n  parserOptions: {\n    ecmaVersion: 'latest',\n    sourceType: 'module',\n    project: ['./tsconfig.json', './tsconfig.node.json'],\n    tsconfigRootDir: __dirname,\n  },\n}\n```\n\n- Replace `plugin:@typescript-eslint/recommended` to `plugin:@typescript-eslint/recommended-type-checked` or `plugin:@typescript-eslint/strict-type-checked`\n- Optionally add `plugin:@typescript-eslint/stylistic-type-checked`\n- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and add `plugin:react/recommended` \u0026 `plugin:react/jsx-runtime` to the `extends` list\n\n\n### Support and Custom Development\n\nNeed 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.\n\nLet's build something great together.\n\n\u003cp align=\"left\"\u003e\n\n  \u003ca href=\"https://t.me/yannikheinze\" alt=\"Telegram\" target=\"_blank\"\u003e\n    \u003cimg src=\"https://img.shields.io/badge/Telegram-2CA5E0?style=for-the-badge\u0026logo=WhatsApp\u0026logoColor=%231c1914\" /\u003e\n  \u003c/a\u003e\n\n  \u003ca href=\"mailto:hello@softstack.io\" alt=\"mail\" target=\"_blank\"\u003e\n    \u003cimg src=\"https://img.shields.io/badge/-Mail-f5f1ea?style=for-the-badge\u0026logo=gmail\u0026logoColor=%231c1914\" /\u003e\n  \u003c/a\u003e\n\n  \u003ca href=\"https://www.linkedin.com/company/softstack\" alt=\"LinkedIn\" target=\"_blank\"\u003e\n    \u003cimg src=\"https://img.shields.io/badge/-LinkedIn-f5f1ea?style=for-the-badge\u0026logo=Linkedin\u0026logoColor=%231c1914\" /\u003e\n  \u003c/a\u003e\n  \n  \u003ca href=\"https://softstack.io\" alt=\"Website\" target=\"_blank\"\u003e\n    \u003cimg src=\"https://img.shields.io/badge/-Website-f5f1ea?style=for-the-badge\u0026logo=nextdotjs\u0026logoColor=%231c1914\" /\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsoftstack%2Ftelegram-mini-app","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsoftstack%2Ftelegram-mini-app","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsoftstack%2Ftelegram-mini-app/lists"}