Example HTML-file that contains a plain-JS interaction with Telegram Web Apps API. See live demo (with jQuery): Attach Bot.
- Official docs: https://core.telegram.org/bots/webapps
- Live Demo Bot: Attach Bot
- Telegram Promo Bot: Durger King
The Web App must be hosted somewhere. Hosting it on a GitHub repository is a quick, free way to do it:
- Create a repository (or fork this one)
- On the repository: Settings –> Pages:
- Source: Deploy from a branch
- Branch: master, / (root), Save
- 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
-
Show the user a special menu button (near the message input field):
- Go to Bot Father
- Select your bot
- To set button in Bio:
Bot Settings—Configure Mini App - Send a URL to your Web App (in this case,
https://revenkroz.github.io/telegram-web-app-bot-example/index.html) - To set corner button in Bot:
Bot Settings—Menu Button—Specify../Edit menu button URL - Send a URL to your Web App (in this case,
https://revenkroz.github.io/telegram-web-app-bot-example/index.html)
-
The second way is to send a button with the data that contains field
web_appwith a URL to a Web App:{ "text": "Test web_app", "web_app": { "url": "https://revenkroz.github.io/telegram-web-app-bot-example/index.html" } }
To connect a Web App to the Telegram client, place the script telegram-web-app.js in the <head> tag before any other scripts, using this code (more info):
<script src="https://telegram.org/js/telegram-web-app.js"></script>Once the script is connected, a window.Telegram.WebApp object will become available.