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
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
const { first_name, last_name, username } = window.Telegram.WebApp.initDataUnsafe.user;
Works fine for me.