Hide navigation sidebar
Hide table of contents sidebar
Skip to content
Back to top
View this page
Toggle table of contents sidebar

# `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>