mirror of
https://github.com/MarshalX/telegram-crawler.git
synced 2024-11-29 11:43:05 +01:00
402 lines
40 KiB
HTML
402 lines
40 KiB
HTML
<!DOCTYPE html>
|
||
<html class="">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<title>Web events</title>
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<meta property="description" content="How telegram apps interact with webpages">
|
||
<meta property="og:title" content="Web events">
|
||
<meta property="og:image" content="">
|
||
<meta property="og:description" content="How telegram apps interact with webpages">
|
||
<link rel="icon" type="image/svg+xml" href="/img/website_icon.svg?4">
|
||
<link rel="apple-touch-icon" sizes="180x180" href="/img/apple-touch-icon.png">
|
||
<link rel="icon" type="image/png" sizes="32x32" href="/img/favicon-32x32.png">
|
||
<link rel="icon" type="image/png" sizes="16x16" href="/img/favicon-16x16.png">
|
||
<link rel="alternate icon" href="/img/favicon.ico" type="image/x-icon" />
|
||
<link href="/css/bootstrap.min.css?3" rel="stylesheet">
|
||
|
||
<link href="/css/telegram.css?241" rel="stylesheet" media="screen">
|
||
<style>
|
||
</style>
|
||
</head>
|
||
<body class="preload">
|
||
<div class="dev_page_wrap">
|
||
<div class="dev_page_head navbar navbar-static-top navbar-tg">
|
||
<div class="navbar-inner">
|
||
<div class="container clearfix">
|
||
<ul class="nav navbar-nav navbar-right hidden-xs"><li class="navbar-twitter"><a href="https://twitter.com/telegram" target="_blank" data-track="Follow/Twitter" onclick="trackDlClick(this, event)"><i class="icon icon-twitter"></i><span> Twitter</span></a></li></ul>
|
||
<ul class="nav navbar-nav">
|
||
<li><a href="//telegram.org/">Home</a></li>
|
||
<li class="hidden-xs"><a href="//telegram.org/faq">FAQ</a></li>
|
||
<li class="hidden-xs"><a href="//telegram.org/apps">Apps</a></li>
|
||
<li class="active"><a href="/api">API</a></li>
|
||
<li class=""><a href="/mtproto">Protocol</a></li>
|
||
<li class=""><a href="/schema">Schema</a></li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="container clearfix">
|
||
<div class="dev_page">
|
||
<div id="dev_page_content_wrap" class=" ">
|
||
<div class="dev_page_bread_crumbs"><ul class="breadcrumb clearfix"><li><a href="/api" >API</a></li><i class="icon icon-breadcrumb-divider"></i><li><a href="/api/web-events" >Web events</a></li></ul></div>
|
||
<h1 id="dev_page_title">Web events</h1>
|
||
|
||
<div id="dev_page_content"><!-- scroll_nav -->
|
||
|
||
<p>When interacting with HTML5 games, websites of payment gateways and <a href="/api/bots/webapps">bot mini apps</a>, Telegram apps should expose APIs to allow receiving data and events from the websites.</p>
|
||
<h3><a class="anchor" href="#event-apis" id="event-apis" name="event-apis"><i class="anchor-icon"></i></a>Event APIs</h3>
|
||
<p>Games, payment gateways and <a href="/api/bots/webapps">bot mini apps</a> can generate events that are meant to be received by the Telegram apps.
|
||
Typically events are generated by using the <code>postEvent</code> method of the <a href="https://github.com/TelegramMessenger/GamingCommunication/blob/master/games.js">GamingCommunication library</a>, or by the <a href="/bots/webapps#initializing-mini-apps">bot mini apps library</a>.<br>
|
||
The <code>postEvent</code> function will try sending the event to the Telegram app in a number of different ways.</p>
|
||
<h4><a class="anchor" href="#webviewproxy" id="webviewproxy" name="webviewproxy"><i class="anchor-icon"></i></a>WebviewProxy</h4>
|
||
<p>In mobile apps, the event receiver API should be typically exposed as a <code>window.TelegramWebviewProxy</code> object with a <code>postEvent</code> method.</p>
|
||
<pre><code>window.TelegramWebviewProxy.postEvent(eventType, eventData)</code></pre>
|
||
<h4><a class="anchor" href="#windowexternal" id="windowexternal" name="windowexternal"><i class="anchor-icon"></i></a>window.external</h4>
|
||
<p>Alternatively, a <code>window.external.notify</code> method can be exposed, accepting a string JSON payload with the event type and payload:</p>
|
||
<pre><code>window.external.notify(JSON.stringify({eventType: eventType, eventData: eventData}));</code></pre>
|
||
<h4><a class="anchor" href="#postmessage-api" id="postmessage-api" name="postmessage-api"><i class="anchor-icon"></i></a>postMessage API</h4>
|
||
<p>Finally, web MTProto clients that need to open a game, open a <a href="/api/bots/webapps">bot mini app</a> or process a payment in an iframe can use the <a href="https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage">postMessage API</a> to receive events from iframes.<br>
|
||
The GamingCommunication and bot mini apps libraries by default will use <code>'*'</code> as <code>targetOrigin</code>, sending messages to parent pages regardless of the origin of the embedder.</p>
|
||
<pre><code>window.parent.postMessage(JSON.stringify({eventType: eventType, eventData: eventData}), targetOrigin);</code></pre>
|
||
<h3><a class="anchor" href="#event-types" id="event-types" name="event-types"><i class="anchor-icon"></i></a>Event types</h3>
|
||
<p><code>eventType</code> is a simple string indicating the event type, and <code>eventData</code> is a payload with an object that will be parsed by the Telegram app.</p>
|
||
<h4><a class="anchor" href="#web-app-close" id="web-app-close" name="web-app-close"><i class="anchor-icon"></i></a><code>web_app_close</code></h4>
|
||
<p>No event payload, OR a JSON object with the following fields (which should be properly validated by the client).</p>
|
||
<ul>
|
||
<li><code>return_back</code> - If true, if the web app was opened through a <a href="/api/links">deep link</a> in another app (i.e. not through a deep link in a Telegram client), the Telegram client should return to the app that opened the link, not to the main page of the Telegram client. (boolean, optional)</li>
|
||
</ul>
|
||
<p>Emitted by <a href="/api/bots/webapps">bot mini apps</a> when the mini app webview should be closed.</p>
|
||
<h4><a class="anchor" href="#web-app-open-popup" id="web-app-open-popup" name="web-app-open-popup"><i class="anchor-icon"></i></a><code>web_app_open_popup</code></h4>
|
||
<p>Event data: a JSON object with the following fields (which should be properly validated by the client).</p>
|
||
<ul>
|
||
<li><code>title</code> - Title for the popup (optional string, max 64 characters)</li>
|
||
<li><code>message</code> - Message of the popup (string, max 256 characters)</li>
|
||
<li><code>buttons</code> - An array of the following objects (array of 1-3 objects)<ul>
|
||
<li><code>type</code> - Button type (string, one of <code>ok</code>, <code>close</code>, <code>cancel</code>, <code>default</code>, <code>destructive</code> (in this case, the button must be red))</li>
|
||
<li><code>text</code> - Button text (string, optional for <code>ok</code>, <code>close</code> and <code>cancel</code> types)</li>
|
||
<li><code>id</code> - Button ID (unique string)</li>
|
||
</ul>
|
||
</li>
|
||
</ul>
|
||
<p>Emitted by <a href="/api/bots/webapps">bot mini apps</a> to open a native pop-up over the webview.</p>
|
||
<p>By default, buttons should be displayed on one row.<br>
|
||
If the mini app provides two buttons that can't fit horizontally on one row, display each button on a separate row.<br>
|
||
If the mini app provides three buttons, always display each button on a separate row. </p>
|
||
<ul>
|
||
<li>If the user presses any of the buttons, call <code>window.Telegram.WebView.receiveEvent("popup_closed", {"button_id": "<button id>"})</code></li>
|
||
<li>If the user cancels the interaction without pressing any of the specified buttons, call <code>window.Telegram.WebView.receiveEvent("popup_closed", {})</code></li>
|
||
</ul>
|
||
<p>Disable handling of this event if a popup is already being displayed, re-enable handling only after the <code>popup_closed</code> response event is emitted.<br>
|
||
While handling is enabled, maximum 3 consecutive valid events of this type can be handled in a timespan of 3 seconds, ignore excess events. </p>
|
||
<h4><a class="anchor" href="#web-app-request-write-access" id="web-app-request-write-access" name="web-app-request-write-access"><i class="anchor-icon"></i></a><code>web_app_request_write_access</code></h4>
|
||
<p>Event data: <code>null</code></p>
|
||
<p>Emitted by <a href="/api/bots/webapps">bot mini apps</a> to ask permission from the user to send them messages. </p>
|
||
<p>Upon receiving this event, clients should first invoke <a href="/method/bots.canSendMessage">bots.canSendMessage</a>, to check whether they have already granted the bot permission to write them in some way. </p>
|
||
<ul>
|
||
<li>If the method returns <a href="/constructor/boolTrue">boolTrue</a>, a <a href="/api/bots/webapps#write-access-requested">write_access_requested event »</a> with <code>{"status": "allowed"}</code> should be sent to the Mini App.</li>
|
||
<li>Otherwise, if the method returns <a href="/constructor/boolFalse">boolFalse</a>, a prompt should be shown to the user, indicating that the bot is asking permission to send messages to them.<br>
|
||
If the user accepts, invoke <a href="/method/bots.allowSendMessage">bots.allowSendMessage</a>, and if the method call succeeds emit a <a href="/api/bots/webapps#write-access-requested">write_access_requested event »</a> with <code>{"status": "allowed"}</code>.<br>
|
||
Otherwise, if the user refuses or the <a href="/method/bots.allowSendMessage">bots.allowSendMessage</a> call fails, emit a <a href="/api/bots/webapps#write-access-requested">write_access_requested event »</a> with <code>{"status": "cancelled"}</code>.</li>
|
||
</ul>
|
||
<h4><a class="anchor" href="#web-app-request-phone" id="web-app-request-phone" name="web-app-request-phone"><i class="anchor-icon"></i></a><code>web_app_request_phone</code></h4>
|
||
<p>Event data: <code>null</code></p>
|
||
<p>Emitted by <a href="/api/bots/webapps">bot mini apps</a> to ask the user to share their phone number as a contact.</p>
|
||
<p>Upon receiving this event, clients should show a prompt to the user, indicating that the bot is asking them to share their phone number (optionally also asking the user to unblock the bot, if it's currently blocked). </p>
|
||
<p>If they accept, the user's phone number should be shared by sending a contact to the bot (unblocking it first, if it's currently blocked by the user); if all RPC queries (to unblock the bot, to send the message) succeed, a <a href="/api/bots/webapps#write-access-requested">phone_requested event »</a> should be sent with <code>{"status": "sent"}</code>. </p>
|
||
<p>If the user refuses or any intermdiate method call fails, a <a href="/api/bots/webapps#write-access-requested">phone_requested event »</a> should be sent with <code>{"status": "cancelled"}</code>. </p>
|
||
<h4><a class="anchor" href="#web-app-biometry-get-info" id="web-app-biometry-get-info" name="web-app-biometry-get-info"><i class="anchor-icon"></i></a><code>web_app_biometry_get_info</code></h4>
|
||
<p>Event data: <code>null</code></p>
|
||
<p>Emitted by <a href="/api/bots/webapps">bot mini apps</a> to ask the client to initialize the biometric authentication manager object for the current bot, emitting a <a href="/api/bots/webapps#biometry-info-received"><code>biometry_info_received</code> event »</a> on completion. </p>
|
||
<p>This request should just initialize the client-side state, i.e. by checking if biometric authentication is even available or not, it should not ask the user anything. </p>
|
||
<h4><a class="anchor" href="#web-app-biometry-request-access" id="web-app-biometry-request-access" name="web-app-biometry-request-access"><i class="anchor-icon"></i></a><code>web_app_biometry_request_access</code></h4>
|
||
<p>Event data: a JSON object, with an optional <code>reason</code> string field (1-128 chars, used in the prompt), containing the reason why the bot is asking to use biometric authentication. </p>
|
||
<p>Emitted by <a href="/api/bots/webapps">bot mini apps</a> to ask the user permission to use biometric authentication, emitting a <a href="/api/bots/webapps#biometry-info-received"><code>biometry_info_received</code> event »</a> on completion. </p>
|
||
<p>This request should not actually prompt biometric authentication, it should just ask the user permission to use it through a popup that should be shown only <strong>once</strong> (for this bot): no popup must be shown if the user has already previously allowed, denied or cancelled a biometry permission popup from this bot.</p>
|
||
<h4><a class="anchor" href="#web-app-biometry-update-token" id="web-app-biometry-update-token" name="web-app-biometry-update-token"><i class="anchor-icon"></i></a><code>web_app_biometry_update_token</code></h4>
|
||
<p>Event data: a JSON object with the following fields:</p>
|
||
<ul>
|
||
<li><code>token</code> - The new token (string, 0-1024 chars), or an empty string to remove it. </li>
|
||
<li><code>reason</code> - Optional string field, containing the reason why the bot is asking to authenticate using biometrics (1-128 chars, used in the prompt). </li>
|
||
</ul>
|
||
<p>Emitted by <a href="/api/bots/webapps">bot mini apps</a> to authenticate using biometrics and store the biometric token securely stored on-device, emitting a <a href="/api/bots/webapps#biometry-token-updated"><code>biometry_token_updated</code> event »</a> on completion. </p>
|
||
<p>This token (which may be for example the private key of a cryptocurrency wallet, or some other data the app must keep safe) must be safely stored by the Telegram client, associating it to the bot that owns the mini app. </p>
|
||
<p>For example, the token may be directly stored in the on-device secure storage, accessible only after biometric authentication, or it may be stored to normal, non-secure storage, but <strong>in encrypted form</strong>, encrypted using the key returned from the device's secure storage after biometric authentication (for example on Android, using the CryptoObject returned by <a href="https://developer.android.com/reference/android/hardware/biometrics/BiometricPrompt.AuthenticationResult#getCryptoObject\(\)">the biometric prompt authentication result</a>). </p>
|
||
<p>If the user has <a href="#web-app-biometry-request-access">previously disallowed</a> the bot from using biometric authentication, this request should immediately fail, emitting an appropriate <a href="/api/bots/webapps#biometry-token-updated"><code>biometry_token_updated</code> event »</a>. </p>
|
||
<h4><a class="anchor" href="#web-app-biometry-request-auth" id="web-app-biometry-request-auth" name="web-app-biometry-request-auth"><i class="anchor-icon"></i></a><code>web_app_biometry_request_auth</code></h4>
|
||
<p>Event data: a JSON object, with an optional <code>reason</code> string field, containing the reason why the bot is asking to authenticate using biometrics (1-128 chars, used in the prompt). </p>
|
||
<p>Emitted by <a href="/api/bots/webapps">bot mini apps</a> to authenticate using biometrics and fetch the <a href="#web-app-biometry-update-token">previously stored secure token</a>, emitting a <a href="/api/bots/webapps#biometry-auth-requested"><code>biometry_auth_requested</code> event »</a> on completion, containing either an error, or the decrypted <a href="#web-app-biometry-update-token">biometric token »</a> (or an empty string if no token was configured yet). </p>
|
||
<p>Should only be used if the <code>token_saved</code> field of the <a href="/api/bots/webapps#biometry-info-received">biometry_info_received object »</a> is equal to <code>true</code>, otherwise set a new token first using <a href="#web-app-biometry-update-token">web_app_biometry_update_token »</a>. </p>
|
||
<p>If the user has <a href="#web-app-biometry-request-access">previously disallowed</a> the bot from using biometric authentication, this request should immediately fail, emitting an appropriate <a href="/api/bots/webapps#biometry-auth-requested"><code>biometry_auth_requested</code> event »</a>. </p>
|
||
<h4><a class="anchor" href="#web-app-biometry-open-settings" id="web-app-biometry-open-settings" name="web-app-biometry-open-settings"><i class="anchor-icon"></i></a><code>web_app_biometry_open_settings</code></h4>
|
||
<p>Event data: <code>null</code></p>
|
||
<p>Emitted by <a href="/api/bots/webapps">bot mini apps</a> to open the biometric authentication settings page for bots, useful when the app needs to request permission to use biometrics from users who have previously denied it.</p>
|
||
<p>Note that this event should only be handled in response to user interaction with the Mini App interface (e.g. a click inside the Mini App or on the main button), and it must be handled at most once a second. </p>
|
||
<h4><a class="anchor" href="#web-app-invoke-custom-method" id="web-app-invoke-custom-method" name="web-app-invoke-custom-method"><i class="anchor-icon"></i></a><code>web_app_invoke_custom_method</code></h4>
|
||
<p>Event data: a JSON object with the following fields:</p>
|
||
<ul>
|
||
<li><code>req_id</code> - A string with the ID of the current request</li>
|
||
<li><code>method</code> - A string, containing the name of the called custom method</li>
|
||
<li><code>params</code> - An object containing the parameters of the method call</li>
|
||
</ul>
|
||
<p>Emitted by <a href="/api/bots/webapps">bot mini apps</a> to make custom method calls to Telegram's servers on behalf of the user. </p>
|
||
<p>This event should trigger a <a href="/method/bots.invokeWebViewCustomMethod">bots.invokeWebViewCustomMethod</a> request, passing the <code>method</code> to <code>custom_method</code>, and the <code>params</code> to <code>params</code>. </p>
|
||
<p>Upon receiving a reply, a <a href="/api/bots/webapps#custom-method-invoked">custom_method_invoked event »</a> should be emitted, with the following fields:</p>
|
||
<ul>
|
||
<li><code>req_id</code> - The <code>req_id</code> from the <code>web_app_invoke_custom_method</code> object</li>
|
||
<li><code>result</code> - The JSON data contained in the response of the <a href="/method/bots.invokeWebViewCustomMethod">bots.invokeWebViewCustomMethod</a> method, if the method call succeeded</li>
|
||
<li><code>error</code> - The text of the RPC error, if the method call failed</li>
|
||
</ul>
|
||
<h4><a class="anchor" href="#web-app-read-text-from-clipboard" id="web-app-read-text-from-clipboard" name="web-app-read-text-from-clipboard"><i class="anchor-icon"></i></a><code>web_app_read_text_from_clipboard</code></h4>
|
||
<p>Event data: a JSON object with the following fields:</p>
|
||
<ul>
|
||
<li><code>req_id</code> - A string with the ID of the current request</li>
|
||
</ul>
|
||
<p>Emitted by <a href="/api/bots/webapps">bot mini apps</a> to obtain the contents of the system clipboard. </p>
|
||
<p>Only for Mini Apps owned by bots added to the <a href="/api/bots/attach">attachment menu</a>, regardles of how the Mini App itself was launched, this event should trigger a <a href="/api/bots/webapps#clipboard-text-received">clipboard_text_received event »</a> with the following payload: </p>
|
||
<ul>
|
||
<li><code>req_id</code> - The <code>req_id</code> from the <code>web_app_read_text_from_clipboard</code> request</li>
|
||
<li><code>data</code> - A string with the clipboard contents</li>
|
||
</ul>
|
||
<p>Note that this method can be called only in response to a user interaction with the Mini App interface (e.g. a click inside the Mini App or on the main or settings button).<br>
|
||
Note that user interactions must have a TTL of 10 seconds: events of this type must be ignored and a <a href="/api/bots/webapps#clipboard-text-received">clipboard_text_received event »</a> with the correct <code>req_id</code> and no <code>data</code> field must be sent if the last Mini App user interaction (as described above) happened more than 10 seconds ago. </p>
|
||
<p>A <a href="/api/bots/webapps#clipboard-text-received">clipboard_text_received event »</a> with the correct <code>req_id</code> and no <code>data</code> field must also be sent if the bot is not installed in the <a href="/api/bots/attach">attachment menu</a>.</p>
|
||
<h4><a class="anchor" href="#web-app-open-scan-qr-popup" id="web-app-open-scan-qr-popup" name="web-app-open-scan-qr-popup"><i class="anchor-icon"></i></a><code>web_app_open_scan_qr_popup</code></h4>
|
||
<p>Event data: a JSON object with the following fields:</p>
|
||
<ul>
|
||
<li><code>text</code> - Optional string, containing the text to be displayed under the 'Scan QR' heading, 0-64 characters. </li>
|
||
</ul>
|
||
<p>Emitted by <a href="/api/bots/webapps">bot mini apps</a> to prompt the client to open the native QR code scanner and start continuously scanning for QR codes. </p>
|
||
<p>A <a href="/api/bots/webapps#qr-text-received"><code>qr_text_received</code> event »</a> should be emitted every time a new QR code is scanned, until the user closes the popup via the UI or the Mini App closes the popup with a <a href="#web-app-close-scan-qr-popup">web_app_close_scan_qr_popup</a> event.</p>
|
||
<p>Closing the popup should emit a <a href="/api/bots/webapps#scan-qr-popup-closed"><code>scan_qr_popup_closed</code> event »</a>; the same event should be emitted if the scan QR code popup cannot be opened due to permission issues. </p>
|
||
<h4><a class="anchor" href="#web-app-close-scan-qr-popup" id="web-app-close-scan-qr-popup" name="web-app-close-scan-qr-popup"><i class="anchor-icon"></i></a><code>web_app_close_scan_qr_popup</code></h4>
|
||
<p>Event data: <code>null</code></p>
|
||
<p>Emitted by <a href="/api/bots/webapps">bot mini apps</a> to prompt the client to close the native QR code scanner opened using <a href="#web-app-open-scan-qr-popup">web_app_open_scan_qr_popup</a>. </p>
|
||
<p>The <a href="/api/bots/webapps#scan-qr-popup-closed"><code>scan_qr_popup_closed</code> event »</a> event should <em>not</em> be emitted if the QR code popup is closed using this event. </p>
|
||
<h4><a class="anchor" href="#web-app-setup-closing-behavior" id="web-app-setup-closing-behavior" name="web-app-setup-closing-behavior"><i class="anchor-icon"></i></a><code>web_app_setup_closing_behavior</code></h4>
|
||
<p>Event data: a JSON object with a boolean <code>need_confirmation</code>.</p>
|
||
<p>If equal to <code>true</code>, the client should require user confirmation with a "Changes that you made may not be saved." popup with "Cancel"/"Close anyway" buttons before closing the webview, to avoid accidentally aborting a sensitive operation; otherwise no confirmation should be requested. </p>
|
||
<h4><a class="anchor" href="#web-app-set-background-color" id="web-app-set-background-color" name="web-app-set-background-color"><i class="anchor-icon"></i></a><code>web_app_set_background_color</code></h4>
|
||
<p>Event data: a JSON object with a string <code>color</code> with a hex RGB color. </p>
|
||
<p>Used to set the mini app background and lower overscroll color. </p>
|
||
<h4><a class="anchor" href="#web-app-set-header-color" id="web-app-set-header-color" name="web-app-set-header-color"><i class="anchor-icon"></i></a><code>web_app_set_header_color</code></h4>
|
||
<p>Event data: a JSON object with the following fields:</p>
|
||
<ul>
|
||
<li><code>color_key</code> - A string with one of the following values:<ul>
|
||
<li><code>bg_color</code> - The <code>bg_color</code> from the <a href="/api/bots/webapps#theme-parameters">theme parameters</a> should be used.</li>
|
||
<li><code>secondary_bg_color</code> - The <code>secondary_bg_color</code> from the <a href="/api/bots/webapps#theme-parameters">theme parameters</a> should be used.</li>
|
||
</ul>
|
||
</li>
|
||
<li><code>color</code> - A color in hex RGB format (<code>#ffffff</code>).</li>
|
||
</ul>
|
||
<p>The two fields are mutually exclusive, if none of the two fields are provided the default header color is used.</p>
|
||
<p>Used to set the mini app header and upper overscroll color. </p>
|
||
<h4><a class="anchor" href="#web-app-data-send" id="web-app-data-send" name="web-app-data-send"><i class="anchor-icon"></i></a><code>web_app_data_send</code></h4>
|
||
<p>Event data: a JSON object with a string <code>data</code> field. </p>
|
||
<p>Used <strong>only</strong> by <a href="/api/bots/webapps#keyboard-button-mini-apps">keyboard button mini apps</a> to send back data to the bot as specified <a href="/api/bots/webapps#keyboard-button-mini-apps">here »</a>. The Mini App will be closed. </p>
|
||
<h4><a class="anchor" href="#web-app-switch-inline-query" id="web-app-switch-inline-query" name="web-app-switch-inline-query"><i class="anchor-icon"></i></a><code>web_app_switch_inline_query</code></h4>
|
||
<p>Event data: a JSON object with the following keys:</p>
|
||
<ul>
|
||
<li><code>query</code> - The inline query that will be inserted in the chat's input field, after the bot's username.<br>
|
||
May be an empty string, in which case just the bot's username will be inserted, triggering an empty inline query.</li>
|
||
<li><code>chat_types</code> - An array of strings, containing a combination of <code>users</code>, <code>bots</code>, <code>groups</code>, <code>channels</code>.<br>
|
||
If non-empty, the client should prompt the user to choose a specific chat of the specified type(s), then open the chosen chat and inserts the bot's username and the specified inline query in the input field.<br>
|
||
The array values specify which types of chats the user will be able to choose from.<br>
|
||
If empty, the current chat is used. </li>
|
||
</ul>
|
||
<p>Used by <a href="/api/bots/webapps#inline-mode-mini-apps">inline mode mini apps</a> to send back data to the bot as specified <a href="/api/bots/webapps#inline-mode-mini-apps">here »</a>. The Mini App will be closed. </p>
|
||
<h4><a class="anchor" href="#web-app-trigger-haptic-feedback" id="web-app-trigger-haptic-feedback" name="web-app-trigger-haptic-feedback"><i class="anchor-icon"></i></a><code>web_app_trigger_haptic_feedback</code></h4>
|
||
<p>Event data: a JSON object with the following fields:</p>
|
||
<ul>
|
||
<li><code>type</code> - One of the following values (string):<ul>
|
||
<li><code>impact</code> - An impact occurred.</li>
|
||
<li><code>notification</code> - A task or action has succeeded, failed, or produced a warning.</li>
|
||
<li><code>selection_change</code> - The user has changed a selection.</li>
|
||
</ul>
|
||
</li>
|
||
<li><code>impact_style</code> - Only for <code>impact</code> feedbacks, one of the following values (string):<ul>
|
||
<li><code>light</code> - Indicates a collision between small or lightweight UI objects</li>
|
||
<li><code>medium</code> - Indicates a collision between medium-sized or medium-weight UI objects</li>
|
||
<li><code>heavy</code> - Indicates a collision between large or heavyweight UI objects</li>
|
||
<li><code>rigid</code> - Indicates a collision between hard or inflexible UI objects</li>
|
||
<li><code>soft</code> - Indicates a collision between soft or flexible UI objects</li>
|
||
</ul>
|
||
</li>
|
||
<li><code>notification_type</code> - Only for <code>notification</code> feedbacks, one of the folowing values (string):<ul>
|
||
<li><code>error</code> - Indicates that a task or action has failed</li>
|
||
<li><code>success</code> - Indicates that a task or action has completed successfully</li>
|
||
<li><code>warning</code> - Indicates that a task or action produced a warning</li>
|
||
</ul>
|
||
</li>
|
||
</ul>
|
||
<p>Used to trigger haptic feedback for a user interaction in a webapp.</p>
|
||
<h4><a class="anchor" href="#web-app-open-link" id="web-app-open-link" name="web-app-open-link"><i class="anchor-icon"></i></a><code>web_app_open_link</code></h4>
|
||
<p>Event data: a JSON object with the following fields:</p>
|
||
<ul>
|
||
<li><code>url</code> - The URL to open</li>
|
||
<li><code>try_instant_view</code> - Optional boolean, if set, equal to <code>true</code> and the scheme of the URL is either <code>http</code> or <code>https</code>, the link should be opened in <a href="/methods#working-with-instant-view-pages">Instant View mode</a> if possible. </li>
|
||
<li><code>try_browser</code> - Optional string, if set, must contain one of the following browser identifiers, and the client should attempt to open the link using the specified browser (if it's currently installed on the device): <ul>
|
||
<li><code>google-chrome</code> or <code>chrome</code> - Google Chrome</li>
|
||
<li><code>mozilla-firefox</code> or <code>firefox</code> - Firefox</li>
|
||
<li><code>microsoft-edge</code> or <code>edge</code> - Microsoft Edge</li>
|
||
<li><code>opera</code> - Opera</li>
|
||
<li><code>opera-mini</code> - Opera Mini</li>
|
||
<li><code>brave</code> or <code>brave-browser</code> - Brave Browser</li>
|
||
<li><code>duckduckgo</code> or <code>duckduckgo-browser</code> - Duckduckgo Browser</li>
|
||
<li><code>samsung</code> or <code>samsung-browser</code> - Samsung Browser</li>
|
||
<li><code>vivaldi</code> or <code>vivaldi-browser</code> - Vivaldi</li>
|
||
<li><code>kiwi</code> or <code>ĸiwi-browser</code> - Kiwi</li>
|
||
<li><code>uc</code> or <code>uc-browser</code> - UC browser</li>
|
||
<li><code>tor</code> or <code>tor-browser</code> - TOR browser</li>
|
||
</ul>
|
||
</li>
|
||
</ul>
|
||
<p>Used to open a link in an external browser (or in a new tab for browser clients). The Mini App will not be closed. </p>
|
||
<p>Only URLs with the scheme equal to one of the schemes specified in <a href="/api/config#web-app-allowed-protocols">web_app_allowed_protocols</a> may be opened. </p>
|
||
<p>Note that this method can be called only in response to a user interaction with the Mini App interface (e.g. a click inside the Mini App or on the main or settings button).<br>
|
||
After opening the URL, further events of this type should be ignored until the user interacts again with the Mini App interface (as above).<br>
|
||
Note that user interactions must have a TTL of 1 second: events of this type must be ignored if the last Mini App user interaction happened more than 1 second ago.</p>
|
||
<h4><a class="anchor" href="#web-app-open-tg-link" id="web-app-open-tg-link" name="web-app-open-tg-link"><i class="anchor-icon"></i></a><code>web_app_open_tg_link</code></h4>
|
||
<p>Event data: a JSON object with a string <code>path_full</code> field, containing the path+query component of a <a href="/api/links">t.me deep link</a> (<code>url = 'https://t.me' + path_full</code>). </p>
|
||
<p>Used to open a <a href="/api/links">t.me deep link</a>. The Mini App must be closed.</p>
|
||
<h4><a class="anchor" href="#web-app-open-invoice" id="web-app-open-invoice" name="web-app-open-invoice"><i class="anchor-icon"></i></a><code>web_app_open_invoice</code></h4>
|
||
<p>Event data: a JSON object with a string <code>slug</code> field, containing an <a href="/api/links#invoice-links">invoice deep link</a>.</p>
|
||
<p>Used to initiate <a href="/api/payments">payment of an invoice »</a>, by opening an invoice popup over the Mini App: the Mini App itself must not be closed. </p>
|
||
<p>The payment status must be reported back to the mini app using <a href="/api/bots/webapps#invoice-closed">invoice_closed</a>.</p>
|
||
<h4><a class="anchor" href="#web-app-expand" id="web-app-expand" name="web-app-expand"><i class="anchor-icon"></i></a><code>web_app_expand</code></h4>
|
||
<p>No event payload.</p>
|
||
<p>Expands the mini app to the maximum available height.<br>
|
||
The mini app must also be expanded when the user swipes up on the webview. </p>
|
||
<p>This event must be ignored <em>during</em> a user swipe down, used to reduce the webview.</p>
|
||
<h4><a class="anchor" href="#web-app-request-viewport" id="web-app-request-viewport" name="web-app-request-viewport"><i class="anchor-icon"></i></a><code>web_app_request_viewport</code></h4>
|
||
<p>No event payload.</p>
|
||
<p>Used by mini apps to request information about the viewport, clients should emit a <a href="/api/bots/webapps#viewport-changed">viewport_changed event</a>.</p>
|
||
<h4><a class="anchor" href="#web-app-request-theme" id="web-app-request-theme" name="web-app-request-theme"><i class="anchor-icon"></i></a><code>web_app_request_theme</code></h4>
|
||
<p>No event payload.</p>
|
||
<p>Used by mini apps to request information about the current theme, clients should emit a <a href="/api/bots/webapps#theme-changed">theme_changed event</a>.</p>
|
||
<h4><a class="anchor" href="#web-app-ready" id="web-app-ready" name="web-app-ready"><i class="anchor-icon"></i></a><code>web_app_ready</code></h4>
|
||
<p>No event payload.</p>
|
||
<p>Emitted by mini apps when they are fully loaded, signaling to client apps that the loading spinner placeholder can be removed. </p>
|
||
<p>Note that there is no guarantee that this event will be emitted when the mini app is fully loaded: clients should remove the loading spinner upon receiving this event or when the page finishes loading (native webview/iframe event), whichever event comes first.</p>
|
||
<h4><a class="anchor" href="#web-app-setup-main-button" id="web-app-setup-main-button" name="web-app-setup-main-button"><i class="anchor-icon"></i></a><code>web_app_setup_main_button</code></h4>
|
||
<p>Event payload: JSON object with the following fields:</p>
|
||
<ul>
|
||
<li><code>is_visible</code> - Whether the main button is visible (boolean, false by default)</li>
|
||
<li><code>is_active</code> - Whether the main button is active (boolean, true by default)</li>
|
||
<li><code>text</code> - Button text (string, if <code>trim(text)</code> is empty the button must be hidden)</li>
|
||
<li><code>color</code> - Button color in hex RGB format (string, defaults to the <a href="/api/bots/webapps#theme-parameters"><code>button_color</code> theme parameter</a>)</li>
|
||
<li><code>text_color</code> - Button text color in hex RGB format (string, defaults to the <a href="/api/bots/webapps#theme-parameters"><code>button_text_color</code> theme parameter</a>)</li>
|
||
<li><code>is_progress_visible</code> - Indicates whether the button should display a loading indicator (boolean, false by default)</li>
|
||
</ul>
|
||
<p>Configures the main button, located immediately below the webview: when the user presses it a <a href="/api/bots/webapps#main-button-pressed"><code>main_button_pressed</code> event should be emitted by the client</a>. </p>
|
||
<p>Some clients implement a horizontal media type tab bar located at the bottom of the screen, opened when the user clicks on the attachment menu button: this tab bar contains a horizontal list of buttons used to attach media of a certain type and to open installed <a href="/api/bots/attach">attachment menu mini apps</a>.<br>
|
||
In clients that implements a tab bar, iff the user opens a mini app through a tab bar button and the mini app emits a <code>web_app_setup_main_button</code> with <code>is_visible=true</code>, the main button should be displayed (replacing the tab bar) only after the first tap inside of the webview, to prevent bots from immediately blocking the tab bar. </p>
|
||
<p>Otherwise, the main button can be displayed right away with no user interaction when receiving a <code>web_app_setup_main_button</code> event with <code>is_visible=true</code>. </p>
|
||
<h4><a class="anchor" href="#web-app-setup-back-button" id="web-app-setup-back-button" name="web-app-setup-back-button"><i class="anchor-icon"></i></a><code>web_app_setup_back_button</code></h4>
|
||
<p>Event data: a JSON object with an <code>is_visible</code> boolean field.</p>
|
||
<p>Determines whether to show or hide the back button: when the user presses it a <a href="/api/bots/webapps#back-button-pressed"><code>back_button_pressed</code> event should be emitted by the client</a>.<br>
|
||
Note that on supported platforms, the OS back button can be used instead of a custom back button: in this case, if <code>is_visible</code> is true pressing the OS back button should emit a <a href="/api/bots/webapps#back-button-pressed"><code>back_button_pressed</code> event</a>, otherwise the webview should be closed.</p>
|
||
<h4><a class="anchor" href="#web-app-setup-settings-button" id="web-app-setup-settings-button" name="web-app-setup-settings-button"><i class="anchor-icon"></i></a><code>web_app_setup_settings_button</code></h4>
|
||
<p>Event data: a JSON object with an <code>is_visible</code> boolean field.</p>
|
||
<p>Determines whether to show or hide the settings button: when the user presses it a <a href="/api/bots/webapps#settings-button-pressed"><code>settings_button_pressed</code> event should be emitted by the client</a>. </p>
|
||
<h4><a class="anchor" href="#payment-form-submit" id="payment-form-submit" name="payment-form-submit"><i class="anchor-icon"></i></a><code>payment_form_submit</code></h4>
|
||
<p>Event payload: JSON object with <code>credentials</code> and <code>title</code> fields.</p>
|
||
<ul>
|
||
<li><code>title</code> is the censored credit card title. </li>
|
||
<li><code>credentials</code> is a service-specific JSON object with information about the payment credentials provided by the user to the payment system. </li>
|
||
</ul>
|
||
<p><strong>Neither Telegram, nor bots will have access to your credit card information.</strong><br>
|
||
Credit card details will be handled only by the payment system, see the <a href="/api/payments">payment documentation for more info »</a>. </p>
|
||
<h4><a class="anchor" href="#share-score" id="share-score" name="share-score"><i class="anchor-icon"></i></a><code>share_score</code></h4>
|
||
<p>No event payload.</p>
|
||
<p>Will be called by games when the user explicitly clicks on the <strong>share score</strong> button to share the game, along with their score.<br>
|
||
Typically done by using <a href="/method/messages.forwardMessages">messages.forwardMessages</a> on the game message with the <code>with_my_score</code> flag. </p>
|
||
<h4><a class="anchor" href="#share-game" id="share-game" name="share-game"><i class="anchor-icon"></i></a><code>share_game</code></h4>
|
||
<p>No event payload.</p>
|
||
<p>Will be called by games when the user explicitly clicks on the <strong>share game</strong> button to share the game, without sharing their score.<br>
|
||
Typically done by using <a href="/method/messages.forwardMessages">messages.forwardMessages</a> on the game message without the <code>with_my_score</code> flag, or by sharing the game's <a href="/api/links#game-links">deep link</a>.</p>
|
||
<h4><a class="anchor" href="#game-over" id="game-over" name="game-over"><i class="anchor-icon"></i></a><code>game_over</code></h4>
|
||
<p>No event payload.</p>
|
||
<p>Can be called by games when the user loses a game.</p>
|
||
<h4><a class="anchor" href="#game-loaded" id="game-loaded" name="game-loaded"><i class="anchor-icon"></i></a><code>game_loaded</code></h4>
|
||
<p>No event payload.</p>
|
||
<p>Can be called by games once the game fully loads.</p>
|
||
<h4><a class="anchor" href="#resize-frame" id="resize-frame" name="resize-frame"><i class="anchor-icon"></i></a><code>resize_frame</code></h4>
|
||
<p>Event payload: JSON object with <code>height</code> field.</p>
|
||
<p>Called by supported pages inside of <a href="https://instantview.telegram.org">IV</a> iframe embeds, indicates the new size of the embed frame.</p></div>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
<div class="footer_wrap">
|
||
<div class="footer_columns_wrap footer_desktop">
|
||
<div class="footer_column footer_column_telegram">
|
||
<h5>Telegram</h5>
|
||
<div class="footer_telegram_description"></div>
|
||
Telegram is a cloud-based mobile and desktop messaging app with a focus on security and speed.
|
||
</div>
|
||
|
||
<div class="footer_column">
|
||
<h5><a href="//telegram.org/faq">About</a></h5>
|
||
<ul>
|
||
<li><a href="//telegram.org/faq">FAQ</a></li>
|
||
<li><a href="//telegram.org/privacy">Privacy</a></li>
|
||
<li><a href="//telegram.org/press">Press</a></li>
|
||
</ul>
|
||
</div>
|
||
<div class="footer_column">
|
||
<h5><a href="//telegram.org/apps#mobile-apps">Mobile Apps</a></h5>
|
||
<ul>
|
||
<li><a href="//telegram.org/dl/ios">iPhone/iPad</a></li>
|
||
<li><a href="//telegram.org/android">Android</a></li>
|
||
<li><a href="//telegram.org/dl/web">Mobile Web</a></li>
|
||
</ul>
|
||
</div>
|
||
<div class="footer_column">
|
||
<h5><a href="//telegram.org/apps#desktop-apps">Desktop Apps</a></h5>
|
||
<ul>
|
||
<li><a href="//desktop.telegram.org/">PC/Mac/Linux</a></li>
|
||
<li><a href="//macos.telegram.org/">macOS</a></li>
|
||
<li><a href="//telegram.org/dl/web">Web-browser</a></li>
|
||
</ul>
|
||
</div>
|
||
<div class="footer_column footer_column_platform">
|
||
<h5><a href="/">Platform</a></h5>
|
||
<ul>
|
||
<li><a href="/api">API</a></li>
|
||
<li><a href="//translations.telegram.org/">Translations</a></li>
|
||
<li><a href="//instantview.telegram.org/">Instant View</a></li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<div class="footer_columns_wrap footer_mobile">
|
||
<div class="footer_column">
|
||
<h5><a href="//telegram.org/faq">About</a></h5>
|
||
</div>
|
||
<div class="footer_column">
|
||
<h5><a href="//telegram.org/blog">Blog</a></h5>
|
||
</div>
|
||
<div class="footer_column">
|
||
<h5><a href="//telegram.org/apps">Apps</a></h5>
|
||
</div>
|
||
<div class="footer_column">
|
||
<h5><a href="/">Platform</a></h5>
|
||
</div>
|
||
<div class="footer_column">
|
||
<h5><a href="//telegram.org/press">Press</a></h5>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<script src="/js/main.js?47"></script>
|
||
<script src="/js/jquery.min.js?1"></script>
|
||
<script src="/js/bootstrap.min.js?1"></script>
|
||
|
||
<script>window.initDevPageNav&&initDevPageNav();
|
||
backToTopInit("Go up");
|
||
removePreloadInit();
|
||
</script>
|
||
</body>
|
||
</html>
|
||
|