├── .gitignore ├── README.md └── index.html /.gitignore: -------------------------------------------------------------------------------- 1 | .idea 2 | .vscode 3 | frp 4 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Telegram Web Apps for Bots / Mini App Example 2 | 3 | Example HTML-file that contains a plain-JS interaction with Telegram Web Apps API. 4 | See live demo (with jQuery): [Attach Bot](https://t.me/asmico_attach_bot). 5 | 6 | ## Links 7 | * Official docs: https://core.telegram.org/bots/webapps 8 | * Live Demo Bot: [Attach Bot](https://t.me/asmico_attach_bot) 9 | * Telegram Promo Bot: [Durger King](https://t.me/durgerkingbot) 10 | 11 | ## Quick setup 12 | 13 | #### 0. Optional: Host the Web App in GitHub Pages 14 | 15 | The Web App must be hosted somewhere. Hosting it on a GitHub repository is a quick, free way to do it: 16 | 17 | 1. Create a repository (or fork this one) 18 | 2. On the repository: Settings –> Pages: 19 | - Source: Deploy from a branch 20 | - Branch: master, / (root), Save 21 | 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` 22 | 23 | #### 1. Show the user a button to open a Web App. There are two ways: 24 | 25 | 1. Show the user a special menu button (near the message input field): 26 | 1. Go to [Bot Father](https://t.me/BotFather) 27 | 2. Select your bot 28 | 3. To set button in Bio: `Bot Settings` — `Configure Mini App` 29 | 4. Send a URL to your Web App (in this case, `https://revenkroz.github.io/telegram-web-app-bot-example/index.html`) 30 | 5. To set corner button in Bot: `Bot Settings` — `Menu Button` — `Specify..`/`Edit menu button URL` 31 | 6. Send a URL to your Web App (in this case, `https://revenkroz.github.io/telegram-web-app-bot-example/index.html`) 32 | 33 | 2. The second way is to send a button with the data that contains field `web_app` with a URL to a Web App: 34 | ```json 35 | { 36 | "text": "Test web_app", 37 | "web_app": { 38 | "url": "https://revenkroz.github.io/telegram-web-app-bot-example/index.html" 39 | } 40 | } 41 | ``` 42 | 43 | #### 2. Add script to your Web App 44 | 45 | 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)): 46 | ```html 47 | 48 | ``` 49 | 50 | Once the script is connected, a `window.Telegram.WebApp` object will become available. 51 | 52 | #### 3. Do the thing! 53 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 21 | 22 | 362 | 363 | 364 | 365 | 366 |

367 | 368 | 369 | 370 | 371 | 372 | 373 | 374 | 375 | 376 | 377 | 378 | 379 | 380 | 381 | 382 |

388 | 392 |

Header: 393 | 398 |

399 |

Background: 400 | 405 |

406 |

Bottom Bar: 407 | 413 |

414 |

415 | 416 |

417 | 418 | 419 |

Test links:

420 |

Regular link #1 (opens inside webview)
target="_blank" link (opens outside webview)
window.open() link (opens outside webview)
LikeBot t.me link (opens inside Telegram app)
web_app_open_tg_link() (opens inside Telegram app)
web_app_open_link() (opens outside webview)
VoteBot tg:// link (does not open)
web_app_open_link({try_instant_view:true}) (opens IV inside Telegram app)
web_app_open_tg_link(webapp_direct_link) (opens with confirm for the first time, then without)

431 |

telegram.org (opens in Chrome)
telegram.org (opens in Firefox)
telegram.org (opens in Safari)
telegram.org (opens in Opera)
Return back (Android only)

438 |

Share picture to story
Share picture to story (with caption)
Share picture to story (with link widget)
Share video to story (with caption and link widget)

444 |

449 |

Stickerpack
Stickerpack (nocache)

453 |

Check Home Screen Status
Add to Home Screen

457 |

Set emoji status
Set emoji status for 5 min
Set emoji status (invalid id)

462 | 463 |

Test permissions:

464 |

465 |

472 |

Request write access
Request phone number
Request server time (invokes custom method)

477 |

478 | 479 |

Sensors:

480 |

481 |

Start Accelerometer
Start DeviceOrientation(need_absolute=false)
Start DeviceOrientation(need_absolute=true)
Start Gyroscope

487 |

488 | 489 |

Test alerts:

490 |

491 |

alert
confirm
prompt

496 |

505 |

506 | 507 |

Haptics:

508 |

Impact: heavy, light, medium, rigid, soft
Notification: error, success, warning
Selection: changed

513 | 514 |

Cloud storage:

515 |

516 | 517 | 518 | 519 | 520 | 521 | 522 | 523 | 524 | 525 | 526 | 527 | 528 | 529 | 533 | 534 | 535 |

Key	Value
		530 \| 531 \| 532 \|

536 |

537 | 538 |

Biometrics:

539 |

540 |

isInited: false
available: false
type:
access_requested: false (Request access)
access_granted: false (Open settings)
token_saved: false (Set token, Remove token)
device_id:
Request auth

550 |

551 | 552 |

Location:

553 |

554 |

isInited: false
available: false
access_requested: false (Request location)
access_granted: false 559 | (Open settings) 560 |

562 |

563 | 564 |

565 |

566 | Data passed to webview. 567 | Checking hash..., 568 | checking signature... 569 |

570 |

571 |

572 | Theme params 573 |

574 |

575 | Version: , 576 | platform: 577 |

578 |

579 | 580 |

581 |

582 | 583 |

584 |

585 |

586 |

587 |

588 |

589 | 590 | 1623 | 1624 | 1832 | 1833 | 1834 | 1835 | --------------------------------------------------------------------------------