webappbot.py¶
1#!/usr/bin/env python
2# pylint: disable=unused-argument
3# This program is dedicated to the public domain under the CC0 license.
4
5"""
6Simple example of a Telegram WebApp which displays a color picker.
7The static website for this website is hosted by the PTB team for your convenience.
8Currently only showcases starting the WebApp via a KeyboardButton, as all other methods would
9require a bot token.
10"""
11import json
12import logging
13
14from telegram import KeyboardButton, ReplyKeyboardMarkup, ReplyKeyboardRemove, Update, WebAppInfo
15from telegram.ext import Application, CommandHandler, ContextTypes, MessageHandler, filters
16
17# Enable logging
18logging.basicConfig(
19 format="%(asctime)s - %(name)s - %(levelname)s - %(message)s", level=logging.INFO
20)
21# set higher logging level for httpx to avoid all GET and POST requests being logged
22logging.getLogger("httpx").setLevel(logging.WARNING)
23
24logger = logging.getLogger(__name__)
25
26
27# Define a `/start` command handler.
28async def start(update: Update, context: ContextTypes.DEFAULT_TYPE) -> None:
29 """Send a message with a button that opens a the web app."""
30 await update.message.reply_text(
31 "Please press the button below to choose a color via the WebApp.",
32 reply_markup=ReplyKeyboardMarkup.from_button(
33 KeyboardButton(
34 text="Open the color picker!",
35 web_app=WebAppInfo(url="https://python-telegram-bot.org/static/webappbot"),
36 )
37 ),
38 )
39
40
41# Handle incoming WebAppData
42async def web_app_data(update: Update, context: ContextTypes.DEFAULT_TYPE) -> None:
43 """Print the received data and remove the button."""
44 # Here we use `json.loads`, since the WebApp sends the data JSON serialized string
45 # (see webappbot.html)
46 data = json.loads(update.effective_message.web_app_data.data)
47 await update.message.reply_html(
48 text=(
49 f"You selected the color with the HEX value <code>{data['hex']}</code>. The "
50 f"corresponding RGB value is <code>{tuple(data['rgb'].values())}</code>."
51 ),
52 reply_markup=ReplyKeyboardRemove(),
53 )
54
55
56def main() -> None:
57 """Start the bot."""
58 # Create the Application and pass it your bot's token.
59 application = Application.builder().token("TOKEN").build()
60
61 application.add_handler(CommandHandler("start", start))
62 application.add_handler(MessageHandler(filters.StatusUpdate.WEB_APP_DATA, web_app_data))
63
64 # Run the bot until the user presses Ctrl-C
65 application.run_polling(allowed_updates=Update.ALL_TYPES)
66
67
68if __name__ == "__main__":
69 main()
HTML Page¶
1<!--
2 Simple static Telegram WebApp. Does not verify the WebAppInitData, as a bot token would be needed for that.
3-->
4<!DOCTYPE html>
5<html lang="en">
6<head>
7 <meta charset="UTF-8">
8 <title>python-telegram-bot Example WebApp</title>
9 <script src="https://telegram.org/js/telegram-web-app.js"></script>
10 <script src="https://cdn.jsdelivr.net/npm/@jaames/iro@5"></script>
11</head>
12<script type="text/javascript">
13 const colorPicker = new iro.ColorPicker('#picker', {
14 borderColor: "#ffffff",
15 borderWidth: 1,
16 width: Math.round(document.documentElement.clientWidth / 2),
17 });
18 colorPicker.on('color:change', function (color) {
19 document.body.style.background = color.hexString;
20 });
21
22 Telegram.WebApp.ready();
23 Telegram.WebApp.MainButton.setText('Choose Color').show().onClick(function () {
24 const data = JSON.stringify({hex: colorPicker.color.hexString, rgb: colorPicker.color.rgb});
25 Telegram.WebApp.sendData(data);
26 Telegram.WebApp.close();
27 });
28</script>
29<body style="background-color: #ffffff">
30<div style="position: absolute; margin-top: 5vh; margin-left: 5vw; height: 90vh; width: 90vw; border-radius: 5vh; background-color: var(--tg-theme-bg-color); box-shadow: 0 0 2vw
31 #000000;">
32 <div id="picker"
33 style="display: flex; justify-content: center; align-items: center; height: 100%; width: 100%"></div>
34</div>
35</body>
36<script type="text/javascript">
37 Telegram.WebApp.expand();
38</script>
39</html>