Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/softstack/telegram-mini-app
Telegram Mini App Demo (Wallet Connect, Solana Connect and TON Connect)
https://github.com/softstack/telegram-mini-app
botfather evm mini-app react solana telegram telegram-mini-app tma ton walletconnect
Last synced: 6 days ago
JSON representation
Telegram Mini App Demo (Wallet Connect, Solana Connect and TON Connect)
- Host: GitHub
- URL: https://github.com/softstack/telegram-mini-app
- Owner: softstack
- Created: 2024-03-21T09:37:58.000Z (7 months ago)
- Default Branch: main
- Last Pushed: 2024-05-13T07:46:39.000Z (5 months ago)
- Last Synced: 2024-05-13T08:34:33.004Z (5 months ago)
- Topics: botfather, evm, mini-app, react, solana, telegram, telegram-mini-app, tma, ton, walletconnect
- Language: TypeScript
- Homepage: https://softstack.io
- Size: 13.8 MB
- Stars: 171
- Watchers: 1
- Forks: 17
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Telegram Mini Apps Demo
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.
## Why Telegram Mini Apps?
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.
## Getting Started
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.
## Links
* Official docs: [https://core.telegram.org/bots/webapps](https://core.telegram.org/bots/webapps)
* Telegram Promo Bot: [Durger King](https://t.me/durgerkingbot)
## Quick setup
#### 0. Host the Web App in GitHub Pages
The Web App must be hosted somewhere. Hosting it on a GitHub repository is a quick, free way to do it:
1. Create a repository (or fork this one)
2. On the repository: Settings > Pages:
- Source: Deploy from a branch
- Branch: master, / (root), Save
3. 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}`
#### 1. Show the user a button to open a Web App. There are two ways:
1. Show the user a special menu button (near the message input field):
1. Go to [Bot Father](https://t.me/BotFather)
2. Select your bot
3. `Bot Settings` — `Menu Button` — `Specify..`/`Edit menu button URL`
4. Send a URL to your Web App (in this case, `https://{github-username}.github.io/{repository-name}/index.html`)
2. The second way is to send a button with the data that contains field `web_app` with a URL to a Web App:
```json
{
"text": "Test web_app",
"web_app": {
"url": "https://{github-username}.github.io/{repository-name}/index.html"
}
}
```
#### 2. Add script to your Web App
To connect a Web App to the Telegram client, place the script `telegram-web-app.js` in the `` tag before any other scripts, using this code ([more info](https://core.telegram.org/bots/webapps#initializing-web-apps)):
```html
```
Once the script is connected, a `window.Telegram.WebApp` object will become available.
# React + TypeScript + Vite
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](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
## Expanding the ESLint configuration
If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
- Configure the top-level `parserOptions` property like this:
```js
export default {
// other rules...
parserOptions: {
ecmaVersion: 'latest',
sourceType: 'module',
project: ['./tsconfig.json', './tsconfig.node.json'],
tsconfigRootDir: __dirname,
},
}
```
- Replace `plugin:@typescript-eslint/recommended` to `plugin:@typescript-eslint/recommended-type-checked` or `plugin:@typescript-eslint/strict-type-checked`
- Optionally add `plugin:@typescript-eslint/stylistic-type-checked`
- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and add `plugin:react/recommended` & `plugin:react/jsx-runtime` to the `extends` list
### Support and Custom Development
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.