Telegram Web App for Bots Object Is Not Contain User Data
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...
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 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=""))
# ]
# ]
# ))
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.
Elena Rostova holds a Master's degree in Public Health Journalism. She covers groundbreaking medical research, holistic wellness trends, mental health awareness, and nutritional science.
