Skip to content

Commit

Permalink
Merge pull request #34 from revenkroz/bot_api_8
Browse files Browse the repository at this point in the history
Up to Bot API 8.0
  • Loading branch information
revenkroz authored Nov 23, 2024
2 parents 8a03611 + 7a59b44 commit c4ebc90
Show file tree
Hide file tree
Showing 2 changed files with 602 additions and 70 deletions.
20 changes: 11 additions & 9 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
# Telegram Web Apps for Bots Example
# Telegram Web Apps for Bots / Mini App Example

Example HTML-file that contains a plain-JS interaction with Telegram Web Apps API.
Live demo: [Attach Bot](https://t.me/asmico_attach_bot).
See live demo (with jQuery): [Attach Bot](https://t.me/asmico_attach_bot).

## Links
* Official docs: https://core.telegram.org/bots/webapps
Expand All @@ -10,23 +10,25 @@ Live demo: [Attach Bot](https://t.me/asmico_attach_bot).

## Quick setup

#### 0. Host the Web App in GitHub Pages
#### 0. Optional: 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:
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://revenkroz.github.io/telegram-web-app-bot-example/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://revenkroz.github.io/telegram-web-app-bot-example/index.html`)
1. Go to [Bot Father](https://t.me/BotFather)
2. Select your bot
3. To set button in Bio: `Bot Settings``Configure Mini App`
4. Send a URL to your Web App (in this case, `https://revenkroz.github.io/telegram-web-app-bot-example/index.html`)
5. To set corner button in Bot: `Bot Settings``Menu Button``Specify..`/`Edit menu button URL`
6. Send a URL to your Web App (in this case, `https://revenkroz.github.io/telegram-web-app-bot-example/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
Expand All @@ -47,4 +49,4 @@ To connect a Web App to the Telegram client, place the script `telegram-web-app.

Once the script is connected, a `window.Telegram.WebApp` object will become available.

#### 3. Do the thing.
#### 3. Do the thing!
Loading

0 comments on commit c4ebc90

Please sign in to comment.