mirror of
https://github.com/MarshalX/telegram-crawler.git
synced 2024-12-29 15:59:13 +01:00
Update content of files
This commit is contained in:
GitHub Action
parent
f92524b881
commit
57be770453
4 changed files with 135 additions and 125 deletions
|
|
@ -49,7 +49,7 @@
|
|||
<h4><a class="anchor" href="#error-type" id="error-type" name="error-type"><i class="anchor-icon"></i></a>Error Type</h4>
|
||||
<p>A string literal in the form of <code>/[A-Z_0-9]+/</code>, which summarizes the problem. For example, <code>AUTH_KEY_UNREGISTERED</code>. This is an optional parameter.</p>
|
||||
<h4><a class="anchor" href="#error-database" id="error-database" name="error-database"><i class="anchor-icon"></i></a>Error Database</h4>
|
||||
<p>A full machine-readable JSON list of RPC errors that can be returned by all methods in the API can be found <a href="/file/464001651/11814/F-foIa9TsUA.78087.json/174093605b6522c9f4">here »</a>, what follows is a description of its fields: </p>
|
||||
<p>A full machine-readable JSON list of RPC errors that can be returned by all methods in the API can be found <a href="/file/464001369/11a13/YluC1AKcb9I.83769.json/d4636d863f53e8e461">here »</a>, what follows is a description of its fields: </p>
|
||||
<ul>
|
||||
<li><code>errors</code> - All error messages and codes for each method (object).<ul>
|
||||
<li>Keys: Error codes as strings (numeric strings)</li>
|
||||
|
|
|
|||
|
|
@ -83,6 +83,11 @@ Layer…">
|
|||
<li>Added <strong>thumb_document_id</strong> parameter in <a href="/constructor/stickerSet">stickerSet</a></li>
|
||||
<li>Added <strong>additional_methods</strong> parameter, changed type of <strong>saved_credentials</strong> from <strong>flags.1?PaymentSavedCredentials</strong> to <strong>flags.1?Vector<PaymentSavedCredentials></strong> in <a href="/constructor/payments.paymentForm">payments.paymentForm</a></li>
|
||||
</ul>
|
||||
<h4><a class="anchor" href="#push-notification-changes" id="push-notification-changes" name="push-notification-changes"><i class="anchor-icon"></i></a>PUSH notification changes</h4>
|
||||
<h5><a class="anchor" href="#new-push-notifications" id="new-push-notifications" name="new-push-notifications"><i class="anchor-icon"></i></a>New PUSH notifications</h5>
|
||||
<ul>
|
||||
<li>Added <a href="/api/push-updates#possible-notifications">MESSAGE_RECURRING_PAY</a> - <code>{1} were charged {2}</code></li>
|
||||
</ul>
|
||||
<h4><a class="anchor" href="#schema" id="schema" name="schema"><i class="anchor-icon"></i></a>Schema</h4>
|
||||
<div><pre><code><a href="/constructor/userFull">userFull</a>#c4b1fc3f flags:<a href="/type/%23">#</a> blocked:flags.0?<a href="/constructor/true">true</a> phone_calls_available:flags.4?<a href="/constructor/true">true</a> phone_calls_private:flags.5?<a href="/constructor/true">true</a> can_pin_message:flags.7?<a href="/constructor/true">true</a> has_scheduled:flags.12?<a href="/constructor/true">true</a> video_calls_available:flags.13?<a href="/constructor/true">true</a> voice_messages_forbidden:flags.20?<a href="/constructor/true">true</a> id:<a href="/type/long">long</a> about:flags.1?<a href="/type/string">string</a> settings:<a href="/type/PeerSettings">PeerSettings</a> profile_photo:flags.2?<a href="/type/Photo">Photo</a> notify_settings:<a href="/type/PeerNotifySettings">PeerNotifySettings</a> bot_info:flags.3?<a href="/type/BotInfo">BotInfo</a> pinned_msg_id:flags.6?<a href="/type/int">int</a> common_chats_count:<a href="/type/int">int</a> folder_id:flags.11?<a href="/type/int">int</a> ttl_period:flags.14?<a href="/type/int">int</a> theme_emoticon:flags.15?<a href="/type/string">string</a> private_forward_name:flags.16?<a href="/type/string">string</a> bot_group_admin_rights:flags.17?<a href="/type/ChatAdminRights">ChatAdminRights</a> bot_broadcast_admin_rights:flags.18?<a href="/type/ChatAdminRights">ChatAdminRights</a> premium_gifts:flags.19?<a href="/type/Vector%20t">Vector</a><<a href="/type/PremiumGiftOption">PremiumGiftOption</a>> = <a href="/type/UserFull">UserFull</a>;<br>
|
||||
<a href="/constructor/stickerSet">stickerSet</a>#2dd14edc flags:<a href="/type/%23">#</a> archived:flags.1?<a href="/constructor/true">true</a> official:flags.2?<a href="/constructor/true">true</a> masks:flags.3?<a href="/constructor/true">true</a> animated:flags.5?<a href="/constructor/true">true</a> videos:flags.6?<a href="/constructor/true">true</a> emojis:flags.7?<a href="/constructor/true">true</a> installed_date:flags.0?<a href="/type/int">int</a> id:<a href="/type/long">long</a> access_hash:<a href="/type/long">long</a> title:<a href="/type/string">string</a> short_name:<a href="/type/string">string</a> thumbs:flags.4?<a href="/type/Vector%20t">Vector</a><<a href="/type/PhotoSize">PhotoSize</a>> thumb_dc_id:flags.4?<a href="/type/int">int</a> thumb_version:flags.4?<a href="/type/int">int</a> thumb_document_id:flags.8?<a href="/type/long">long</a> count:<a href="/type/int">int</a> hash:<a href="/type/int">int</a> = <a href="/type/StickerSet">StickerSet</a>;<br>
|
||||
|
|
|
|||
|
|
@ -692,6 +692,11 @@
|
|||
<td>1. User name<br>2. Quiz name</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>MESSAGE_RECURRING_PAY</td>
|
||||
<td>{1} were charged {2}</td>
|
||||
<td>1. <br>2.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>MESSAGE_ROUND</td>
|
||||
<td>{1} sent you a video message</td>
|
||||
<td>1. User name</td>
|
||||
|
|
|
|||
|
|
@ -49,14 +49,15 @@
|
|||
<div class="blog_video_player_wrap" style="max-width: 600px; margin: 20px auto 20px;">
|
||||
<video class="blog_video_player tl_blog_vid_autoplay" onclick="videoTogglePlay(this)" autoplay loop controls muted poster="/file/464001434/100bf/eWprjdgzEbE.100386/644bbea83084f44c8f" style="max-width: 600px;" title="console.log('Vive la révolution')" alt="Bot Revolution">
|
||||
<source src="/file/464001679/11aa9/KQx_BlPVXRo.4922145.mp4/c65433c8ac11a347a8" type="video/mp4">
|
||||
</source></video>
|
||||
</video>
|
||||
</div>
|
||||
|
||||
<blockquote>
|
||||
<p>To see a <strong>Web App</strong> in action, try our sample <a href="https://t.me/durgerkingbot">@DurgerKingBot</a>.</p>
|
||||
</blockquote>
|
||||
<hr>
|
||||
<h3><a class="anchor" href="#recent-changes" id="recent-changes" name="recent-changes"><i class="anchor-icon"></i></a>Recent changes</h3>
|
||||
<h4><a class="anchor" href="#june-20-2022" id="june-20-2022" name="june-20-2022"><i class="anchor-icon"></i></a>June 20, 2022</h4>
|
||||
<h3><a class="anchor" name="recent-changes" href="#recent-changes"><i class="anchor-icon"></i></a>Recent changes</h3>
|
||||
<h4><a class="anchor" name="june-20-2022" href="#june-20-2022"><i class="anchor-icon"></i></a>June 20, 2022</h4>
|
||||
<p><strong>Bot API 6.1</strong></p>
|
||||
<ul>
|
||||
<li>Added the ability to use bots added to the attachment menu in group, supergroup and channel chats.</li>
|
||||
|
|
@ -68,18 +69,19 @@
|
|||
<li>Added the <a href="#events-available-for-web-apps">events</a> <em>backButtonClicked</em>, <em>settingsButtonClicked</em>, <em>invoiceClosed</em>.</li>
|
||||
</ul>
|
||||
<hr>
|
||||
<h3><a class="anchor" href="#designing-web-apps" id="designing-web-apps" name="designing-web-apps"><i class="anchor-icon"></i></a>Designing Web Apps</h3>
|
||||
<h4><a class="anchor" href="#color-schemes" id="color-schemes" name="color-schemes"><i class="anchor-icon"></i></a>Color Schemes</h4>
|
||||
<p>Web Apps always receive data about the user's current <strong>color theme</strong> in real time, so you can adjust the appearance of your interfaces to match it. For example, when users switch between <strong>Day and Night</strong> modes or use various <a href="https://telegram.org/blog/protected-content-delete-by-date-and-more#global-chat-themes-on-android">custom themes</a>.</p>
|
||||
<h3><a class="anchor" name="designing-web-apps" href="#designing-web-apps"><i class="anchor-icon"></i></a>Designing Web Apps</h3>
|
||||
<h4><a class="anchor" name="color-schemes" href="#color-schemes"><i class="anchor-icon"></i></a>Color Schemes</h4>
|
||||
<p>Web Apps always receive data about the user's current <strong>color theme</strong> in real time, so you can adjust the appearance of your interfaces to match it. For example, when users switch between <strong>Day and Night</strong> modes or use various <a href="https://telegram.org/blog/protected-content-delete-by-date-and-more#global-chat-themes-on-android">custom themes</a>.</p>
|
||||
<div class="blog_video_player_wrap" style="max-width: 600px; margin: 20px auto 20px;">
|
||||
<video class="blog_video_player tl_blog_vid_autoplay" onclick="videoTogglePlay(this)" autoplay loop controls muted poster="/file/464001576/10249/wikoQUNnrH4.112118/7b6c8d3366ada2615b" style="max-width: 600px;" title="" alt="Switching Colors">
|
||||
<source src="/file/464001257/12087/QNQUbIi864k.909800.mp4/8ea7adad7db407388e" type="video/mp4">
|
||||
</source></video>
|
||||
</video>
|
||||
</div>
|
||||
|
||||
<blockquote>
|
||||
<p><a href="#themeparams">Jump to technical information</a></p>
|
||||
</blockquote>
|
||||
<h4><a class="anchor" href="#design-guidelines" id="design-guidelines" name="design-guidelines"><i class="anchor-icon"></i></a>Design Guidelines</h4>
|
||||
<h4><a class="anchor" name="design-guidelines" href="#design-guidelines"><i class="anchor-icon"></i></a>Design Guidelines</h4>
|
||||
<p>Telegram apps are known for being snappy, smooth and following a consistent cross-platform design. Your Web App should ideally reflect these principles.</p>
|
||||
<ul>
|
||||
<li>All elements should be responsive and designed with a mobile-first approach.</li>
|
||||
|
|
@ -89,12 +91,13 @@
|
|||
<li>The app should deliver a seamless experience by monitoring the <a href="#color-schemes">dynamic theme-based colors</a> provided by the API and using them accordingly.</li>
|
||||
</ul>
|
||||
<hr>
|
||||
<h3><a class="anchor" href="#implementing-web-apps" id="implementing-web-apps" name="implementing-web-apps"><i class="anchor-icon"></i></a>Implementing Web Apps</h3>
|
||||
<p>Telegram currently supports four different ways of launching Web Apps: from a <a href="#keyboard-button-web-apps">keyboard button</a>, from an <a href="#inline-button-web-apps">inline button</a>, from the <a href="#launching-web-apps-from-the-menu-button">bot menu button</a> – and even from the <a href="#launching-web-apps-from-the-attachment-menu">attachment menu</a>.</p>
|
||||
<h3><a class="anchor" name="implementing-web-apps" href="#implementing-web-apps"><i class="anchor-icon"></i></a>Implementing Web Apps</h3>
|
||||
<p>Telegram currently supports four different ways of launching Web Apps: from a <a href="#keyboard-button-web-apps">keyboard button</a>, from an <a href="#inline-button-web-apps">inline button</a>, from the <a href="#launching-web-apps-from-the-menu-button">bot menu button</a> – and even from the <a href="#launching-web-apps-from-the-attachment-menu">attachment menu</a>.</p>
|
||||
<div class="blog_image_wrap blog_medium_image_wrap">
|
||||
<a href="/file/464001702/1194c/mBQhTbIWqw8.451557/08727d5d763e24d750" target="_blank"><img src="/file/464001702/1194c/mBQhTbIWqw8.451557/08727d5d763e24d750" title="" alt="Types of buttons" srcset="/file/464001702/1194c/mBQhTbIWqw8.451557/08727d5d763e24d750 , 2x"></a>
|
||||
<a href="/file/464001702/1194c/mBQhTbIWqw8.451557/08727d5d763e24d750" target="_blank"><img src="/file/464001702/1194c/mBQhTbIWqw8.451557/08727d5d763e24d750" title="" alt="Types of buttons" srcset="/file/464001702/1194c/mBQhTbIWqw8.451557/08727d5d763e24d750 , 2x" /></a>
|
||||
</div>
|
||||
<h4><a class="anchor" href="#keyboard-button-web-apps" id="keyboard-button-web-apps" name="keyboard-button-web-apps"><i class="anchor-icon"></i></a>Keyboard Button Web Apps</h4>
|
||||
|
||||
<h4><a class="anchor" name="keyboard-button-web-apps" href="#keyboard-button-web-apps"><i class="anchor-icon"></i></a>Keyboard Button Web Apps</h4>
|
||||
<blockquote>
|
||||
<p><strong>TL;DR:</strong> Web Apps launched from a <strong>web_app</strong> type <a href="/bots/api#keyboardbutton">keyboard button</a> can send data back to the bot in a <em>service message</em> using <a href="#initializing-web-apps">Telegram.WebApp.sendData</a>. This makes it possible for the bot to produce a response without communicating with any external servers.</p>
|
||||
</blockquote>
|
||||
|
|
@ -103,22 +106,22 @@
|
|||
<p>To transmit data from the user back to the bot, the Web App can call the <a href="#initializing-web-apps">Telegram.WebApp.sendData</a> method. Data will be transmitted to the bot as a String in a service message. The bot can continue communicating with the user after receiving it.</p>
|
||||
<p><strong>Good for:</strong></p>
|
||||
<ul>
|
||||
<li><strong>Custom data input interfaces</strong> (a personalized calendar for selecting dates; selecting data from a list with advanced search options; a randomizer that lets the user "spin a wheel" and chooses one of the available options, etc.)</li>
|
||||
<li><strong>Custom data input interfaces</strong> (a personalized calendar for selecting dates; selecting data from a list with advanced search options; a randomizer that lets the user “spin a wheel” and chooses one of the available options, etc.)</li>
|
||||
<li><strong>Reusable components</strong> that do not depend on a particular bot.</li>
|
||||
</ul>
|
||||
<h4><a class="anchor" href="#inline-button-web-apps" id="inline-button-web-apps" name="inline-button-web-apps"><i class="anchor-icon"></i></a>Inline Button Web Apps</h4>
|
||||
<h4><a class="anchor" name="inline-button-web-apps" href="#inline-button-web-apps"><i class="anchor-icon"></i></a>Inline Button Web Apps</h4>
|
||||
<blockquote>
|
||||
<p><strong>TL;DR:</strong> For more interactive Web Apps like <a href="https://t.me/durgerkingbot">@DurgerKingBot</a>, use a <strong>web_app</strong> type <a href="/bots/api#inlinekeyboardbutton">Inline KeyboardButton</a>, which gets basic user information and can be used to send a message on behalf of the user to the chat with the bot.</p>
|
||||
</blockquote>
|
||||
<p>If receiving text data alone is insufficient or you need a more advanced and personalized interface, you can open a Web App using a <strong>web_app</strong> type <a href="/bots/api#inlinekeyboardbutton">Inline KeyboardButton</a>.</p>
|
||||
<p>From the button, a Web App will open with the URL specified in the button. In addition to the user's <a href="#color-schemes">theme settings</a>, it will receive basic user information (<code>ID</code>, <code>name</code>, <code>username</code>, <code>language_code</code>) and a unique identifier for the session, <strong>query_id</strong>, which allows messages on behalf of the user to be sent back to the bot.</p>
|
||||
<p>From the button, a Web App will open with the URL specified in the button. In addition to the user's <a href="#color-schemes">theme settings</a>, it will receive basic user information (<code>ID</code>, <code>name</code>, <code>username</code>, <code>language_code</code>) and a unique identifier for the session, <strong>query_id</strong>, which allows messages on behalf of the user to be sent back to the bot.</p>
|
||||
<p>The bot can call the Bot API method <a href="/bots/api#answerwebappquery">answerWebAppQuery</a> to send an inline message from the user back to the bot and close the Web App. After receiving the message, the bot can continue communicating with the user.</p>
|
||||
<p><strong>Good for:</strong></p>
|
||||
<ul>
|
||||
<li>Fully-fledged web services and integrations of any kind.</li>
|
||||
<li>The use cases are effectively <strong>unlimited</strong>.</li>
|
||||
</ul>
|
||||
<h4><a class="anchor" href="#launching-web-apps-from-the-menu-button" id="launching-web-apps-from-the-menu-button" name="launching-web-apps-from-the-menu-button"><i class="anchor-icon"></i></a>Launching Web Apps from the Menu Button</h4>
|
||||
<h4><a class="anchor" name="launching-web-apps-from-the-menu-button" href="#launching-web-apps-from-the-menu-button"><i class="anchor-icon"></i></a>Launching Web Apps from the Menu Button</h4>
|
||||
<blockquote>
|
||||
<p><strong>TL;DR:</strong> Web Apps can be launched from a customized menu button. This simply offers a quicker way to access the app and is otherwise <strong>identical</strong> to <a href="#inline-button-web-apps">launching a Web App from an inline button</a>.</p>
|
||||
</blockquote>
|
||||
|
|
@ -127,34 +130,35 @@
|
|||
<video class="blog_video_player tl_blog_vid_autoplay" onclick="videoTogglePlay(this)" autoplay loop controls muted poster="/file/464001829/12247/e6LoU12o4Ng.109921/1226afb8f18f8ea8c4
|
||||
" style="max-width: 600px;" title="" alt="Menu Button">
|
||||
<source src="/file/464001838/10fa2/WrJmkuIMan0.1217917.mp4/e25a5f31bc4e6493f7" type="video/mp4">
|
||||
</source></video>
|
||||
</video>
|
||||
</div>
|
||||
|
||||
<p>To configure the menu button, you must specify the text it should show and the Web App URL. There are two ways to set these parameters:</p>
|
||||
<ul>
|
||||
<li>To customize the button for <strong>all users</strong>, use <a href="https://t.me/botfather">@BotFather</a> (the <code>/setmenubutton</code> command or <em>Bot Settings > Menu Button</em>).</li>
|
||||
<li>To customize the button for both <strong>all users</strong> and <strong>specific users</strong>, use the <a href="/bots/api#setchatmenubutton">setChatMenuButton</a> method in the Bot API. For example, change the button text according to the user's language, or show links to different Web Apps based on a user's settings in your bot.</li>
|
||||
<li>To customize the button for both <strong>all users</strong> and <strong>specific users</strong>, use the <a href="/bots/api#setchatmenubutton">setChatMenuButton</a> method in the Bot API. For example, change the button text according to the user's language, or show links to different Web Apps based on a user's settings in your bot.</li>
|
||||
</ul>
|
||||
<p>Apart from this, Web Apps opened via the menu button work in the exact same way as when <a href="#inline-button-web-apps">using inline buttons</a>.</p>
|
||||
<blockquote>
|
||||
<p><a href="https://t.me/durgerkingbot">@DurgerKingBot</a> allows launching its Web App both from an inline button and from the menu button.</p>
|
||||
</blockquote>
|
||||
<h4><a class="anchor" href="#launching-web-apps-from-the-attachment-menu" id="launching-web-apps-from-the-attachment-menu" name="launching-web-apps-from-the-attachment-menu"><i class="anchor-icon"></i></a>Launching Web Apps from the Attachment Menu</h4>
|
||||
<h4><a class="anchor" name="launching-web-apps-from-the-attachment-menu" href="#launching-web-apps-from-the-attachment-menu"><i class="anchor-icon"></i></a>Launching Web Apps from the Attachment Menu</h4>
|
||||
<blockquote>
|
||||
<p><strong>TL;DR:</strong> Web App Bots can request to be added directly to a user's attachment menu, allowing them to be quickly launched from any chat. To try this mode, open this <a href="https://t.me/durgerkingbot?startattach">attachment menu link</a> for <em>@DurgerKingBot</em>, then use the <img src="/file/464001085/2/E4hNXSNQimQ.2503/bf6ffcab3cb3afd43d" alt="Attach"> menu in <strong>any type of chat</strong>.</p>
|
||||
<p><strong>TL;DR:</strong> Web App Bots can request to be added directly to a user's attachment menu, allowing them to be quickly launched from any chat. To try this mode, open this <a href="https://t.me/durgerkingbot?startattach">attachment menu link</a> for <em>@DurgerKingBot</em>, then use the <img class="icon" src="/file/464001085/2/E4hNXSNQimQ.2503/bf6ffcab3cb3afd43d" alt="Attach"> menu in <strong>any type of chat</strong>.</p>
|
||||
</blockquote>
|
||||
<p>Web App Bots can request to be added directly to a user's attachment menu, allowing them to be quickly launched from <strong>any type of chat</strong>. ^==NEW==^ You can configure in which types of chats your web app can be started from the attachment menu (private, groups, supergroups or channels).</p>
|
||||
<p>Attachment menu integration is currently only available for major advertisers on the <a href="https://promote.telegram.org/basics">Telegram Ad Platform</a>. However, <strong>all bots</strong> can use it in the <a href="#using-bots-in-the-test-environment">test server environment</a>.</p>
|
||||
<p>To enable this feature for your bot, open <a href="https://t.me/botfather">@BotFather</a> <a href="#using-bots-in-the-test-environment">from an account on the test server</a> and send the <code>/setattach</code> command – or go to <em>Bot Settings > Configure Attachment Menu</em>. Then specify the URL that will be opened to launch the bot's Web App via its icon in the attachment menu.</p>
|
||||
<p>^==NEW==^ You can add a 'Settings' item to the context menu of your Web App using <a href="https://t.me/botfather">@BotFather</a>. When users select this option from the menu, your bot will receive a <code>settingsButtonClicked</code> event.</p>
|
||||
<p>In addition to the user's <a href="#color-schemes">theme settings</a>, the bot will receive basic user information (<code>ID</code>, <code>name</code>, <code>username</code>, <code>language_code</code>, <code>photo</code>), as well as public info about the chat partner (<code>ID</code>, <code>name</code>, <code>username</code>, <code>photo</code>) or the chat info (<code>ID</code>, <code>type</code>, <code>title</code>, <code>username</code>, <code>photo</code>) and a unique identifier for the web view session <strong>query_id</strong>, which allows messages of any type to be sent to the chat on behalf of the user that opened the bot.</p>
|
||||
<p>Web App Bots can request to be added directly to a user's attachment menu, allowing them to be quickly launched from <strong>any type of chat</strong>. <sup><mark>NEW</mark></sup> You can configure in which types of chats your web app can be started from the attachment menu (private, groups, supergroups or channels).</p>
|
||||
<p>Attachment menu integration is currently only available for major advertisers on the <a href="https://promote.telegram.org/basics">Telegram Ad Platform</a>. However, <strong>all bots</strong> can use it in the <a href="#using-bots-in-the-test-environment">test server environment</a>.</p>
|
||||
<p>To enable this feature for your bot, open <a href="https://t.me/botfather">@BotFather</a> <a href="#using-bots-in-the-test-environment">from an account on the test server</a> and send the <code>/setattach</code> command – or go to <em>Bot Settings > Configure Attachment Menu</em>. Then specify the URL that will be opened to launch the bot's Web App via its icon in the attachment menu.</p>
|
||||
<p><sup><mark>NEW</mark></sup> You can add a 'Settings' item to the context menu of your Web App using <a href="https://t.me/botfather">@BotFather</a>. When users select this option from the menu, your bot will receive a <code>settingsButtonClicked</code> event.</p>
|
||||
<p>In addition to the user's <a href="#color-schemes">theme settings</a>, the bot will receive basic user information (<code>ID</code>, <code>name</code>, <code>username</code>, <code>language_code</code>, <code>photo</code>), as well as public info about the chat partner (<code>ID</code>, <code>name</code>, <code>username</code>, <code>photo</code>) or the chat info (<code>ID</code>, <code>type</code>, <code>title</code>, <code>username</code>, <code>photo</code>) and a unique identifier for the web view session <strong>query_id</strong>, which allows messages of any type to be sent to the chat on behalf of the user that opened the bot.</p>
|
||||
<p>The bot can call the Bot API method <a href="/bots/api#answerwebappquery">answerWebAppQuery</a>, which sends an inline message from the user via the bot to the chat where it was launched and closes the Web App.</p>
|
||||
<blockquote>
|
||||
<p>You can read more about adding bots to the attachment menu <a href="#adding-bots-to-the-attachment-menu">here</a>.</p>
|
||||
</blockquote>
|
||||
<hr>
|
||||
<h3><a class="anchor" href="#initializing-web-apps" id="initializing-web-apps" name="initializing-web-apps"><i class="anchor-icon"></i></a>Initializing Web Apps</h3>
|
||||
<h3><a class="anchor" name="initializing-web-apps" href="#initializing-web-apps"><i class="anchor-icon"></i></a>Initializing Web Apps</h3>
|
||||
<p>To connect your Web App to the Telegram client, place the script <a href="https://telegram.org/js/telegram-web-app.js">telegram-web-app.js</a> in the <code><head></code> tag before any other scripts, using this code:</p>
|
||||
<pre><code><script src="https://telegram.org/js/telegram-web-app.js"></script></code></pre>
|
||||
<pre><code><script src="https://telegram.org/js/telegram-web-app.js"></script></code></pre>
|
||||
<p>Once the script is connected, a <code>window.Telegram.WebApp</code> object will become available with the following fields:</p>
|
||||
<table class="table">
|
||||
<thead>
|
||||
|
|
@ -168,22 +172,22 @@
|
|||
<tr>
|
||||
<td>initData</td>
|
||||
<td>String</td>
|
||||
<td>A string with raw data transferred to the Web App, convenient for <a href="#validating-data-received-via-the-web-app">validating data</a>.<br><strong>WARNING:</strong> <a href="#validating-data-received-via-the-web-app">Validate data</a> from this field before using it on the bot's server.</td>
|
||||
<td>A string with raw data transferred to the Web App, convenient for <a href="#validating-data-received-via-the-web-app">validating data</a>.<br><strong>WARNING:</strong> <a href="#validating-data-received-via-the-web-app">Validate data</a> from this field before using it on the bot's server.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>initDataUnsafe</td>
|
||||
<td><a href="#webappinitdata">WebAppInitData</a></td>
|
||||
<td>An object with input data transferred to the Web App.<br><strong>WARNING:</strong> Data from this field should not be trusted. You should only use data from <em>initData</em> on the bot's server and only after it has been <a href="#validating-data-received-via-the-web-app">validated</a>.</td>
|
||||
<td>An object with input data transferred to the Web App.<br><strong>WARNING:</strong> Data from this field should not be trusted. You should only use data from <em>initData</em> on the bot's server and only after it has been <a href="#validating-data-received-via-the-web-app">validated</a>.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>version ^==NEW==^</td>
|
||||
<td>version <sup><mark>NEW</mark></sup></td>
|
||||
<td>String</td>
|
||||
<td>The version of the Bot API available in the user's Telegram app.</td>
|
||||
<td>The version of the Bot API available in the user's Telegram app.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>colorScheme</td>
|
||||
<td>String</td>
|
||||
<td>The color scheme currently used in the Telegram app. Either “light” or “dark”. <br>Also available as the CSS variable <code>var(--tg-color-scheme)</code>.</td>
|
||||
<td>The color scheme currently used in the Telegram app. Either “light” or “dark”.<br>Also available as the CSS variable <code>var(--tg-color-scheme)</code>.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>themeParams</td>
|
||||
|
|
@ -198,25 +202,25 @@
|
|||
<tr>
|
||||
<td>viewportHeight</td>
|
||||
<td>Float</td>
|
||||
<td>The current height of the visible area of the Web App. Also available in CSS as the variable <code>var(--tg-viewport-height)</code>. <br><br>The application can display just the top part of the Web App, with its lower part remaining outside the screen area. From this position, the user can "pull" the Web App to its maximum height, while the bot can do the same by calling the <strong>expand()</strong> method. As the position of the Web App changes, the current height value of the visible area will be updated in real time.<br><br>Please note that the refresh rate of this value is not sufficient to smoothly follow the lower border of the window. It should not be used to pin interface elements to the bottom of the visible area. It's more appropriate to use the value of the <code>viewportStableHeight</code> field for this purpose.</td>
|
||||
<td>The current height of the visible area of the Web App. Also available in CSS as the variable <code>var(--tg-viewport-height)</code>.<br><br>The application can display just the top part of the Web App, with its lower part remaining outside the screen area. From this position, the user can “pull” the Web App to its maximum height, while the bot can do the same by calling the <strong>expand()</strong> method. As the position of the Web App changes, the current height value of the visible area will be updated in real time.<br><br>Please note that the refresh rate of this value is not sufficient to smoothly follow the lower border of the window. It should not be used to pin interface elements to the bottom of the visible area. It's more appropriate to use the value of the <code>viewportStableHeight</code> field for this purpose.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>viewportStableHeight</td>
|
||||
<td>Float</td>
|
||||
<td>The height of the visible area of the Web App in its last stable state. Also available in CSS as a variable <code>var(--tg-viewport-stable-height)</code>.<br><br>The application can display just the top part of the Web App, with its lower part remaining outside the screen area. From this position, the user can "pull" the Web App to its maximum height, while the bot can do the same by calling the <strong>expand()</strong> method. Unlike the value of <code>viewportHeight</code>, the value of <code>viewportStableHeight</code> does not change as the position of the Web App changes with user gestures or during animations. The value of <code>viewportStableHeight</code> will be updated after all gestures and animations are completed and the Web App reaches its final size.<br><br><em>Note the <a href="#events-available-for-web-apps">event</a> <code>viewportChanged</code> with the passed parameter <code>isStateStable=true</code>, which will allow you to track when the stable state of the height of the visible area changes.</em></td>
|
||||
<td>The height of the visible area of the Web App in its last stable state. Also available in CSS as a variable <code>var(--tg-viewport-stable-height)</code>.<br><br>The application can display just the top part of the Web App, with its lower part remaining outside the screen area. From this position, the user can “pull” the Web App to its maximum height, while the bot can do the same by calling the <strong>expand()</strong> method. Unlike the value of <code>viewportHeight</code>, the value of <code>viewportStableHeight</code> does not change as the position of the Web App changes with user gestures or during animations. The value of <code>viewportStableHeight</code> will be updated after all gestures and animations are completed and the Web App reaches its final size.<br><br><em>Note the <a href="#events-available-for-web-apps">event</a> <code>viewportChanged</code> with the passed parameter <code>isStateStable=true</code>, which will allow you to track when the stable state of the height of the visible area changes.</em></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>headerColor ^==NEW==^</td>
|
||||
<td>headerColor <sup><mark>NEW</mark></sup></td>
|
||||
<td>String</td>
|
||||
<td>Current header color in the <code>#RRGGBB</code> format.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>backgroundColor ^==NEW==^</td>
|
||||
<td>backgroundColor <sup><mark>NEW</mark></sup></td>
|
||||
<td>String</td>
|
||||
<td>Current background color in the <code>#RRGGBB</code> format.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>BackButton ^==NEW==^</td>
|
||||
<td>BackButton <sup><mark>NEW</mark></sup></td>
|
||||
<td><a href="#backbutton">BackButton</a></td>
|
||||
<td>An object for controlling the back button which can be displayed in the header of the Web App in the Telegram interface.</td>
|
||||
</tr>
|
||||
|
|
@ -226,24 +230,24 @@
|
|||
<td>An object for controlling the main button, which is displayed at the bottom of the Web App in the Telegram interface.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>HapticFeedback ^==NEW==^</td>
|
||||
<td>HapticFeedback <sup><mark>NEW</mark></sup></td>
|
||||
<td><a href="#hapticfeedback">HapticFeedback</a></td>
|
||||
<td>An object for controlling haptic feedback.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>isVersionAtLeast(version) ^==NEW==^</td>
|
||||
<td>isVersionAtLeast(version) <sup><mark>NEW</mark></sup></td>
|
||||
<td>Function</td>
|
||||
<td>Returns true if the user's app supports a version of the Bot API that is equal to or higher than the version passed as the parameter.</td>
|
||||
<td>Returns true if the user's app supports a version of the Bot API that is equal to or higher than the version passed as the parameter.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>setHeaderColor(color) ^==NEW==^</td>
|
||||
<td>setHeaderColor(color) <sup><mark>NEW</mark></sup></td>
|
||||
<td>Function</td>
|
||||
<td>==Bot API 6.1+== A method that sets the app header color. You can only pass <em>Telegram.WebApp.themeParams.bg_color</em> or <em>Telegram.WebApp.themeParams.secondary_bg_color</em> as a color or you can use keywords <em>bg_color</em>, <em>secondary_bg_color</em> instead.</td>
|
||||
<td><mark>Bot API 6.1+</mark> A method that sets the app header color. You can only pass <em>Telegram.WebApp.themeParams.bg_color</em> or <em>Telegram.WebApp.themeParams.secondary_bg_color</em> as a color or you can use keywords <em>bg_color</em>, <em>secondary_bg_color</em> instead.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>setBackgroundColor(color) ^==NEW==^</td>
|
||||
<td>setBackgroundColor(color) <sup><mark>NEW</mark></sup></td>
|
||||
<td>Function</td>
|
||||
<td>==Bot API 6.1+== A method that sets the app background color in the <code>#RRGGBB</code> format or you can use keywords <em>bg_color</em>, <em>secondary_bg_color</em> instead.</td>
|
||||
<td><mark>Bot API 6.1+</mark> A method that sets the app background color in the <code>#RRGGBB</code> format or you can use keywords <em>bg_color</em>, <em>secondary_bg_color</em> instead.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>onEvent(eventType, eventHandler)</td>
|
||||
|
|
@ -261,24 +265,24 @@
|
|||
<td>A method used to send data to the bot. When this method is called, a service message is sent to the bot containing the data <em>data</em> of the length up to 4096 bytes, and the Web App is closed. See the field <em>web_app_data</em> in the class <a href="/bots/api#message">Message</a>.<br><br><em>This method is only available for Web Apps launched via a <a href="#keyboard-button-web-apps">Keyboard button</a>.</em></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>openLink(url) ^==NEW==^</td>
|
||||
<td>openLink(url) <sup><mark>NEW</mark></sup></td>
|
||||
<td>Function</td>
|
||||
<td>A method that opens a link in an external browser. The Web App will <em>not</em> be closed.<br><br><em>Note that this method can be called only in response to the user interaction with the Web App interface (e.g. click inside the Web App or on the main button)</em></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>openTelegramLink(url) ^==NEW==^</td>
|
||||
<td>openTelegramLink(url) <sup><mark>NEW</mark></sup></td>
|
||||
<td>Function</td>
|
||||
<td>A method that opens a telegram link inside Telegram app. The Web App <em>will</em> be closed.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>openInvoice(url[, callback]) ^==NEW==^</td>
|
||||
<td>openInvoice(url[, callback]) <sup><mark>NEW</mark></sup></td>
|
||||
<td>Function</td>
|
||||
<td>==Bot API 6.1+== A method that opens an invoice using the link <em>url</em>. The Web App will receive the <a href="#events-available-for-web-apps">event</a> <em>invoiceClosed</em> when the invoice is closed. If an optional <em>callback</em> parameter was passed, the <em>callback</em> function will be called and the invoice status will be passed as the first argument.</td>
|
||||
<td><mark>Bot API 6.1+</mark> A method that opens an invoice using the link <em>url</em>. The Web App will receive the <a href="#events-available-for-web-apps">event</a> <em>invoiceClosed</em> when the invoice is closed. If an optional <em>callback</em> parameter was passed, the <em>callback</em> function will be called and the invoice status will be passed as the first argument.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>ready()</td>
|
||||
<td>Function</td>
|
||||
<td>A method that informs the Telegram app that the Web App is ready to be displayed. <br>It is recommended to call this method as early as possible, as soon as all essential interface elements are loaded. Once this method is called, the loading placeholder is hidden and the Web App is shown. <br>If the method is not called, the placeholder will be hidden only when the page is fully loaded.</td>
|
||||
<td>A method that informs the Telegram app that the Web App is ready to be displayed.<br>It is recommended to call this method as early as possible, as soon as all essential interface elements are loaded. Once this method is called, the loading placeholder is hidden and the Web App is shown.<br>If the method is not called, the placeholder will be hidden only when the page is fully loaded.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>expand()</td>
|
||||
|
|
@ -292,8 +296,8 @@
|
|||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<h4><a class="anchor" href="#themeparams" id="themeparams" name="themeparams"><i class="anchor-icon"></i></a>ThemeParams</h4>
|
||||
<p>Web Apps can <a href="#color-schemes">adjust the appearance</a> of the interface to match the Telegram user's app in real time. This object contains the user's current theme settings:</p>
|
||||
<h4><a class="anchor" name="themeparams" href="#themeparams"><i class="anchor-icon"></i></a>ThemeParams</h4>
|
||||
<p>Web Apps can <a href="#color-schemes">adjust the appearance</a> of the interface to match the Telegram user's app in real time. This object contains the user's current theme settings:</p>
|
||||
<table class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
|
|
@ -334,17 +338,18 @@
|
|||
<td><em>Optional</em>. Button text color in the <code>#RRGGBB</code> format.<br>Also available as the CSS variable <code>var(--tg-theme-button-text-color)</code>.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>secondary_bg_color ^==NEW==^</td>
|
||||
<td>secondary_bg_color <sup><mark>NEW</mark></sup></td>
|
||||
<td>String</td>
|
||||
<td><em>Optional</em>. ==Bot API 6.1+== Secondary background color in the <code>#RRGGBB</code> format. <br>Also available as the CSS variable <code>var(--tg-theme-secondary-bg-color)</code>.</td>
|
||||
<td><em>Optional</em>. <mark>Bot API 6.1+</mark> Secondary background color in the <code>#RRGGBB</code> format.<br>Also available as the CSS variable <code>var(--tg-theme-secondary-bg-color)</code>.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div>
|
||||
<a href="/file/464001695/11185/DAwyUjA7LNA.215601/26f4c8ebf862ae860d" target="_blank"><img src="/file/464001695/11185/DAwyUjA7LNA.215601/26f4c8ebf862ae860d" title="WebViewColors explained" class="dev_page_image"></a>
|
||||
<a href="/file/464001695/11185/DAwyUjA7LNA.215601/26f4c8ebf862ae860d" target="_blank"><img src="/file/464001695/11185/DAwyUjA7LNA.215601/26f4c8ebf862ae860d" title="WebViewColors explained" class="dev_page_image" /></a>
|
||||
</div>
|
||||
<h4><a class="anchor" href="#backbutton" id="backbutton" name="backbutton"><i class="anchor-icon"></i></a>BackButton</h4>
|
||||
<p>^==NEW==^ This object controls the <strong>back</strong> button, which can be displayed in the header of the Web App in the Telegram interface.</p>
|
||||
|
||||
<h4><a class="anchor" name="backbutton" href="#backbutton"><i class="anchor-icon"></i></a>BackButton</h4>
|
||||
<p><sup><mark>NEW</mark></sup> This object controls the <strong>back</strong> button, which can be displayed in the header of the Web App in the Telegram interface.</p>
|
||||
<table class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
|
|
@ -362,27 +367,27 @@
|
|||
<tr>
|
||||
<td>onClick(callback)</td>
|
||||
<td>Function</td>
|
||||
<td>==Bot API 6.1+== A method that sets the button press event handler. An alias for <code>Telegram.WebApp.onEvent('backButtonClicked', callback)</code></td>
|
||||
<td><mark>Bot API 6.1+</mark> A method that sets the button press event handler. An alias for <code>Telegram.WebApp.onEvent('backButtonClicked', callback)</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>offClick(callback)</td>
|
||||
<td>Function</td>
|
||||
<td>==Bot API 6.1+== A method that removes the button press event handler. An alias for <code>Telegram.WebApp.offEvent('backButtonClicked', callback)</code></td>
|
||||
<td><mark>Bot API 6.1+</mark> A method that removes the button press event handler. An alias for <code>Telegram.WebApp.offEvent('backButtonClicked', callback)</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>show()</td>
|
||||
<td>Function</td>
|
||||
<td>==Bot API 6.1+== A method to make the button active and visible.</td>
|
||||
<td><mark>Bot API 6.1+</mark> A method to make the button active and visible.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>hide()</td>
|
||||
<td>Function</td>
|
||||
<td>==Bot API 6.1+== A method to hide the button.</td>
|
||||
<td><mark>Bot API 6.1+</mark> A method to hide the button.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<p>All these methods return the BackButton object so they can be chained.</p>
|
||||
<h4><a class="anchor" href="#mainbutton" id="mainbutton" name="mainbutton"><i class="anchor-icon"></i></a>MainButton</h4>
|
||||
<h4><a class="anchor" name="mainbutton" href="#mainbutton"><i class="anchor-icon"></i></a>MainButton</h4>
|
||||
<p>This object controls the main button, which is displayed at the bottom of the Web App in the Telegram interface.</p>
|
||||
<table class="table">
|
||||
<thead>
|
||||
|
|
@ -431,12 +436,12 @@
|
|||
<tr>
|
||||
<td>onClick(callback)</td>
|
||||
<td>Function</td>
|
||||
<td>A method that sets the button press event handler. An alias for <code>Telegram.WebApp.onEvent('mainButtonClicked', callback)</code></td>
|
||||
<td>A method that sets the button press event handler. An alias for <code>Telegram.WebApp.onEvent('mainButtonClicked', callback)</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>offClick(callback) ^==NEW==^</td>
|
||||
<td>offClick(callback) <sup><mark>NEW</mark></sup></td>
|
||||
<td>Function</td>
|
||||
<td>A method that removes the button press event handler. An alias for <code>Telegram.WebApp.offEvent('mainButtonClicked', callback)</code></td>
|
||||
<td>A method that removes the button press event handler. An alias for <code>Telegram.WebApp.offEvent('mainButtonClicked', callback)</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>show()</td>
|
||||
|
|
@ -476,8 +481,8 @@
|
|||
</tbody>
|
||||
</table>
|
||||
<p>All these methods return the MainButton object so they can be chained.</p>
|
||||
<h4><a class="anchor" href="#hapticfeedback" id="hapticfeedback" name="hapticfeedback"><i class="anchor-icon"></i></a>HapticFeedback</h4>
|
||||
<p>^==NEW==^ This object controls haptic feedback.</p>
|
||||
<h4><a class="anchor" name="hapticfeedback" href="#hapticfeedback"><i class="anchor-icon"></i></a>HapticFeedback</h4>
|
||||
<p><sup><mark>NEW</mark></sup> This object controls haptic feedback.</p>
|
||||
<table class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
|
|
@ -490,22 +495,22 @@
|
|||
<tr>
|
||||
<td>impactOccurred(style)</td>
|
||||
<td>Function</td>
|
||||
<td>==Bot API 6.1+== A method tells that an impact occurred. The Telegram app may play the appropriate haptics based on style value passed. Style can be one of these values: <br>- <em>light</em>, indicates a collision between small or lightweight UI objects, <br>- <em>medium</em>, indicates a collision between medium-sized or medium-weight UI objects, <br>- <em>heavy</em>, indicates a collision between large or heavyweight UI objects, <br>- <em>rigid</em>, indicates a collision between hard or inflexible UI objects, <br>- <em>soft</em>, indicates a collision between soft or flexible UI objects.</td>
|
||||
<td><mark>Bot API 6.1+</mark> A method tells that an impact occurred. The Telegram app may play the appropriate haptics based on style value passed. Style can be one of these values:<br>- <em>light</em>, indicates a collision between small or lightweight UI objects,<br>- <em>medium</em>, indicates a collision between medium-sized or medium-weight UI objects,<br>- <em>heavy</em>, indicates a collision between large or heavyweight UI objects,<br>- <em>rigid</em>, indicates a collision between hard or inflexible UI objects,<br>- <em>soft</em>, indicates a collision between soft or flexible UI objects.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>notificationOccurred(type)</td>
|
||||
<td>Function</td>
|
||||
<td>==Bot API 6.1+== A method tells that a task or action has succeeded, failed, or produced a warning. The Telegram app may play the appropriate haptics based on type value passed. Type can be one of these values: <br>- <em>error</em>, indicates that a task or action has failed, <br>- <em>success</em>, indicates that a task or action has completed successfully, <br>- <em>warning</em>, indicates that a task or action produced a warning.</td>
|
||||
<td><mark>Bot API 6.1+</mark> A method tells that a task or action has succeeded, failed, or produced a warning. The Telegram app may play the appropriate haptics based on type value passed. Type can be one of these values:<br>- <em>error</em>, indicates that a task or action has failed,<br>- <em>success</em>, indicates that a task or action has completed successfully,<br>- <em>warning</em>, indicates that a task or action produced a warning.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>selectionChanged()</td>
|
||||
<td>Function</td>
|
||||
<td>==Bot API 6.1+== A method tells that the user has changed a selection. The Telegram app may play the appropriate haptics. <br><br><em>Do not use this feedback when the user makes or confirms a selection; use it only when the selection changes.</em></td>
|
||||
<td><mark>Bot API 6.1+</mark> A method tells that the user has changed a selection. The Telegram app may play the appropriate haptics.<br><br><em>Do not use this feedback when the user makes or confirms a selection; use it only when the selection changes.</em></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<p>All these methods return the HapticFeedback object so they can be chained.</p>
|
||||
<h4><a class="anchor" href="#webappinitdata" id="webappinitdata" name="webappinitdata"><i class="anchor-icon"></i></a>WebAppInitData</h4>
|
||||
<h4><a class="anchor" name="webappinitdata" href="#webappinitdata"><i class="anchor-icon"></i></a>WebAppInitData</h4>
|
||||
<p>This object contains data that is transferred to the Web App when it is opened. It is empty if the Web App was launched from a <a href="#keyboard-button-web-apps">keyboard button</a>.</p>
|
||||
<table class="table">
|
||||
<thead>
|
||||
|
|
@ -532,7 +537,7 @@
|
|||
<td><em>Optional.</em> An object containing data about the chat partner of the current user in the chat where the bot was launched via the attachment menu. Returned only for private chats and only for Web Apps launched via the attachment menu.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>chat ^==NEW==^</td>
|
||||
<td>chat <sup><mark>NEW</mark></sup></td>
|
||||
<td><a href="#webappchat">WebAppChat</a></td>
|
||||
<td><em>Optional.</em> An object containing data about the chat where the bot was launched via the attachment menu. Returned for supergroups, channels and group chats – only for Web Apps launched via the attachment menu.</td>
|
||||
</tr>
|
||||
|
|
@ -542,7 +547,7 @@
|
|||
<td><em>Optional.</em> The value of the <em>startattach</em> parameter, passed <a href="#adding-bots-to-the-attachment-menu">via link</a>. Only returned for Web Apps when launched from the attachment menu via link.<br><br>The value of the <code>start_param</code> parameter will also be passed in the GET-parameter <code>tgWebAppStartParam</code>, so the Web App can load the correct interface right away.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>can_send_after ^==NEW==^</td>
|
||||
<td>can_send_after <sup><mark>NEW</mark></sup></td>
|
||||
<td>Integer</td>
|
||||
<td><em>Optional.</em> Time in seconds, after which a message can be sent via the <a href="/bots/api#answerwebappquery">answerWebAppQuery</a> method.</td>
|
||||
</tr>
|
||||
|
|
@ -558,7 +563,7 @@
|
|||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<h4><a class="anchor" href="#webappuser" id="webappuser" name="webappuser"><i class="anchor-icon"></i></a>WebAppUser</h4>
|
||||
<h4><a class="anchor" name="webappuser" href="#webappuser"><i class="anchor-icon"></i></a>WebAppUser</h4>
|
||||
<p>This object contains the data of the Web App user.</p>
|
||||
<table class="table">
|
||||
<thead>
|
||||
|
|
@ -597,7 +602,7 @@
|
|||
<tr>
|
||||
<td>language_code</td>
|
||||
<td>String</td>
|
||||
<td><em>Optional</em>. <a href="https://en.wikipedia.org/wiki/IETF_language_tag">IETF language tag</a> of the user's language. Returns in <em>user</em> field only.</td>
|
||||
<td><em>Optional</em>. <a href="https://en.wikipedia.org/wiki/IETF_language_tag">IETF language tag</a> of the user's language. Returns in <em>user</em> field only.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>photo_url</td>
|
||||
|
|
@ -606,8 +611,8 @@
|
|||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<h4><a class="anchor" href="#webappchat" id="webappchat" name="webappchat"><i class="anchor-icon"></i></a>WebAppChat</h4>
|
||||
<p>^==NEW==^ This object represents a chat.</p>
|
||||
<h4><a class="anchor" name="webappchat" href="#webappchat"><i class="anchor-icon"></i></a>WebAppChat</h4>
|
||||
<p><sup><mark>NEW</mark></sup> This object represents a chat.</p>
|
||||
<table class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
|
|
@ -625,7 +630,7 @@
|
|||
<tr>
|
||||
<td>type</td>
|
||||
<td>String</td>
|
||||
<td>Type of chat, can be either "group", "supergroup" or "channel"</td>
|
||||
<td>Type of chat, can be either “group”, “supergroup” or “channel”</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>title</td>
|
||||
|
|
@ -644,19 +649,19 @@
|
|||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<h4><a class="anchor" href="#validating-data-received-via-the-web-app" id="validating-data-received-via-the-web-app" name="validating-data-received-via-the-web-app"><i class="anchor-icon"></i></a>Validating data received via the Web App</h4>
|
||||
<p>To validate data received via the Web App, one should send the data from the <em>Telegram.WebApp.initData</em> field to the bot's backend. The data is a query string, which is composed of a series of field-value pairs.</p>
|
||||
<p>You can verify the integrity of the data received by comparing the received <em>hash</em> parameter with the hexadecimal representation of the <a href="https://en.wikipedia.org/wiki/Hash-based_message_authentication_code">HMAC-SHA-256</a> signature of the <strong>data-check-string</strong> with the secret key, which is the <a href="https://en.wikipedia.org/wiki/Hash-based_message_authentication_code">HMAC-SHA-256</a> signature of the <a href="/bots#creating-a-new-bot">bot's token</a> with the constant string <code>WebAppData</code> used as a key.</p>
|
||||
<p><strong>Data-check-string</strong> is a chain of all received fields, sorted alphabetically, in the format <code>key=<value></code> with a <a href="https://en.wikipedia.org/wiki/Newline">line feed</a> character ('\n', 0x0A) used as separator – e.g., <code>'auth_date=<auth_date>\nquery_id=<query_id>\nuser=<user>'</code>.</p>
|
||||
<h4><a class="anchor" name="validating-data-received-via-the-web-app" href="#validating-data-received-via-the-web-app"><i class="anchor-icon"></i></a>Validating data received via the Web App</h4>
|
||||
<p>To validate data received via the Web App, one should send the data from the <em>Telegram.WebApp.initData</em> field to the bot's backend. The data is a query string, which is composed of a series of field-value pairs.</p>
|
||||
<p>You can verify the integrity of the data received by comparing the received <em>hash</em> parameter with the hexadecimal representation of the <a href="https://en.wikipedia.org/wiki/Hash-based_message_authentication_code">HMAC-SHA-256</a> signature of the <strong>data-check-string</strong> with the secret key, which is the <a href="https://en.wikipedia.org/wiki/Hash-based_message_authentication_code">HMAC-SHA-256</a> signature of the <a href="/bots#creating-a-new-bot">bot's token</a> with the constant string <code>WebAppData</code> used as a key.</p>
|
||||
<p><strong>Data-check-string</strong> is a chain of all received fields, sorted alphabetically, in the format <code>key=<value></code> with a <a href="https://en.wikipedia.org/wiki/Newline">line feed</a> character ('\n', 0x0A) used as separator – e.g., <code>'auth_date=<auth_date>\nquery_id=<query_id>\nuser=<user>'</code>.</p>
|
||||
<p>The full check might look like:</p>
|
||||
<pre><code>data_check_string = ...
|
||||
<a href='/constructor/secret_key'>secret_key</a> = <a href='/type/HMAC_SHA256%28%3Cbot_token%26gt'>HMAC_SHA256(<bot_token></a>;, "WebAppData")
|
||||
secret_key = HMAC_SHA256(<bot_token>, "WebAppData")
|
||||
if (hex(HMAC_SHA256(data_check_string, secret_key)) == hash) {
|
||||
// data is from Telegram
|
||||
}</code></pre>
|
||||
<p>To prevent the use of outdated data, you can additionally check the <em>auth_date</em> field, which contains a Unix timestamp of when it was received by the Web App.</p>
|
||||
<p>Once validated, the data may be used on your server. Complex data types are represented as JSON-serialized objects.</p>
|
||||
<h4><a class="anchor" href="#events-available-for-web-apps" id="events-available-for-web-apps" name="events-available-for-web-apps"><i class="anchor-icon"></i></a>Events Available for Web Apps</h4>
|
||||
<h4><a class="anchor" name="events-available-for-web-apps" href="#events-available-for-web-apps"><i class="anchor-icon"></i></a>Events Available for Web Apps</h4>
|
||||
<p>The Web App can receive events from the Telegram app, onto which a handler can be attached using the <code>Telegram.WebApp.onEvent(eventType, eventHandler)</code> method. Inside <code>eventHandler</code> the <em>this</em> object refers to <em>Telegram.WebApp</em>, the set of parameters sent to the handler depends on the event type. Below is a list of possible events:</p>
|
||||
<table class="table">
|
||||
<thead>
|
||||
|
|
@ -668,7 +673,7 @@ if (hex(HMAC_SHA256(data_check_string, secret_key)) == hash) {
|
|||
<tbody>
|
||||
<tr>
|
||||
<td><code>themeChanged</code></td>
|
||||
<td>Occurs whenever theme settings are changed in the user's Telegram app (including switching to night mode). <br><em>eventHandler</em> receives no parameters, new theme settings and color scheme can be received via <em>this.themeParams</em> and <em>this.colorScheme</em> respectively.</td>
|
||||
<td>Occurs whenever theme settings are changed in the user's Telegram app (including switching to night mode).<br><em>eventHandler</em> receives no parameters, new theme settings and color scheme can be received via <em>this.themeParams</em> and <em>this.colorScheme</em> respectively.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>viewportChanged</code></td>
|
||||
|
|
@ -679,41 +684,35 @@ if (hex(HMAC_SHA256(data_check_string, secret_key)) == hash) {
|
|||
<td>Occurs when the <a href="#mainbutton">main button</a> is pressed.<br><em>eventHandler</em> receives no parameters.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>backButtonClicked</code> ^==NEW==^</td>
|
||||
<td>==Bot API 6.1+== Occurrs when the <a href="#backbutton">back button</a> is pressed. <br><em>eventHandler</em> receives no parameters.</td>
|
||||
<td><code>backButtonClicked</code> <sup><mark>NEW</mark></sup></td>
|
||||
<td><mark>Bot API 6.1+</mark> Occurrs when the <a href="#backbutton">back button</a> is pressed.<br><em>eventHandler</em> receives no parameters.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>settingsButtonClicked</code> ^==NEW==^</td>
|
||||
<td>==Bot API 6.1+== Occurrs when the Settings item in context menu is pressed. <br><em>eventHandler</em> receives no parameters.</td>
|
||||
<td><code>settingsButtonClicked</code> <sup><mark>NEW</mark></sup></td>
|
||||
<td><mark>Bot API 6.1+</mark> Occurrs when the Settings item in context menu is pressed.<br><em>eventHandler</em> receives no parameters.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>invoiceClosed</code> ^==NEW==^</td>
|
||||
<td>==Bot API 6.1+== Occurrs when the opened invoice is closed. <br><em>eventHandler</em> receives an object with the two fields: <em>url</em> – invoice link provided and <em>status</em> – one of the invoice statuses: <br>- <strong>paid</strong> – invoice was paid successfully, <br>- <strong>cancelled</strong> – user closed this invoice without paying, <br>- <strong>failed</strong> – user tried to pay, but the payment was failed, <br>- <strong>pending</strong> – the payment is still processing. The bot will receive a service message about a <a href="https://core.telegram.org/bots/api#successfulpayment">successful payment</a> when the payment is successfully paid.</td>
|
||||
<td><code>invoiceClosed</code> <sup><mark>NEW</mark></sup></td>
|
||||
<td><mark>Bot API 6.1+</mark> Occurrs when the opened invoice is closed.<br><em>eventHandler</em> receives an object with the two fields: <em>url</em> – invoice link provided and <em>status</em> – one of the invoice statuses:<br>- <strong>paid</strong> – invoice was paid successfully,<br>- <strong>cancelled</strong> – user closed this invoice without paying,<br>- <strong>failed</strong> – user tried to pay, but the payment was failed,<br>- <strong>pending</strong> – the payment is still processing. The bot will receive a service message about a <a href="https://core.telegram.org/bots/api#successfulpayment">successful payment</a> when the payment is successfully paid.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<h4><a class="anchor" href="#adding-bots-to-the-attachment-menu" id="adding-bots-to-the-attachment-menu" name="adding-bots-to-the-attachment-menu"><i class="anchor-icon"></i></a>Adding Bots to the Attachment Menu</h4>
|
||||
<p>Attachment menu integration is currently only available for major advertisers on the <a href="https://promote.telegram.org/basics">Telegram Ad Platform</a>. However, <strong>all bots</strong> can use it in the <a href="#using-bots-in-the-test-environment">test server environment</a>. Talk to Botfather on the test server to <a href="#using-bots-in-the-test-environment">set up the integration</a>.</p>
|
||||
<h4><a class="anchor" name="adding-bots-to-the-attachment-menu" href="#adding-bots-to-the-attachment-menu"><i class="anchor-icon"></i></a>Adding Bots to the Attachment Menu</h4>
|
||||
<p>Attachment menu integration is currently only available for major advertisers on the <a href="https://promote.telegram.org/basics">Telegram Ad Platform</a>. However, <strong>all bots</strong> can use it in the <a href="#using-bots-in-the-test-environment">test server environment</a>. Talk to Botfather on the test server to <a href="#using-bots-in-the-test-environment">set up the integration</a>.</p>
|
||||
<p>A special link is used to add bots to the attachment menu:</p>
|
||||
<p><code>https://t.me/botusername?startattach</code>
|
||||
or
|
||||
<code>https://t.me/botusername?startattach=command</code></p>
|
||||
<p><code>https://t.me/botusername?startattach</code><br>or<br><code>https://t.me/botusername?startattach=command</code></p>
|
||||
<blockquote>
|
||||
<p>For example, open this <a href="https://t.me/durgerkingbot?startattach">attachment menu link</a> for <em>@DurgerKingBot</em>, then use the <img src="/file/464001085/2/E4hNXSNQimQ.2503/bf6ffcab3cb3afd43d" alt="Attach"> menu in any <strong>private chat</strong>.</p>
|
||||
<p>For example, open this <a href="https://t.me/durgerkingbot?startattach">attachment menu link</a> for <em>@DurgerKingBot</em>, then use the <img class="icon" src="/file/464001085/2/E4hNXSNQimQ.2503/bf6ffcab3cb3afd43d" alt="Attach"> menu in any <strong>private chat</strong>.</p>
|
||||
</blockquote>
|
||||
<p>Opening the link prompts the user to add the bot to their attachment menu. If the bot has already been added, the attachment menu will open in the current chat and redirect to the bot there (if the link is opened from a 1-on-1 chat). If a non-empty <em>startattach</em> parameter was included in the link, it will be passed to the Web App in the <em>start_param</em> field and in the GET parameter <em>tgWebAppStartParam</em>.</p>
|
||||
<p>The following link formats are also supported:</p>
|
||||
<p><code>https://t.me/username?attach=botusername</code>
|
||||
<code>https://t.me/username?attach=botusername&startattach=command</code>
|
||||
<code>https://t.me/+1234567890?attach=botusername</code>
|
||||
<code>https://t.me/+1234567890?attach=botusername&startattach=command</code></p>
|
||||
<p>These links open the Web App in the attachment menu in the chat with a specific user. If the bot wasn't already added to the attachment menu, the user will be prompted to do so. If a non-empty <em>startattach</em> parameter was included in the link, it will be passed to the Web App in the <em>start_param</em> field and in the GET parameter <em>tgWebAppStartParam</em>.</p>
|
||||
<p>==Bot API 6.1+== supports a new link format:</p>
|
||||
<p><code>https://t.me/botusername?startattach&choose=users+bots</code>
|
||||
<code>https://t.me/botusername?startattach=command&choose=groups+channels</code></p>
|
||||
<p>Opening such a link prompts the user to choose a specific chat and opens the attachment menu in that chat. If the bot wasn't already added to the attachment menu, the user will be prompted to do so. You can specify which types of chats the user will be able to choose from. It can be one or more of the following types: <em>users</em>, <em>bots</em>, <em>groups</em>, <em>channels</em> separated by a <code>+</code> sign. If a non-empty <em>startattach</em> parameter was included in the link, it will be passed to the Web App in the <em>start_param</em> field and in the GET parameter <em>tgWebAppStartParam</em>.</p>
|
||||
<h3><a class="anchor" href="#testing-web-apps" id="testing-web-apps" name="testing-web-apps"><i class="anchor-icon"></i></a>Testing Web Apps</h3>
|
||||
<h4><a class="anchor" href="#using-bots-in-the-test-environment" id="using-bots-in-the-test-environment" name="using-bots-in-the-test-environment"><i class="anchor-icon"></i></a>Using bots in the test environment</h4>
|
||||
<p><code>https://t.me/username?attach=botusername</code><br><code>https://t.me/username?attach=botusername&startattach=command</code><br><code>https://t.me/+1234567890?attach=botusername</code><br><code>https://t.me/+1234567890?attach=botusername&startattach=command</code></p>
|
||||
<p>These links open the Web App in the attachment menu in the chat with a specific user. If the bot wasn't already added to the attachment menu, the user will be prompted to do so. If a non-empty <em>startattach</em> parameter was included in the link, it will be passed to the Web App in the <em>start_param</em> field and in the GET parameter <em>tgWebAppStartParam</em>.</p>
|
||||
<p><mark>Bot API 6.1+</mark> supports a new link format:</p>
|
||||
<p><code>https://t.me/botusername?startattach&choose=users+bots</code><br><code>https://t.me/botusername?startattach=command&choose=groups+channels</code></p>
|
||||
<p>Opening such a link prompts the user to choose a specific chat and opens the attachment menu in that chat. If the bot wasn't already added to the attachment menu, the user will be prompted to do so. You can specify which types of chats the user will be able to choose from. It can be one or more of the following types: <em>users</em>, <em>bots</em>, <em>groups</em>, <em>channels</em> separated by a <code>+</code> sign. If a non-empty <em>startattach</em> parameter was included in the link, it will be passed to the Web App in the <em>start_param</em> field and in the GET parameter <em>tgWebAppStartParam</em>.</p>
|
||||
<h3><a class="anchor" name="testing-web-apps" href="#testing-web-apps"><i class="anchor-icon"></i></a>Testing Web Apps</h3>
|
||||
<h4><a class="anchor" name="using-bots-in-the-test-environment" href="#using-bots-in-the-test-environment"><i class="anchor-icon"></i></a>Using bots in the test environment</h4>
|
||||
<p>To log in to the test environment, use either of the following:</p>
|
||||
<ul>
|
||||
<li><strong>iOS:</strong> tap 10 times on the Settings icon > Accounts > Login to another account > Test.</li>
|
||||
|
|
@ -726,7 +725,7 @@ or
|
|||
<blockquote>
|
||||
<p><strong>Note:</strong> When working with the test environment, you may use HTTP links without TLS to test your Web App.</p>
|
||||
</blockquote>
|
||||
<h4><a class="anchor" href="#debug-mode-for-web-apps" id="debug-mode-for-web-apps" name="debug-mode-for-web-apps"><i class="anchor-icon"></i></a>Debug Mode for Web Apps</h4>
|
||||
<h4><a class="anchor" name="debug-mode-for-web-apps" href="#debug-mode-for-web-apps"><i class="anchor-icon"></i></a>Debug Mode for Web Apps</h4>
|
||||
<p>Use these tools to find app-specific issues in your Web App:</p>
|
||||
<p><strong>Android</strong></p>
|
||||
<ul>
|
||||
|
|
@ -744,9 +743,10 @@ or
|
|||
<p><strong>Telegram macOS</strong></p>
|
||||
<ul>
|
||||
<li>Download and launch the <a href="https://telegram.org/dl/macos/beta">Beta Version</a> of Telegram macOS.</li>
|
||||
<li>Quickly click 5 times on the Settings icon to open the debug menu and enable "Debug Web Apps".</li>
|
||||
<li>Quickly click 5 times on the Settings icon to open the debug menu and enable “Debug Web Apps”.</li>
|
||||
<li>Right click in the web app and choose <em>Inspect Element</em>.</li>
|
||||
</ul></div>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue