Add webapp example

nypava · nypava · commit 5c0ca1864b89 · 2024-07-27T12:58:44.000+03:00
diff --git a/examples/webapp/bot.py b/examples/webapp/bot.py
@@ -0,0 +1,19 @@
+from telebot import TeleBot
+from telebot.types import ReplyKeyboardMarkup, KeyboardButton, WebAppInfo
+
+BOT_TOKEN = '<bot_token>' 
+WEB_URL = 'https://pytelegrambotminiapp.vercel.app/' # https://github.com/eternnoir/pyTelegramBotAPI/blob/master/examples/webapp/webapp.html
+
+bot = TeleBot(BOT_TOKEN)
+
+@bot.message_handler(commands=["start"])
+def start(message):
+    reply_markup = ReplyKeyboardMarkup(resize_keyboard=True)
+    reply_markup.row(KeyboardButton("Start MiniApp", web_app=WebAppInfo(WEB_URL)))
+    bot.reply_to(message, "Click the button to start MiniApp", reply_markup=reply_markup)
+
+@bot.message_handler(content_types=['web_app_data'])
+def web_app(message):
+    bot.reply_to(message, f'Your message is "{message.web_app_data.data}"')
+
+bot.infinity_polling()
diff --git a/examples/webapp/webapp.html b/examples/webapp/webapp.html
@@ -0,0 +1,63 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title> MiniApp example </title>
+    <script src="https://telegram.org/js/telegram-web-app.js"></script>
+  </head>
+
+  <body>
+    <div>
+      <input class="input-message" type="text" value="" placeholder="Type your message here">
+      <button onclick="sendMessage()"> Send the message </button> 
+    </div>
+  </body>
+
+  <script type="text/javascript">
+    Telegram.WebApp.ready();
+    function sendMessage(){
+      Telegram.WebApp.sendData(document.querySelector('.input-message').value);
+    }
+  </script>
+
+  <style>
+    body {
+      background: var(--tg-theme-bg-color);
+    }
+
+    div {
+      height: 98vh;
+      display: flex; 
+      flex-direction: column; 
+      justify-content: center; 
+      align-items: center; 
+      gap: 10px;
+    }
+    
+    input {
+      border: solid 1px;
+      border-radius: 4px;
+      border-color: var(--tg-theme-text-color);
+      background-color: var(--tg-theme-bg-color);
+      color: var(--tg-theme-button-text-color);
+      padding: 3px;
+      width: 300px;
+      height: 30px;
+    }
+
+    button {
+      border-radius: 6px;
+      width: 308px;
+      height: 40px;
+      background: var(--tg-theme-button-color); 
+      color: var(--tg-theme-button-text-color); 
+      border: none;
+    }
+    
+    p {
+      color: var(--tg-theme-text-color)
+    }
+  </style>
+
+</html>
