Skip to content

Commit adbf425

Browse files
nypavanypava
committed
add features to webapp
1 parent cf6c4cc commit adbf425

File tree

5 files changed

+836
-69
lines changed

5 files changed

+836
-69
lines changed

‎examples/webapp/bot.py

Lines changed: 17 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,27 @@
11
from telebot import TeleBot
2-
from telebot.types import ReplyKeyboardMarkup, KeyboardButton, WebAppInfo
2+
from telebot.types import (
3+
ReplyKeyboardMarkup,
4+
KeyboardButton,
5+
WebAppInfo,
6+
InlineKeyboardMarkup,
7+
InlineKeyboardButton
8+
)
39

4-
BOT_TOKEN = '<bot_token>'
5-
WEB_URL = 'https://pytelegrambotminiapp.vercel.app/' # https://github.com/eternnoir/pyTelegramBotAPI/blob/master/examples/webapp/webapp.html
10+
BOT_TOKEN = ""
11+
WEB_URL = "https://pytelegrambotminiapp.vercel.app" # https://github.com/eternnoir/pyTelegramBotAPI/tree/master/examples/webapp/webapp
612

713
bot = TeleBot(BOT_TOKEN)
814

915
@bot.message_handler(commands=["start"])
1016
def start(message):
11-
reply_markup = ReplyKeyboardMarkup(resize_keyboard=True)
12-
reply_markup.row(KeyboardButton("Start MiniApp", web_app=WebAppInfo(WEB_URL)))
13-
bot.reply_to(message, "Click the button to start MiniApp", reply_markup=reply_markup)
17+
reply_keyboard_markup = ReplyKeyboardMarkup(resize_keyboard=True)
18+
reply_keyboard_markup.row(KeyboardButton("Start MiniApp", web_app=WebAppInfo(WEB_URL)))
19+
20+
inline_keyboard_markup = InlineKeyboardMarkup()
21+
inline_keyboard_markup.row(InlineKeyboardButton('Start MiniApp', web_app=WebAppInfo(WEB_URL)))
22+
23+
bot.reply_to(message, "Click the bottom inline button to start MiniApp", reply_markup=inline_keyboard_markup)
24+
bot.reply_to(message, "Click keyboard button to start MiniApp", reply_markup=reply_keyboard_markup)
1425

1526
@bot.message_handler(content_types=['web_app_data'])
1627
def web_app(message):

‎examples/webapp/webapp.html

Lines changed: 0 additions & 63 deletions
This file was deleted.

‎examples/webapp/webapp/index.html

