Bots can offer users interactive HTML5 web apps to completely replace any website.
They support seamless authorization, integrated payments via multiple payment providers (with Google Pay and Apple Pay out of the box), delivering tailored push notifications to users, and much more.
This article offers a client-side overview of the implementation of bot web apps using the MTProto API: see here for an overview of the web-app side JS API ».
Both simple and normal web apps can send web events starting with
web_app_; see the web event documentation for the full list of events that can be sent by the web app to the client ».
Web apps can also receive events, by exposing a
window.Telegram.WebView.receiveEvent("event_name", params) method.
Here's the full list of events that can be received by a web app from the client, by calling the
Sent by the client when the user presses the main button located at the bottom of the webview, handle this event only if the main button was previously configured by a
web_app_setup_main_button event ».
Sent by the client when the user presses the settings button, if it was previously enabled in @BotFather, as specified by the
has_settings flag of attachMenuBot ».
Sent by the client when the user presses the (OS or UI) back button, if it was previously enabled by a
web_app_setup_back_button event ».
Params: JSON object with the following fields:
slug- Invoice identifier (string)
status- One of the following values (string):
cancelled– The user closed the invoice popup without paying, before the call to payments.sendPaymentForm.
failed– The user tried to pay, but the payment failed: the call to payments.sendPaymentForm returned an RPC error and the popup was closed.
pending– The payment is still processing: the bot will receive a further service message about a successful payment. payments.sendPaymentForm was successfully invoked returning payments.paymentVerificationNeeded, the user completed all additional verification forms returned by the method and the invoice popup was closed, but the client hasn't received a messageActionPaymentSent service message yet.
failedevent if the user fails additional validation (ie 3-D Secure) returned by payments.paymentVerificationNeeded: the state will remaing
paid– The invoice was paid successfully: the client completed the payment flow », the invoice popup was closed and a messageActionPaymentSent service message was received by the client.
Sent by the client to report the payment status of an invoice obtained from a
web_app_open_invoice event ».
Params: a JSON object with the following fields:
height- The current height of the visible area of the Web App (excluding the bottom main button, if visible) (integer)
is_state_stable- If true, the viewport is currently being resized (animation in progress), more events of this type may be emitted. (boolean)
is_expanded- Whether the Web App is expanded to its maximum height after the user swiped up or after the web app emitted a web_app_expand event (boolean)
Emitted when the viewport is changed.
Params: a JSON object with the following fields:
theme_params: A theme parameters object » (object)
Emitted when requested by the web app using a
web_app_request_theme event », or when the app theme changes.
Params: a JSON object with an optional
button_id string field.
Emitted when the user presses a button or cancels a popup brought up by a previous
web_app_open_popup event ».
replyKeyboardMarkup#85dd99d1 flags:# resize:flags.0?true single_use:flags.1?true selective:flags.2?true rows:Vector<KeyboardButtonRow> placeholder:flags.3?string = ReplyMarkup; keyboardButtonSimpleWebView#a0c0505c text:string url:string = KeyboardButton; messageActionWebViewDataSentMe#47dd8079 text:string data:string = MessageAction; messageActionWebViewDataSent#b4c38cb5 text:string = MessageAction; simpleWebViewResultUrl#882f76bb url:string = SimpleWebViewResult; ---functions--- messages.requestSimpleWebView#299bec8e flags:# bot:InputUser url:string theme_params:flags.0?DataJSON platform:string = SimpleWebViewResult; messages.sendWebViewData#dc0242c8 bot:InputUser random_id:long button_text:string data:string = Updates;
Simple webapps can only send back data to the bot through the MTProto API via a
web_app_data_send JS event ».
Simple webapps can only be opened from a keyboardButtonSimpleWebView button contained in a reply keyboard identified by a replyKeyboardMarkup constructor.
To open them, users should call messages.requestSimpleWebView, and then open a webview using the
url contained in the returned simpleWebViewResultUrl.
Upon receiving a
web_app_data_send JS event » from the web app, clients should invoke messages.sendWebViewData, passing the following arguments:
bot- Bot ID
random_id- Unique random ID to avoid resending the same event multiple times
button_text- Text of the keyboardButtonSimpleWebView that was pressed to open the simple web app
data- Contents of the
datafield of the JS event.
Make sure to ignore all
web_app_data_send events sent after the first one, messages.sendWebViewData must be called only once.
The webview must be closed after invoking the messages.sendWebViewData method.
This will generate a messageActionWebViewDataSent update for the user, and a messageActionWebViewDataSentMe update for the bot, containing the event data.
keyboardButtonWebView#13767230 text:string url:string = KeyboardButton; botMenuButton#c7b57ce6 text:string url:string = BotMenuButton; webViewResultUrl#c14557c query_id:long url:string = WebViewResult; inputBotInlineResult#88bf9319 flags:# id:string type:string title:flags.1?string description:flags.2?string url:flags.3?string thumb:flags.4?InputWebDocument content:flags.5?InputWebDocument send_message:InputBotInlineMessage = InputBotInlineResult; inputBotInlineResultPhoto#a8d864a7 id:string type:string photo:InputPhoto send_message:InputBotInlineMessage = InputBotInlineResult; inputBotInlineResultDocument#fff8fdc4 flags:# id:string type:string title:flags.1?string description:flags.2?string document:InputDocument send_message:InputBotInlineMessage = InputBotInlineResult; inputBotInlineResultGame#4fa417f2 id:string short_name:string send_message:InputBotInlineMessage = InputBotInlineResult; updateWebViewResultSent#1592b79d query_id:long = Update; webViewMessageSent#c94511c flags:# msg_id:flags.0?InputBotInlineMessageID = WebViewMessageSent; ---functions--- messages.requestWebView#fc87a53c flags:# from_bot_menu:flags.4?true silent:flags.5?true peer:InputPeer bot:InputUser url:flags.1?string start_param:flags.3?string theme_params:flags.2?DataJSON platform:string reply_to_msg_id:flags.0?int send_as:flags.13?InputPeer = WebViewResult; messages.prolongWebView#ea5fbcce flags:# silent:flags.5?true peer:InputPeer bot:InputUser query_id:long reply_to_msg_id:flags.0?int send_as:flags.13?InputPeer = Bool; messages.sendWebViewResultMessage#a4314f5 bot_query_id:string result:InputBotInlineResult = WebViewMessageSent;
Normal webapps work similarly to inline bots »: they send messages on behalf of the user to the chat from which the query originated.
Normal webapps can be opened from:
urlmust be passed to messages.requestWebView.
from_bot_menuflag should be set.
start_parametershould be provided to messages.requestWebView.
start_param, if present.
To open them, clients should call messages.requestWebView, and then open a webview using the
url contained in the returned webViewResultUrl.
After loading the webview, until it is closed by a web_app_close event, the user client must invoke messages.prolongWebView every 60 seconds: if the method call returns
QUERY_ID_INVALID, the webview must be closed.
The opened URL's fragment parameters already contain basic information about the user and a
query_id parameter, that is exposed by the bot web apps JS library: this
query_id can then be used by the bot to invoke messages.sendWebViewResultMessage, passing an InputBotInlineResult constructor that will automatically send a message with optionally attached media, and even inline buttons on behalf of the user.
Bot web apps can be themed according to the following theme parameters, passed as a JSON object to the
theme_params parameter of the messages.requestSimpleWebView and messages.requestWebView methods.
This JSON object has the the following keys, containing color theme information (hex string, RGB, no alpha) to pass to the web app:
bg_color- Background color
secondary_bg_color- Secondary background color
text_color- Text color
hint_color- Hint text color
link_color- Link color
button_color- Button color
button_text_color- Button text color