Hide navigation sidebar
Hide table of contents sidebar
PTB has undergone significant changes in v20. Please read the documentation carefully and also check out the transition guide in the wiki.
Back to top
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>