Skip to content

chimit/telegram-web-app-bot-example

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

8 Commits
 
 
 
 
 
 

Repository files navigation

Telegram Web Apps for Bots test

Example HTML-file that contains a basic interaction with Telegram Web Apps API. Based on Attach Bot.

Links

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://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
    2. Select your bot
    3. Bot SettingsMenu ButtonSpecify../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)
  2. The second way is to send a button with the data that contains field web_app with a URL to a Web App:

    {
        "text": "Test web_app",
        "web_app": {
            "url": "https://revenkroz.github.io/telegram-web-app-bot-example/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 <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.

3. Do the thing.

Releases

No releases published

Packages

No packages published

Languages

  • HTML 100.0%