Skip to content
Back to top
View this page

# `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"""
    11
    12import json
    13import logging
    14
    15from telegram import KeyboardButton, ReplyKeyboardMarkup, ReplyKeyboardRemove, Update, WebAppInfo
    16from telegram.ext import Application, CommandHandler, ContextTypes, MessageHandler, filters
    17
    18# Enable logging
    19logging.basicConfig(
    20    format="%(asctime)s - %(name)s - %(levelname)s - %(message)s", level=logging.INFO
    21)
    22# set higher logging level for httpx to avoid all GET and POST requests being logged
    23logging.getLogger("httpx").setLevel(logging.WARNING)
    24
    25logger = logging.getLogger(__name__)
    26
    27
    28# Define a `/start` command handler.
    29async def start(update: Update, context: ContextTypes.DEFAULT_TYPE) -> None:
    30    """Send a message with a button that opens a the web app."""
    31    await update.message.reply_text(
    32        "Please press the button below to choose a color via the WebApp.",
    33        reply_markup=ReplyKeyboardMarkup.from_button(
    34            KeyboardButton(
    35                text="Open the color picker!",
    36                web_app=WebAppInfo(url="https://python-telegram-bot.org/static/webappbot"),
    37            )
    38        ),
    39    )
    40
    41
    42# Handle incoming WebAppData
    43async def web_app_data(update: Update, context: ContextTypes.DEFAULT_TYPE) -> None:
    44    """Print the received data and remove the button."""
    45    # Here we use `json.loads`, since the WebApp sends the data JSON serialized string
    46    # (see webappbot.html)
    47    data = json.loads(update.effective_message.web_app_data.data)
    48    await update.message.reply_html(
    49        text=(
    50            f"You selected the color with the HEX value <code>{data['hex']}</code>. The "
    51            f"corresponding RGB value is <code>{tuple(data['rgb'].values())}</code>."
    52        ),
    53        reply_markup=ReplyKeyboardRemove(),
    54    )
    55
    56
    57def main() -> None:
    58    """Start the bot."""
    59    # Create the Application and pass it your bot's token.
    60    application = Application.builder().token("TOKEN").build()
    61
    62    application.add_handler(CommandHandler("start", start))
    63    application.add_handler(MessageHandler(filters.StatusUpdate.WEB_APP_DATA, web_app_data))
    64
    65    # Run the bot until the user presses Ctrl-C
    66    application.run_polling(allowed_updates=Update.ALL_TYPES)
    67
    68
    69if __name__ == "__main__":
    70    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>