skip to Main Content

I have created a web app for my bot and also integrated the telegram "web app Script"

https://telegram.org/js/telegram-web-app.js

The code of my web app is shown in the below.

The only data I’m receiving from window.Telegram.WebApp is this :

using reply Markup keyboard:

{
  "initData": "",
  "initDataUnsafe": {
    
  },
  "version": "1.0",
  "colorScheme": "dark",
  "themeParams": {
    "bg_color": "#17212b",
    "button_color": "#5288c1",
    "button_text_color": "#ffffff",
    "hint_color": "#708499",
    "link_color": "#6ab3f3",
    "text_color": "#f5f5f5"
  },
  "isExpanded": true,
  "viewportHeight": 621,
  "viewportStableHeight": 621,
  "MainButton": {
    "text": "CONTINUE",
    "color": "#5288c1",
    "textColor": "#ffffff",
    "isVisible": false,
    "isProgressVisible": false,
    "isActive": true
  }
}

using inline button :

{
  "initData": "query_id=AAFdL6MsAAAAA122voywCSO1y&user=%7B%22id%22%3A748891997%2C%22first_name%22%3A%22%F0%9D%97%A6%F0%9D%97%94%F0%9D%97%A0%F0%9D%97%9C%22%2C%22last_name%22%3A%22%22%2C%22username%22%3A%22samyar%22%2C%22language_code%22%3A%22en%22%7D&auth_date=1651749255&hash=34f3a0de3e0dc7b8d5735d0a85b265763c5c490917180fef40e4df61c819949e",
  "initDataUnsafe": {
    "query_id": "AAFdL6MsAAAAAFbvoywCSO1y",
    "user": {
      "id": 748291957,
      "first_name": "𝗦𝗔𝗠𝗜",
      "last_name": "",
      "username": "samyar",
      "language_code": "en"
    },
    "auth_date": "1651749255",
    "hash": "34f3a0de3e0dc7b8d5735d0a85b265265cdc490917280fef40e4df61c819949e"
  },
  "version": "1.0",
  "colorScheme": "dark",
  "themeParams": {
    "bg_color": "#17212b",
    "button_color": "#5288c1",
    "button_text_color": "#ffffff",
    "hint_color": "#708499",
    "link_color": "#6ab3f3",
    "text_color": "#f5f5f5"
  },
  "isExpanded": true,
  "viewportHeight": 621,
  "viewportStableHeight": 621,
  "MainButton": {
    "text": "CONTINUE",
    "color": "#5288c1",
    "textColor": "#ffffff",
    "isVisible": false,
    "isProgressVisible": false,
    "isActive": true
  }
}

I need to access many other options, but I don’t have.i just need the user’s profile info.

The WebApp :

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="https://telegram.org/js/telegram-web-app.js"></script>
    <title>Web app</title>
  </head>
  <body>
    <div class="user-info">
      <!-- Data -->
      <img id="profile" />
      <h1 id="name"></h1>
      <h3 id="username"></h3>
      <!--  -->
      <p id="test">
        This page is a simple webapp integrated with telegram bot 💥
      </p>
    </div>
    <script>
      const profileEl = document.getElementById("profile");
      const nameEl = document.getElementById("name");
      const usernameEl = document.getElementById("username");
      const test = document.getElementById("test");
      window.Telegram.WebApp.ready();
      test.innerText = `${JSON.stringify(window.Telegram.WebApp)}`;

      const { first_name, last_name, username, photo_url } =
        window.Telegram.WebAppUser;

      // set the profile
      profileEl.src = photo_url;

      nameEl.innerText = `${first_name} ${last_name}`;

      usernameEl.innerText = username;
    </script>
  </body>
</html>

The bot code :
basically, it’s just going to send an replyMarkupKeyboard


@app.on_message(filters.private)
async def hello(client, message):
    # await message.reply("Just a web app integrated withen telegram! 😀",
    #                     reply_markup=InlineKeyboardMarkup(
    #             [
    #                 [
    #                     InlineKeyboardButton(
    #                       "Open Web app 💥",web_app=WebAppInfo(url="https://telegramwebapp.netlify.app"))
    #                 ]
    #             ]
    #         ))
    await message.reply("Just a web app integrated withen telegram! 😀",
                        reply_markup=ReplyKeyboardMarkup(
                [
                    [
                        KeyboardButton(
                          "Open Web app 💥",
                          web_app=WebAppInfo(url="https://telegramwebapp.netlify.app"))
                    ]
                ]
            ))

2

Answers


  1. I also stumbled upon this problem. For my case it was a good decision to implement web app by menu button

    https://core.telegram.org/bots/webapps#launching-web-apps-from-the-menu-button

    By this method I got the full user information

    Login or Signup to reply.
  2. const { first_name, last_name, username } = window.Telegram.WebApp.initDataUnsafe.user;

    Works fine for me.

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search