Lines changed: 163 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,163 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1">
6+
<script src="https://telegram.org/js/telegram-web-app.js"></script>
7+
<title>PyTelegramBotApi MiniApp</title>
8+
<link href="style.css" rel="stylesheet">
9+
</head>
10+
<body class='body'>
11+
<div class='content-block content-block_send-message send-message'>
12+
<input class="send-message__input" type="text" placeholder="type your message here">
13+
<button class="send-message__button" id="send-message-button"> send the message </button>
14+
</div>
15+
16+
<p class="header-text"> client buttons </p>
17+
<div class="content-block content-block_client-btn client">
18+
<button class="default-button default-button_disable" id='back-button' value="disable"> back </button>
19+
<button class="default-button" id='main-button' value="enable"> main </button>
20+
<button class="default-button default-button_disable" id='settings-button' value="disable"> settings </button>
21+
</div>
22+
<p class="header-text"> hapticFeedback (notification) </p>
23+
<div class="content-block content-block_haptic-feedback haptic_feedback">
24+
<button class="default-button" id='success-button'> success </button>
25+
<button class="default-button default-button_yellow" id='warning-button'> warning </button>
26+
<button class="default-button default-button_red" id='error-button'> error </button>
27+
</div>
28+
29+
<p class="header-text"> tweak color [Bot API 6.1+]</p>
30+
<div class="content-block content-block_tweak-color tweak-color">
31+
<div class="tweak-color__header">
32+
<p class="tweak-color__text">Header color: </p>
33+
<div class="tweak-color__circle-block">
34+
<div class="tweak-color__circle tweak-color__circle_yellow" id="header-yellow"> </div>
35+
<div class="tweak-color__circle tweak-color__circle_button" id="header-button_color"> </div>
36+
<div class="tweak-color__circle tweak-color__circle_red" id="header-red"> </div>
37+
<div class="tweak-color__circle tweak-color__circle_header" id="header-default"> </div>
38+
</div>
39+
</div>
40+
<div class="tweak-color__background">
41+
<p class="tweak-color__text">Background color: </p>
42+
<div class="tweak-color__circle-block">
43+
<div class="tweak-color__circle tweak-color__circle_yellow" id="background-yellow"> </div>
44+
<div class="tweak-color__circle tweak-color__circle_button" id="background-button_color"> </div>
45+
<div class="tweak-color__circle tweak-color__circle_red" id="background-red"> </div>
46+
<div class="tweak-color__circle tweak-color__circle_background" id="background-default"> </div>
47+
</div>
48+
</div>
49+
</div>
50+
51+
<p class="header-text"> popup and alert [Bot API 6.2+] </p>
52+
<div class="content-block content-block_popup-alert popup-alert">
53+
<button class="default-button" id="popup-button"> popup </button>
54+
<button class="default-button" id="alert-button"> alert </button>
55+
<button class="default-button" id="confirm-button"> confirm </button>
56+
</div>
57+
58+
<p class="header-text"> request [Bot API 6.9+]</p>
59+
<div class="content-block content-block_request block_request">
60+
<button class="default-button" id="contact-button"> contact </button>
61+
<button class="default-button" id="write-access-button"> write access </button>
62+
<button class="default-button" id="biometrics-button"> biometrics </button>
63+
</div>
64+
65+
<p class="header-text"> story [Bot API 7.8+]</p>
66+
<div class="content-block content-block_story story">
67+
<button class="default-button" id="post-story-photo-button"> story (photo) </button>
68+
<button class="default-button" id="post-story-video-button"> story (video) </button>
69+
<button class="default-button" id="post-story-with-link-button"> story + link</button>
70+
</div>
71+
72+
<p class="header-text"> cloud storage [Bot API 6.9+] </p>
73+
<div class="content-block content-block_cloud-storage cloud-storage">
74+
<div class="cloud-storage__input-block">
75+
<input class="cloud-storage__input cloud-storage__input_add-key" type="text" name="" value="" placeholder="key">
76+
<input class="cloud-storage__input cloud-storage__input_add-value" type="text" name="" value="" placeholder="value">
77+
</div>
78+
<button class="cloud-storage__button cloud-storage__button_add" id="cloud-add-button"> add to cloud storage </button>
79+
<table class="cloud-storage__table" id="cloud-storage-table">
80+
<tr>
81+
<th id="cloud-storage-key"> key </th>
82+
<th id="cloud-storage-value"> value </th>
83+
</tr>
84+
<tr id="null-storage-row">
85+
<td> - </td>
86+
<td> - </td>
87+
</tr>
88+
</table>
89+
<div class="cloud-storage__input-block cloud-storage__input-block_remove">
90+
<input class="cloud-storage__input cloud-storage__input_remove" type="text" value="" placeholder="key">
91+
<button class="cloud-storage__button cloud-storage__button_remove" id='cloud-remove-button'> remove from cloud storage </button>
92+
</div>
93+
</div>
94+
<p class="header-text"> data from telegram </p>
95+
<div class="content-block content-block_data">
96+
<div class="data__content" id="initDataUnsafe-block">
97+
<p class="content-block__text"> initDataUnsafe </p>
98+
</div>
99+
<div class="data__content" id="themeParams-block">
100+
<p class="content-block__text"> ThemeParams </p>
101+
</div>
102+
<div class="data__content" id="biometrics-block">
103+
<p class="content-block__text"> Biometrics Manager</p>
104+
<table class="biometrics__table" id="biometrics-table">
105+
<tr id="null-biometrics-row">
106+
<td>support</td>
107+
<td>Unsupported in this platform</td>
108+
</tr>
109+
</table>
110+
</div>
111+
</div>
112+
113+
<p class="header-text"> event from telegram </p>
114+
<div class="content-block content-block_event event">
115+
<div class="event__content" id="event-block">
116+
</div>
117+
</div>
118+
119+
<p class="header-text"> vertical scroll behaviour [Bot API 7.7+] </p>
120+
<div class="content-block content-block_scroll-behaviour scroll-behaviour">
121+
<p class="content-block__text"> close the miniapp when scroll vertically </p>
122+
<div class="scroll-behaviour__toggle-box">
123+
<button class="default-button" id="enable-scroll-button" value="enable"> Enable </button>
124+
<button class="default-button default-button_disable" id="disable-scroll-button" value="disable"> Disable </button>
125+
</div>
126+
</div>
127+
128+
<p class="header-text"> closing confirmation [Bot API 6.2+]</p>
129+
<div class="content-block content-block_close-confirmation close-confirmation">
130+
<p class="content-block__text"> Confimation dialog when closing mini app </p>
131+
<div class="content-block__toggle-box">
132+
<button class="default-button default-button_disable" id="enable-close-confirm-button" value="disable"> Enable </button>
133+
<button class="default-button" id="disable-close-confirm-button" value="enable"> Disable </button>
134+
</div>
135+
</div>
136+
137+
<p class="header-text"> links </p>
138+
<div class="content-block content-block_link link">
139+
<ul class="link__list">
140+
<li>
141+
<p class="link__text"> <a class="link__text link__text_blue" id="telegram-link" href="javascript:telegram.openTelegramLink(https://t.me/joinchat/Bn4ixj84FIZVkwhk2jag6A)"> pyTelegramBotApi </a> - opens telegram link in telegram </p>
142+
</li>
143+
<li>
144+
<p class="link__text"> <a class="link__text link__text_blue" id="internal-link" href="javascript:telegram.openLink(https://telegram.org)"> Telegram </a> - opens link inside telegram in browser. </p>
145+
</li>
146+
</ul>
147+
</div>
148+
149+
<p class="header-text"> other </p>
150+
<div class="content-block content-block_other other">
151+
<button class="default-button" id="show-QR-button"> show QR </button>
152+
<button class="default-button" id="expand-button"> expand </button>
153+
<button class="default-button default-button_red" id="close-button"> close </button>
154+
</div>
155+
156+
<div class="description-block">
157+
<pre class="description__text" id="version-text"> version: </pre>
158+
<pre class="description__text" id="platform-text"> platform: </pre>
159+
<pre class="description__text" id="color-scheme-text"> color scheme: </pre>
160+
</div>
161+
</body>
162+
<script src="script.js"></script>
163+
</html>

0 commit comments

Comments
 (0)