I have created a web app for my bot and also integrated the telegram "web app Script"
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=""></script> <title>Web app</title> </head> <body> <div> <!-- Data --> <img /> <h1></h1> <h3></h3> <!-- --> <p> 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="")) # ] # ] # )) await message.reply("Just a web app integrated withen telegram! 😀", reply_markup=ReplyKeyboardMarkup( [ [ KeyboardButton( "Open Web app 💥", web_app=WebAppInfo(url="")) ] ] )) 2 Answers
I also stumbled upon this problem. For my case it was a good decision to implement web app by menu button
By this method I got the full user information
const { first_name, last_name, username } = window.Telegram.WebApp.initDataUnsafe.user;
Works fine for me.
1
