/telegram-web-app-bot-example

Telegram Web App for Bot Example

Primary LanguageHTML

Telegram Web Apps for Bots Example

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 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)

  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.