https://github.com/khulnasoft/telegram
https://github.com/khulnasoft/telegram
Last synced: 7 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/khulnasoft/telegram
- Owner: khulnasoft
- Created: 2024-09-06T18:04:58.000Z (about 1 year ago)
- Default Branch: master
- Last Pushed: 2024-09-06T18:31:13.000Z (about 1 year ago)
- Last Synced: 2025-02-01T02:16:26.607Z (9 months ago)
- Language: HTML
- Homepage: https://khulnasoft.github.io/telegram/
- Size: 156 KB
- Stars: 0
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Telegram Web Apps for Bots Example
Example HTML-file that contains a plain-JS interaction with Telegram Web Apps API.
Live demo: [Attach Bot](https://t.me/khulnasoft_bot).
## Links
* Official docs: https://core.telegram.org/bots/webapps
* Live Demo Bot: [Attach Bot](https://t.me/khulnasoft_bot)
* Telegram Promo Bot: [Durger King](https://t.me/khulnasoft_bot)
## 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}`. In this case: `https://khulnasoft.github.io/telegram/index.html`
#### 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://khulnasoft.github.io/telegram/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://khulnasoft.github.io/telegram/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.
#### 3. Do the thing.