Update content of files

This commit is contained in:
GitHub Action 2024-08-01 18:40:00 +00:00
parent 7b1846f277
commit de3960fa5a
3 changed files with 182 additions and 183 deletions

View file

@ -693,7 +693,7 @@ A full list of these parameters can be seen in the <a href="#client-configuratio
<li><code>"PREMIUM_ANNUAL"</code> - Suggests the user to subscribe to Telegram Premium (with annual payments)</li> <li><code>"PREMIUM_ANNUAL"</code> - Suggests the user to subscribe to Telegram Premium (with annual payments)</li>
<li><code>"PREMIUM_UPGRADE"</code> - Suggests the user to upgrade their existing Premium subscription from monthly payments to annual payments</li> <li><code>"PREMIUM_UPGRADE"</code> - Suggests the user to upgrade their existing Premium subscription from monthly payments to annual payments</li>
<li><code>"PREMIUM_RESTORE"</code> - Suggests the user to restore a recently expired Premium subscription</li> <li><code>"PREMIUM_RESTORE"</code> - Suggests the user to restore a recently expired Premium subscription</li>
<li><code>"PREMIUM_CHRISTMAS"</code> - Suggests the user to <a href="/api/premium#gifting-telegram-premium">gift Telegram Premium</a> subscription to friends for Christmas.</li> <li><code>"PREMIUM_CHRISTMAS"</code> - Suggests the user to <a href="/api/premium#gifting-telegram-premium">gift Telegram Premium</a> subscriptions to friends for Christmas.</li>
<li><code>"PREMIUM_GRACE"</code> - Suggests the user to extend their expiring Telegram Premium subscription</li> <li><code>"PREMIUM_GRACE"</code> - Suggests the user to extend their expiring Telegram Premium subscription</li>
<li><code>"BIRTHDAY_SETUP"</code> - Suggests the user to set a <a href="/api/profile#birthday">birthday »</a>.</li> <li><code>"BIRTHDAY_SETUP"</code> - Suggests the user to set a <a href="/api/profile#birthday">birthday »</a>.</li>
</ul> </ul>

View file

@ -71,7 +71,7 @@
</ul> </ul>
<p>The following new <a href="/api/config#suggestions">suggestions »</a> were added:</p> <p>The following new <a href="/api/config#suggestions">suggestions »</a> were added:</p>
<ul> <ul>
<li><code>"PREMIUM_CHRISTMAS"</code> - Suggests the user to <a href="/api/premium#gifting-telegram-premium">gift Telegram Premium</a> subscription to friends for Christmas.</li> <li><code>"PREMIUM_CHRISTMAS"</code> - Suggests the user to <a href="/api/premium#gifting-telegram-premium">gift Telegram Premium</a> subscriptions to friends for Christmas.</li>
<li><code>"PREMIUM_GRACE"</code> - Suggests the user to extend their expiring Telegram Premium subscription</li> <li><code>"PREMIUM_GRACE"</code> - Suggests the user to extend their expiring Telegram Premium subscription</li>
</ul> </ul>
<p>This layer introduces <a href="/api/factcheck">fact-checks »</a>, <a href="/api/stars">Telegram Stars</a> and <a href="/constructor/messageEntityBlockquote">collapsible message quotes »</a>.</p> <p>This layer introduces <a href="/api/factcheck">fact-checks »</a>, <a href="/api/stars">Telegram Stars</a> and <a href="/constructor/messageEntityBlockquote">collapsible message quotes »</a>.</p>

View file

@ -49,26 +49,27 @@
<div class="blog_video_player_wrap" style="max-width: 600px; margin: 20px auto 20px;"> <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"> <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 src="/file/464001679/11aa9/KQx_BlPVXRo.4922145.mp4/c65433c8ac11a347a8" type="video/mp4">
</source></video> </video>
</div> </div>
<blockquote> <blockquote>
<p>To see a <strong>Mini App</strong> in action, try our sample <a href="https://t.me/durgerkingbot">@DurgerKingBot</a>.</p> <p>To see a <strong>Mini App</strong> in action, try our sample <a href="https://t.me/durgerkingbot">@DurgerKingBot</a>.</p>
</blockquote> </blockquote>
<hr> <hr>
<h3><a class="anchor" href="#recent-changes" id="recent-changes" name="recent-changes"><i class="anchor-icon"></i></a>Recent changes</h3> <h3><a class="anchor" name="recent-changes" href="#recent-changes"><i class="anchor-icon"></i></a>Recent changes</h3>
<h4><a class="anchor" href="#march-31-2024" id="march-31-2024" name="march-31-2024"><i class="anchor-icon"></i></a>March 31, 2024</h4> <h4><a class="anchor" name="march-31-2024" href="#march-31-2024"><i class="anchor-icon"></i></a>March 31, 2024</h4>
<p><strong>Bot API 7.2</strong></p> <p><strong>Bot API 7.2</strong></p>
<ul> <ul>
<li>Added the field <em>BiometricManager</em> to the class <a href="#initializing-mini-apps">WebApp</a>.</li> <li>Added the field <em>BiometricManager</em> to the class <a href="#initializing-mini-apps">WebApp</a>.</li>
</ul> </ul>
<h4><a class="anchor" href="#december-29-2023" id="december-29-2023" name="december-29-2023"><i class="anchor-icon"></i></a>December 29, 2023</h4> <h4><a class="anchor" name="december-29-2023" href="#december-29-2023"><i class="anchor-icon"></i></a>December 29, 2023</h4>
<p><strong>Bot API 7.0</strong></p> <p><strong>Bot API 7.0</strong></p>
<ul> <ul>
<li>Added the field <em>SettingsButton</em> to the class <a href="#initializing-mini-apps">WebApp</a>.</li> <li>Added the field <em>SettingsButton</em> to the class <a href="#initializing-mini-apps">WebApp</a>.</li>
<li>Added the fields <em>header_bg_color</em>, <em>accent_text_color</em>, <em>section_bg_color</em>, <em>section_header_text_color</em>, <em>subtitle_text_color</em>, <em>destructive_text_color</em> to the class <a href="#themeparams">ThemeParams</a>.</li> <li>Added the fields <em>header_bg_color</em>, <em>accent_text_color</em>, <em>section_bg_color</em>, <em>section_header_text_color</em>, <em>subtitle_text_color</em>, <em>destructive_text_color</em> to the class <a href="#themeparams">ThemeParams</a>.</li>
<li>Mini Apps no longer close when the method <em>WebApp.openTelegramLink</em> is called.</li> <li>Mini Apps no longer close when the method <em>WebApp.openTelegramLink</em> is called.</li>
</ul> </ul>
<h4><a class="anchor" href="#september-22-2023" id="september-22-2023" name="september-22-2023"><i class="anchor-icon"></i></a>September 22, 2023</h4> <h4><a class="anchor" name="september-22-2023" href="#september-22-2023"><i class="anchor-icon"></i></a>September 22, 2023</h4>
<p><strong>Bot API 6.9</strong></p> <p><strong>Bot API 6.9</strong></p>
<ul> <ul>
<li>Added the field <em>CloudStorage</em> to the class <a href="#initializing-mini-apps">WebApp</a>.</li> <li>Added the field <em>CloudStorage</em> to the class <a href="#initializing-mini-apps">WebApp</a>.</li>
@ -77,26 +78,26 @@
<li>Added the events <em>writeAccessRequested</em> and <em>contactRequested</em>.</li> <li>Added the events <em>writeAccessRequested</em> and <em>contactRequested</em>.</li>
<li>Added the ability to set any header color using the <em>setHeaderColor</em> method.</li> <li>Added the ability to set any header color using the <em>setHeaderColor</em> method.</li>
</ul> </ul>
<h4><a class="anchor" href="#april-21-2023" id="april-21-2023" name="april-21-2023"><i class="anchor-icon"></i></a>April 21, 2023</h4> <h4><a class="anchor" name="april-21-2023" href="#april-21-2023"><i class="anchor-icon"></i></a>April 21, 2023</h4>
<p><strong>Bot API 6.7</strong></p> <p><strong>Bot API 6.7</strong></p>
<ul> <ul>
<li>Added support for launching Mini Apps from inline query results and from a direct link.</li> <li>Added support for launching Mini Apps from inline query results and from a direct link.</li>
<li>Added the method <em>switchInlineQuery</em> to the class <a href="#initializing-mini-apps">WebApp</a>.</li> <li>Added the method <em>switchInlineQuery</em> to the class <a href="#initializing-mini-apps">WebApp</a>.</li>
</ul> </ul>
<h4><a class="anchor" href="#december-30-2022" id="december-30-2022" name="december-30-2022"><i class="anchor-icon"></i></a>December 30, 2022</h4> <h4><a class="anchor" name="december-30-2022" href="#december-30-2022"><i class="anchor-icon"></i></a>December 30, 2022</h4>
<p><strong>Bot API 6.4</strong></p> <p><strong>Bot API 6.4</strong></p>
<ul> <ul>
<li>Added the field <em>platform</em>, the optional parameter <em>options</em> to the method <em>openLink</em> and the methods <em>showScanQrPopup</em>, <em>closeScanQrPopup</em>, <em>readTextFromClipboard</em> to the class <a href="#initializing-mini-apps">WebApp</a>.</li> <li>Added the field <em>platform</em>, the optional parameter <em>options</em> to the method <em>openLink</em> and the methods <em>showScanQrPopup</em>, <em>closeScanQrPopup</em>, <em>readTextFromClipboard</em> to the class <a href="#initializing-mini-apps">WebApp</a>.</li>
<li>Added the events <em>qrTextReceived</em>, <em>clipboardTextReceived</em>.</li> <li>Added the events <em>qrTextReceived</em>, <em>clipboardTextReceived</em>.</li>
</ul> </ul>
<h4><a class="anchor" href="#august-12-2022" id="august-12-2022" name="august-12-2022"><i class="anchor-icon"></i></a>August 12, 2022</h4> <h4><a class="anchor" name="august-12-2022" href="#august-12-2022"><i class="anchor-icon"></i></a>August 12, 2022</h4>
<p><strong>Bot API 6.2</strong></p> <p><strong>Bot API 6.2</strong></p>
<ul> <ul>
<li>Added the field <em>isClosingConfirmationEnabled</em> and the methods <em>enableClosingConfirmation</em>, <em>disableClosingConfirmation</em>, <em>showPopup</em>, <em>showAlert</em>, <em>showConfirm</em> to the class <a href="#initializing-mini-apps">WebApp</a>.</li> <li>Added the field <em>isClosingConfirmationEnabled</em> and the methods <em>enableClosingConfirmation</em>, <em>disableClosingConfirmation</em>, <em>showPopup</em>, <em>showAlert</em>, <em>showConfirm</em> to the class <a href="#initializing-mini-apps">WebApp</a>.</li>
<li>Added the field <em>is_premium</em> to the class <a href="#webappuser">WebAppUser</a>.</li> <li>Added the field <em>is_premium</em> to the class <a href="#webappuser">WebAppUser</a>.</li>
<li>Added the event <em>popupClosed</em>.</li> <li>Added the event <em>popupClosed</em>.</li>
</ul> </ul>
<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> <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> <p><strong>Bot API 6.1</strong></p>
<ul> <ul>
<li>Added the ability to use bots added to the attachment menu in group, supergroup and channel chats.</li> <li>Added the ability to use bots added to the attachment menu in group, supergroup and channel chats.</li>
@ -108,18 +109,19 @@
<li>Added the <a href="#events-available-for-mini-apps">events</a> <em>backButtonClicked</em>, <em>settingsButtonClicked</em>, <em>invoiceClosed</em>.</li> <li>Added the <a href="#events-available-for-mini-apps">events</a> <em>backButtonClicked</em>, <em>settingsButtonClicked</em>, <em>invoiceClosed</em>.</li>
</ul> </ul>
<hr> <hr>
<h3><a class="anchor" href="#designing-mini-apps" id="designing-mini-apps" name="designing-mini-apps"><i class="anchor-icon"></i></a>Designing Mini Apps</h3> <h3><a class="anchor" name="designing-mini-apps" href="#designing-mini-apps"><i class="anchor-icon"></i></a>Designing Mini Apps</h3>
<h4><a class="anchor" href="#color-schemes" id="color-schemes" name="color-schemes"><i class="anchor-icon"></i></a>Color Schemes</h4> <h4><a class="anchor" name="color-schemes" href="#color-schemes"><i class="anchor-icon"></i></a>Color Schemes</h4>
<p>Mini 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> <p>Mini Apps always receive data about the user&#39;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;"> <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"> <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 src="/file/464001257/12087/QNQUbIi864k.909800.mp4/8ea7adad7db407388e" type="video/mp4">
</source></video> </video>
</div> </div>
<blockquote> <blockquote>
<p><a href="#themeparams">Jump to technical information</a></p> <p><a href="#themeparams">Jump to technical information</a></p>
</blockquote> </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 Mini App should ideally reflect these principles.</p> <p>Telegram apps are known for being snappy, smooth and following a consistent cross-platform design. Your Mini App should ideally reflect these principles.</p>
<ul> <ul>
<li>All elements should be responsive and designed with a mobile-first approach.</li> <li>All elements should be responsive and designed with a mobile-first approach.</li>
@ -129,12 +131,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> <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> </ul>
<hr> <hr>
<h3><a class="anchor" href="#implementing-mini-apps" id="implementing-mini-apps" name="implementing-mini-apps"><i class="anchor-icon"></i></a>Implementing Mini Apps</h3> <h3><a class="anchor" name="implementing-mini-apps" href="#implementing-mini-apps"><i class="anchor-icon"></i></a>Implementing Mini Apps</h3>
<p>Telegram currently supports six different ways of launching Mini Apps: from a <a href="#keyboard-button-mini-apps">keyboard button</a>, from an <a href="#inline-button-mini-apps">inline button</a>, from the <a href="#launching-mini-apps-from-the-menu-button">bot menu button</a>, via <a href="#inline-mode-mini-apps">inline mode</a>, from a <a href="#direct-link-mini-apps">direct link</a>  and even from the <a href="#launching-mini-apps-from-the-attachment-menu">attachment menu</a>.</p> <p>Telegram currently supports six different ways of launching Mini Apps: from a <a href="#keyboard-button-mini-apps">keyboard button</a>, from an <a href="#inline-button-mini-apps">inline button</a>, from the <a href="#launching-mini-apps-from-the-menu-button">bot menu button</a>, via <a href="#inline-mode-mini-apps">inline mode</a>, from a <a href="#direct-link-mini-apps">direct link</a> and even from the <a href="#launching-mini-apps-from-the-attachment-menu">attachment menu</a>.</p>
<div> <div>
<a href="/file/464001388/10b1a/IYpn0wWfggw.1156850/fd9a32baa81dcecbe4" target="_blank"><img src="/file/464001388/10b1a/IYpn0wWfggw.1156850/fd9a32baa81dcecbe4" title="" alt="Types of buttons" class="dev_page_image"></a> <a href="/file/464001388/10b1a/IYpn0wWfggw.1156850/fd9a32baa81dcecbe4" target="_blank"><img src="/file/464001388/10b1a/IYpn0wWfggw.1156850/fd9a32baa81dcecbe4" title="" alt="Types of buttons" class="dev_page_image" /></a>
</div> </div>
<h4><a class="anchor" href="#keyboard-button-mini-apps" id="keyboard-button-mini-apps" name="keyboard-button-mini-apps"><i class="anchor-icon"></i></a>Keyboard Button Mini Apps</h4>
<h4><a class="anchor" name="keyboard-button-mini-apps" href="#keyboard-button-mini-apps"><i class="anchor-icon"></i></a>Keyboard Button Mini Apps</h4>
<blockquote> <blockquote>
<p><strong>TL;DR:</strong> Mini 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-mini-apps">Telegram.WebApp.sendData</a>. This makes it possible for the bot to produce a response without communicating with any external servers.</p> <p><strong>TL;DR:</strong> Mini 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-mini-apps">Telegram.WebApp.sendData</a>. This makes it possible for the bot to produce a response without communicating with any external servers.</p>
</blockquote> </blockquote>
@ -143,22 +146,22 @@
<p>To transmit data from the user back to the bot, the Mini App can call the <a href="#initializing-mini-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>To transmit data from the user back to the bot, the Mini App can call the <a href="#initializing-mini-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> <p><strong>Good for:</strong></p>
<ul> <ul>
<li><strong>Сustom 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>Сustom 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> <li><strong>Reusable components</strong> that do not depend on a particular bot.</li>
</ul> </ul>
<h4><a class="anchor" href="#inline-button-mini-apps" id="inline-button-mini-apps" name="inline-button-mini-apps"><i class="anchor-icon"></i></a>Inline Button Mini Apps</h4> <h4><a class="anchor" name="inline-button-mini-apps" href="#inline-button-mini-apps"><i class="anchor-icon"></i></a>Inline Button Mini Apps</h4>
<blockquote> <blockquote>
<p><strong>TL;DR:</strong> For more interactive Mini 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> <p><strong>TL;DR:</strong> For more interactive Mini 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> </blockquote>
<p>If receiving text data alone is insufficient or you need a more advanced and personalized interface, you can open a Mini App using a <strong>web_app</strong> type <a href="/bots/api#inlinekeyboardbutton">Inline KeyboardButton</a>.</p> <p>If receiving text data alone is insufficient or you need a more advanced and personalized interface, you can open a Mini App using a <strong>web_app</strong> type <a href="/bots/api#inlinekeyboardbutton">Inline KeyboardButton</a>.</p>
<p>From the button, a Mini 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 Mini App will open with the URL specified in the button. In addition to the user&#39;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 Mini App. After receiving the message, the bot can continue communicating with the user.</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 Mini App. After receiving the message, the bot can continue communicating with the user.</p>
<p><strong>Good for:</strong></p> <p><strong>Good for:</strong></p>
<ul> <ul>
<li>Fully-fledged web services and integrations of any kind.</li> <li>Fully-fledged web services and integrations of any kind.</li>
<li>The use cases are effectively <strong>unlimited</strong>.</li> <li>The use cases are effectively <strong>unlimited</strong>.</li>
</ul> </ul>
<h4><a class="anchor" href="#launching-mini-apps-from-the-menu-button" id="launching-mini-apps-from-the-menu-button" name="launching-mini-apps-from-the-menu-button"><i class="anchor-icon"></i></a>Launching Mini Apps from the Menu Button</h4> <h4><a class="anchor" name="launching-mini-apps-from-the-menu-button" href="#launching-mini-apps-from-the-menu-button"><i class="anchor-icon"></i></a>Launching Mini Apps from the Menu Button</h4>
<blockquote> <blockquote>
<p><strong>TL;DR:</strong> Mini 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-mini-apps">launching a mini app from an inline button</a>.</p> <p><strong>TL;DR:</strong> Mini 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-mini-apps">launching a mini app from an inline button</a>.</p>
</blockquote> </blockquote>
@ -167,60 +170,60 @@
<video class="blog_video_player tl_blog_vid_autoplay" onclick="videoTogglePlay(this)" autoplay loop controls muted poster="/file/464001829/12247/e6LoU12o4Ng.109921/1226afb8f18f8ea8c4 <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"> " style="max-width: 600px;" title="" alt="Menu Button">
<source src="/file/464001838/10fa2/WrJmkuIMan0.1217917.mp4/e25a5f31bc4e6493f7" type="video/mp4"> <source src="/file/464001838/10fa2/WrJmkuIMan0.1217917.mp4/e25a5f31bc4e6493f7" type="video/mp4">
</source></video> </video>
</div> </div>
<p>To configure the menu button, you must specify the text it should show and the Mini App URL. There are two ways to set these parameters:</p> <p>To configure the menu button, you must specify the text it should show and the Mini App URL. There are two ways to set these parameters:</p>
<ul> <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 &gt; Menu Button</em>).</li> <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 &gt; 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 Mini 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&#39;s language, or show links to different Mini Apps based on a user&#39;s settings in your bot.</li>
</ul> </ul>
<p>Apart from this, Mini Apps opened via the menu button work in the exact same way as when <a href="#inline-button-mini-apps">using inline buttons</a>.</p> <p>Apart from this, Mini Apps opened via the menu button work in the exact same way as when <a href="#inline-button-mini-apps">using inline buttons</a>.</p>
<blockquote> <blockquote>
<p><a href="https://t.me/durgerkingbot">@DurgerKingBot</a> allows launching its Mini App both from an inline button and from the menu button.</p> <p><a href="https://t.me/durgerkingbot">@DurgerKingBot</a> allows launching its Mini App both from an inline button and from the menu button.</p>
</blockquote> </blockquote>
<h4><a class="anchor" href="#inline-mode-mini-apps" id="inline-mode-mini-apps" name="inline-mode-mini-apps"><i class="anchor-icon"></i></a>Inline Mode Mini Apps</h4> <h4><a class="anchor" name="inline-mode-mini-apps" href="#inline-mode-mini-apps"><i class="anchor-icon"></i></a>Inline Mode Mini Apps</h4>
<blockquote> <blockquote>
<p><strong>TL;DR:</strong> Mini Apps launched via <strong>web_app</strong> type <a href="/bots/api#inlinequeryresultsbutton">InlineQueryResultsButton</a> can be used anywhere in inline mode. Users can create content in a web interface and then seamlessly send it to the current chat via inline mode.</p> <p><strong>TL;DR:</strong> Mini Apps launched via <strong>web_app</strong> type <a href="/bots/api#inlinequeryresultsbutton">InlineQueryResultsButton</a> can be used anywhere in inline mode. Users can create content in a web interface and then seamlessly send it to the current chat via inline mode.</p>
</blockquote> </blockquote>
<p>You can use the <em>button</em> parameter in the <a href="/bots/api#answerinlinequery">answerInlineQuery</a> method to display a special 'Switch to Mini App' button either above or in place of the inline results. This button will <strong>open a Mini App</strong> from the specified URL. Once done, you can call the <a href="#initializing-mini-apps">Telegram.WebApp.switchInlineQuery</a> method to send the user back to inline mode.</p> <p>You can use the <em>button</em> parameter in the <a href="/bots/api#answerinlinequery">answerInlineQuery</a> method to display a special &#39;Switch to Mini App&#39; button either above or in place of the inline results. This button will <strong>open a Mini App</strong> from the specified URL. Once done, you can call the <a href="#initializing-mini-apps">Telegram.WebApp.switchInlineQuery</a> method to send the user back to inline mode.</p>
<p>Inline Mini Apps have <strong>no access</strong> to the chat they can't read messages or send new ones on behalf of the user. To send messages, the user must be redirected to <strong>inline mode</strong> and actively pick a result.</p> <p>Inline Mini Apps have <strong>no access</strong> to the chat they can&#39;t read messages or send new ones on behalf of the user. To send messages, the user must be redirected to <strong>inline mode</strong> and actively pick a result.</p>
<p><strong>Good for:</strong></p> <p><strong>Good for:</strong></p>
<ul> <ul>
<li>Fully-fledged web services and integrations in inline mode.</li> <li>Fully-fledged web services and integrations in inline mode.</li>
</ul> </ul>
<h4><a class="anchor" href="#direct-link-mini-apps" id="direct-link-mini-apps" name="direct-link-mini-apps"><i class="anchor-icon"></i></a>Direct Link Mini Apps</h4> <h4><a class="anchor" name="direct-link-mini-apps" href="#direct-link-mini-apps"><i class="anchor-icon"></i></a>Direct Link Mini Apps</h4>
<blockquote> <blockquote>
<p><strong>TL;DR:</strong> Mini App Bots can be launched from a direct link in any chat. They support a <em>startapp</em> parameter and are aware of the current chat context.</p> <p><strong>TL;DR:</strong> Mini App Bots can be launched from a direct link in any chat. They support a <em>startapp</em> parameter and are aware of the current chat context.</p>
</blockquote> </blockquote>
<p>You can use direct links to <strong>open a Mini App</strong> directly in the current chat. If a non-empty <em>startapp</em> parameter is included in the link, it will be passed to the Mini App in the <em>start_param</em> field and in the GET parameter <em>tgWebAppStartParam</em>.</p> <p>You can use direct links to <strong>open a Mini App</strong> directly in the current chat. If a non-empty <em>startapp</em> parameter is included in the link, it will be passed to the Mini App in the <em>start_param</em> field and in the GET parameter <em>tgWebAppStartParam</em>.</p>
<p>In this mode, Mini Apps can use the <em>chat_type</em> and <em>chat_instance</em> parameters to keep track of the current chat context. This introduces support for <strong>concurrent</strong> and <strong>shared</strong> usage by multiple chat members to create live whiteboards, group orders, multiplayer games and similar apps.</p> <p>In this mode, Mini Apps can use the <em>chat_type</em> and <em>chat_instance</em> parameters to keep track of the current chat context. This introduces support for <strong>concurrent</strong> and <strong>shared</strong> usage by multiple chat members to create live whiteboards, group orders, multiplayer games and similar apps.</p>
<p>Mini Apps opened from a direct link have <strong>no access</strong> to the chat they can't read messages or send new ones on behalf of the user. To send messages, the user must be redirected to <strong>inline mode</strong> and actively pick a result.</p> <p>Mini Apps opened from a direct link have <strong>no access</strong> to the chat they can&#39;t read messages or send new ones on behalf of the user. To send messages, the user must be redirected to <strong>inline mode</strong> and actively pick a result.</p>
<p><strong>Examples</strong></p> <p><strong>Examples</strong></p>
<p><code>https://t.me/botusername/appname</code> <p><code>https://t.me/botusername/appname</code><br><code>https://t.me/botusername/appname?startapp=command</code></p>
<code>https://t.me/botusername/appname?startapp=command</code></p>
<p><strong>Good for:</strong></p> <p><strong>Good for:</strong></p>
<ul> <ul>
<li>Fully-fledged web services and integrations that any user can open in one tap.</li> <li>Fully-fledged web services and integrations that any user can open in one tap.</li>
<li>Cooperative, multiplayer or teamwork-oriented services within a chat context.</li> <li>Cooperative, multiplayer or teamwork-oriented services within a chat context.</li>
<li>The use cases are effectively <strong>unlimited</strong>.</li> <li>The use cases are effectively <strong>unlimited</strong>.</li>
</ul> </ul>
<h4><a class="anchor" href="#launching-mini-apps-from-the-attachment-menu" id="launching-mini-apps-from-the-attachment-menu" name="launching-mini-apps-from-the-attachment-menu"><i class="anchor-icon"></i></a>Launching Mini Apps from the Attachment Menu</h4> <h4><a class="anchor" name="launching-mini-apps-from-the-attachment-menu" href="#launching-mini-apps-from-the-attachment-menu"><i class="anchor-icon"></i></a>Launching Mini Apps from the Attachment Menu</h4>
<blockquote> <blockquote>
<p><strong>TL;DR:</strong> Mini 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> Mini App Bots can request to be added directly to a user&#39;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> </blockquote>
<p>Mini 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>. You can configure in which types of chats your mini app can be started from the attachment menu (private, groups, supergroups or channels).</p> <p>Mini App Bots can request to be added directly to a user&#39;s attachment menu, allowing them to be quickly launched from <strong>any type of chat</strong>. You can configure in which types of chats your mini 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>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 &gt; Configure Attachment Menu</em>. Then specify the URL that will be opened to launch the bot's Mini App via its icon in the attachment menu.</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 &gt; Configure Attachment Menu</em>. Then specify the URL that will be opened to launch the bot&#39;s Mini App via its icon in the attachment menu.</p>
<p>You can add a 'Settings' item to the context menu of your Mini 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>You can add a &#39;Settings&#39; item to the context menu of your Mini 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>In addition to the user&#39;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 Mini App.</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 Mini App.</p>
<blockquote> <blockquote>
<p>You can read more about adding bots to the attachment menu <a href="#adding-bots-to-the-attachment-menu">here</a>.</p> <p>You can read more about adding bots to the attachment menu <a href="#adding-bots-to-the-attachment-menu">here</a>.</p>
</blockquote> </blockquote>
<hr> <hr>
<h3><a class="anchor" href="#initializing-mini-apps" id="initializing-mini-apps" name="initializing-mini-apps"><i class="anchor-icon"></i></a>Initializing Mini Apps</h3> <h3><a class="anchor" name="initializing-mini-apps" href="#initializing-mini-apps"><i class="anchor-icon"></i></a>Initializing Mini Apps</h3>
<p>To connect your Mini 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>&lt;head&gt;</code> tag before any other scripts, using this code:</p> <p>To connect your Mini 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>&lt;head&gt;</code> tag before any other scripts, using this code:</p>
<pre><code>&lt;script src="https://telegram.org/js/telegram-web-app.js"&gt;&lt;/script&gt;</code></pre> <pre><code>&lt;script src=&quot;https://telegram.org/js/telegram-web-app.js&quot;&gt;&lt;/script&gt;</code></pre>
<p>Once the script is connected, a <code>window.Telegram.WebApp</code> object will become available with the following fields:</p> <p>Once the script is connected, a <code>window.Telegram.WebApp</code> object will become available with the following fields:</p>
<table class="table"> <table class="table">
<thead> <thead>
@ -234,27 +237,27 @@
<tr> <tr>
<td>initData</td> <td>initData</td>
<td>String</td> <td>String</td>
<td>A string with raw data transferred to the Mini App, convenient for <a href="#validating-data-received-via-the-mini-app">validating data</a>.<br><strong>WARNING:</strong> <a href="#validating-data-received-via-the-mini-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 Mini App, convenient for <a href="#validating-data-received-via-the-mini-app">validating data</a>.<br><strong>WARNING:</strong> <a href="#validating-data-received-via-the-mini-app">Validate data</a> from this field before using it on the bot&#39;s server.</td>
</tr> </tr>
<tr> <tr>
<td>initDataUnsafe</td> <td>initDataUnsafe</td>
<td><a href="#webappinitdata">WebAppInitData</a></td> <td><a href="#webappinitdata">WebAppInitData</a></td>
<td>An object with input data transferred to the Mini 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-mini-app">validated</a>.</td> <td>An object with input data transferred to the Mini 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&#39;s server and only after it has been <a href="#validating-data-received-via-the-mini-app">validated</a>.</td>
</tr> </tr>
<tr> <tr>
<td>version</td> <td>version</td>
<td>String</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&#39;s Telegram app.</td>
</tr> </tr>
<tr> <tr>
<td>platform</td> <td>platform</td>
<td>String</td> <td>String</td>
<td>The name of the platform of the user's Telegram app.</td> <td>The name of the platform of the user&#39;s Telegram app.</td>
</tr> </tr>
<tr> <tr>
<td>colorScheme</td> <td>colorScheme</td>
<td>String</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>
<tr> <tr>
<td>themeParams</td> <td>themeParams</td>
@ -269,12 +272,12 @@
<tr> <tr>
<td>viewportHeight</td> <td>viewportHeight</td>
<td>Float</td> <td>Float</td>
<td>The current height of the visible area of the Mini 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 Mini App, with its lower part remaining outside the screen area. From this position, the user can "pull" the Mini App to its maximum height, while the bot can do the same by calling the <strong>expand()</strong> method. As the position of the Mini 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 Mini 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 Mini App, with its lower part remaining outside the screen area. From this position, the user can “pull” the Mini App to its maximum height, while the bot can do the same by calling the <strong>expand()</strong> method. As the position of the Mini 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&#39;s more appropriate to use the value of the <code>viewportStableHeight</code> field for this purpose.</td>
</tr> </tr>
<tr> <tr>
<td>viewportStableHeight</td> <td>viewportStableHeight</td>
<td>Float</td> <td>Float</td>
<td>The height of the visible area of the Mini 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 Mini App, with its lower part remaining outside the screen area. From this position, the user can "pull" the Mini 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 Mini 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 Mini App reaches its final size.<br><br><em>Note the <a href="#events-available-for-mini-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 Mini 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 Mini App, with its lower part remaining outside the screen area. From this position, the user can “pull” the Mini 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 Mini 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 Mini App reaches its final size.<br><br><em>Note the <a href="#events-available-for-mini-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>
<tr> <tr>
<td>headerColor</td> <td>headerColor</td>
@ -317,34 +320,34 @@
<td>An object for controlling cloud storage.</td> <td>An object for controlling cloud storage.</td>
</tr> </tr>
<tr> <tr>
<td>BiometricManager ^==NEW==^</td> <td>BiometricManager <sup><mark>NEW</mark></sup></td>
<td><a href="#biometricmanager">BiometricManager</a></td> <td><a href="#biometricmanager">BiometricManager</a></td>
<td>An object for controlling biometrics on the device.</td> <td>An object for controlling biometrics on the device.</td>
</tr> </tr>
<tr> <tr>
<td>isVersionAtLeast(version)</td> <td>isVersionAtLeast(version)</td>
<td>Function</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&#39;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>
<tr> <tr>
<td>setHeaderColor(color)</td> <td>setHeaderColor(color)</td>
<td>Function</td> <td>Function</td>
<td>==Bot API 6.1+== A method that sets the app header color in the <code>#RRGGBB</code> format. You can also use keywords <em>bg_color</em> and <em>secondary_bg_color</em>. <br><br>Up to ==Bot API 6.9== You can only pass <em>Telegram.WebApp.themeParams.bg_color</em> or <em>Telegram.WebApp.themeParams.secondary_bg_color</em> as a color or <em>bg_color</em>, <em>secondary_bg_color</em> keywords.</td> <td><mark>Bot API 6.1+</mark> A method that sets the app header color in the <code>#RRGGBB</code> format. You can also use keywords <em>bg_color</em> and <em>secondary_bg_color</em>.<br><br>Up to <mark>Bot API 6.9</mark> You can only pass <em>Telegram.WebApp.themeParams.bg_color</em> or <em>Telegram.WebApp.themeParams.secondary_bg_color</em> as a color or <em>bg_color</em>, <em>secondary_bg_color</em> keywords.</td>
</tr> </tr>
<tr> <tr>
<td>setBackgroundColor(color)</td> <td>setBackgroundColor(color)</td>
<td>Function</td> <td>Function</td>
<td>==Bot API 6.1+== A method that sets the app background color in the <code>#RRGGBB</code> format. You can also use keywords <em>bg_color</em> and <em>secondary_bg_color</em>.</td> <td><mark>Bot API 6.1+</mark> A method that sets the app background color in the <code>#RRGGBB</code> format. You can also use keywords <em>bg_color</em> and <em>secondary_bg_color</em>.</td>
</tr> </tr>
<tr> <tr>
<td>enableClosingConfirmation()</td> <td>enableClosingConfirmation()</td>
<td>Function</td> <td>Function</td>
<td>==Bot API 6.2+== A method that enables a confirmation dialog while the user is trying to close the Mini App.</td> <td><mark>Bot API 6.2+</mark> A method that enables a confirmation dialog while the user is trying to close the Mini App.</td>
</tr> </tr>
<tr> <tr>
<td>disableClosingConfirmation()</td> <td>disableClosingConfirmation()</td>
<td>Function</td> <td>Function</td>
<td>==Bot API 6.2+== A method that disables the confirmation dialog while the user is trying to close the Mini App.</td> <td><mark>Bot API 6.2+</mark> A method that disables the confirmation dialog while the user is trying to close the Mini App.</td>
</tr> </tr>
<tr> <tr>
<td>onEvent(eventType, eventHandler)</td> <td>onEvent(eventType, eventHandler)</td>
@ -364,67 +367,67 @@
<tr> <tr>
<td>switchInlineQuery(query[, choose_chat_types])</td> <td>switchInlineQuery(query[, choose_chat_types])</td>
<td>Function</td> <td>Function</td>
<td>==Bot API 6.7+== A method that inserts the bot's username and the specified inline <em>query</em> in the current chat's input field. Query may be empty, in which case only the bot's username will be inserted. If an optional <em>choose_chat_types</em> parameter was passed, the client prompts the user to choose a specific chat, then opens that chat and inserts the bot's username and the specified inline query in the input field. 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>.</td> <td><mark>Bot API 6.7+</mark> A method that inserts the bot&#39;s username and the specified inline <em>query</em> in the current chat&#39;s input field. Query may be empty, in which case only the bot&#39;s username will be inserted. If an optional <em>choose_chat_types</em> parameter was passed, the client prompts the user to choose a specific chat, then opens that chat and inserts the bot&#39;s username and the specified inline query in the input field. 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>.</td>
</tr> </tr>
<tr> <tr>
<td>openLink(url[, options])</td> <td>openLink(url[, options])</td>
<td>Function</td> <td>Function</td>
<td>A method that opens a link in an external browser. The Mini App will <em>not</em> be closed. <br>==Bot API 6.4+== If the optional <em>options</em> parameter is passed with the field <em>try_instant_view=true</em>, the link will be opened in <a href="https://instantview.telegram.org/">Instant View</a> mode if possible. <br><br><em>Note that this method can be called only in response to user interaction with the Mini App interface (e.g. a click inside the Mini App or on the main button)</em></td> <td>A method that opens a link in an external browser. The Mini App will <em>not</em> be closed.<br><mark>Bot API 6.4+</mark> If the optional <em>options</em> parameter is passed with the field <em>try_instant_view=true</em>, the link will be opened in <a href="https://instantview.telegram.org/">Instant View</a> mode if possible.<br><br><em>Note that this method can be called only in response to user interaction with the Mini App interface (e.g. a click inside the Mini App or on the main button)</em></td>
</tr> </tr>
<tr> <tr>
<td>openTelegramLink(url)</td> <td>openTelegramLink(url)</td>
<td>Function</td> <td>Function</td>
<td>A method that opens a telegram link inside the Telegram app. The Mini App will <em>not</em> be closed after this method is called. <br><br>Up to ==Bot API 7.0== The Mini App <em>will</em> be closed after this method is called.</td> <td>A method that opens a telegram link inside the Telegram app. The Mini App will <em>not</em> be closed after this method is called.<br><br>Up to <mark>Bot API 7.0</mark> The Mini App <em>will</em> be closed after this method is called.</td>
</tr> </tr>
<tr> <tr>
<td>openInvoice(url[, callback])</td> <td>openInvoice(url[, callback])</td>
<td>Function</td> <td>Function</td>
<td>==Bot API 6.1+== A method that opens an invoice using the link <em>url</em>. The Mini App will receive the <a href="#events-available-for-mini-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 Mini App will receive the <a href="#events-available-for-mini-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>
<tr> <tr>
<td>showPopup(params[, callback])</td> <td>showPopup(params[, callback])</td>
<td>Function</td> <td>Function</td>
<td>==Bot API 6.2+== A method that shows a native popup described by the <em>params</em> argument of the type <a href="#popupparams">PopupParams</a>. The Mini App will receive the <a href="#events-available-for-mini-apps">event</a> <em>popupClosed</em> when the popup is closed. If an optional <em>callback</em> parameter was passed, the <em>callback</em> function will be called and the field <em>id</em> of the pressed button will be passed as the first argument.</td> <td><mark>Bot API 6.2+</mark> A method that shows a native popup described by the <em>params</em> argument of the type <a href="#popupparams">PopupParams</a>. The Mini App will receive the <a href="#events-available-for-mini-apps">event</a> <em>popupClosed</em> when the popup is closed. If an optional <em>callback</em> parameter was passed, the <em>callback</em> function will be called and the field <em>id</em> of the pressed button will be passed as the first argument.</td>
</tr> </tr>
<tr> <tr>
<td>showAlert(message[, callback])</td> <td>showAlert(message[, callback])</td>
<td>Function</td> <td>Function</td>
<td>==Bot API 6.2+== A method that shows <em>message</em> in a simple alert with a 'Close' button. If an optional <em>callback</em> parameter was passed, the <em>callback</em> function will be called when the popup is closed.</td> <td><mark>Bot API 6.2+</mark> A method that shows <em>message</em> in a simple alert with a &#39;Close&#39; button. If an optional <em>callback</em> parameter was passed, the <em>callback</em> function will be called when the popup is closed.</td>
</tr> </tr>
<tr> <tr>
<td>showConfirm(message[, callback])</td> <td>showConfirm(message[, callback])</td>
<td>Function</td> <td>Function</td>
<td>==Bot API 6.2+== A method that shows <em>message</em> in a simple confirmation window with 'OK' and 'Cancel' buttons. If an optional <em>callback</em> parameter was passed, the <em>callback</em> function will be called when the popup is closed and the first argument will be a boolean indicating whether the user pressed the 'OK' button.</td> <td><mark>Bot API 6.2+</mark> A method that shows <em>message</em> in a simple confirmation window with &#39;OK&#39; and &#39;Cancel&#39; buttons. If an optional <em>callback</em> parameter was passed, the <em>callback</em> function will be called when the popup is closed and the first argument will be a boolean indicating whether the user pressed the &#39;OK&#39; button.</td>
</tr> </tr>
<tr> <tr>
<td>showScanQrPopup(params[, callback])</td> <td>showScanQrPopup(params[, callback])</td>
<td>Function</td> <td>Function</td>
<td>==Bot API 6.4+== A method that shows a native popup for scanning a QR code described by the <em>params</em> argument of the type <a href="#scanqrpopupparams">ScanQrPopupParams</a>. The Mini App will receive the <a href="#events-available-for-mini-apps">event</a> <em>qrTextReceived</em> every time the scanner catches a code with text data. If an optional <em>callback</em> parameter was passed, the <em>callback</em> function will be called and the text from the QR code will be passed as the first argument. Returning <em>true</em> inside this callback function causes the popup to be closed.</td> <td><mark>Bot API 6.4+</mark> A method that shows a native popup for scanning a QR code described by the <em>params</em> argument of the type <a href="#scanqrpopupparams">ScanQrPopupParams</a>. The Mini App will receive the <a href="#events-available-for-mini-apps">event</a> <em>qrTextReceived</em> every time the scanner catches a code with text data. If an optional <em>callback</em> parameter was passed, the <em>callback</em> function will be called and the text from the QR code will be passed as the first argument. Returning <em>true</em> inside this callback function causes the popup to be closed.</td>
</tr> </tr>
<tr> <tr>
<td>closeScanQrPopup()</td> <td>closeScanQrPopup()</td>
<td>Function</td> <td>Function</td>
<td>==Bot API 6.4+== A method that closes the native popup for scanning a QR code opened with the <em>showScanQrPopup</em> method. Run it if you received valid data in the <a href="#events-available-for-mini-apps">event</a> <em>qrTextReceived</em>.</td> <td><mark>Bot API 6.4+</mark> A method that closes the native popup for scanning a QR code opened with the <em>showScanQrPopup</em> method. Run it if you received valid data in the <a href="#events-available-for-mini-apps">event</a> <em>qrTextReceived</em>.</td>
</tr> </tr>
<tr> <tr>
<td>readTextFromClipboard([callback])</td> <td>readTextFromClipboard([callback])</td>
<td>Function</td> <td>Function</td>
<td>==Bot API 6.4+== A method that requests text from the clipboard. The Mini App will receive the <a href="#events-available-for-mini-apps">event</a> <em>clipboardTextReceived</em>. If an optional <em>callback</em> parameter was passed, the <em>callback</em> function will be called and the text from the clipboard will be passed as the first argument.<br><br><em>Note: this method can be called only for Mini Apps launched from the attachment menu and only in response to a user interaction with the Mini App interface (e.g. a click inside the Mini App or on the main button).</em></td> <td><mark>Bot API 6.4+</mark> A method that requests text from the clipboard. The Mini App will receive the <a href="#events-available-for-mini-apps">event</a> <em>clipboardTextReceived</em>. If an optional <em>callback</em> parameter was passed, the <em>callback</em> function will be called and the text from the clipboard will be passed as the first argument.<br><br><em>Note: this method can be called only for Mini Apps launched from the attachment menu and only in response to a user interaction with the Mini App interface (e.g. a click inside the Mini App or on the main button).</em></td>
</tr> </tr>
<tr> <tr>
<td>requestWriteAccess([callback])</td> <td>requestWriteAccess([callback])</td>
<td>Function</td> <td>Function</td>
<td>==Bot API 6.9+== A method that shows a native popup requesting permission for the bot to send messages to the user. If an optional <em>callback</em> parameter was passed, the <em>callback</em> function will be called when the popup is closed and the first argument will be a boolean indicating whether the user granted this access.</td> <td><mark>Bot API 6.9+</mark> A method that shows a native popup requesting permission for the bot to send messages to the user. If an optional <em>callback</em> parameter was passed, the <em>callback</em> function will be called when the popup is closed and the first argument will be a boolean indicating whether the user granted this access.</td>
</tr> </tr>
<tr> <tr>
<td>requestContact([callback])</td> <td>requestContact([callback])</td>
<td>Function</td> <td>Function</td>
<td>==Bot API 6.9+== A method that shows a native popup prompting the user for their phone number. If an optional <em>callback</em> parameter was passed, the <em>callback</em> function will be called when the popup is closed and the first argument will be a boolean indicating whether the user shared its phone number.</td> <td><mark>Bot API 6.9+</mark> A method that shows a native popup prompting the user for their phone number. If an optional <em>callback</em> parameter was passed, the <em>callback</em> function will be called when the popup is closed and the first argument will be a boolean indicating whether the user shared its phone number.</td>
</tr> </tr>
<tr> <tr>
<td>ready()</td> <td>ready()</td>
<td>Function</td> <td>Function</td>
<td>A method that informs the Telegram app that the Mini 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 Mini 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 Mini 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 Mini 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>
<tr> <tr>
<td>expand()</td> <td>expand()</td>
@ -438,8 +441,8 @@
</tr> </tr>
</tbody> </tbody>
</table> </table>
<h4><a class="anchor" href="#themeparams" id="themeparams" name="themeparams"><i class="anchor-icon"></i></a>ThemeParams</h4> <h4><a class="anchor" name="themeparams" href="#themeparams"><i class="anchor-icon"></i></a>ThemeParams</h4>
<p>Mini 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> <p>Mini Apps can <a href="#color-schemes">adjust the appearance</a> of the interface to match the Telegram user&#39;s app in real time. This object contains the user&#39;s current theme settings:</p>
<table class="table"> <table class="table">
<thead> <thead>
<tr> <tr>
@ -482,44 +485,45 @@
<tr> <tr>
<td>secondary_bg_color</td> <td>secondary_bg_color</td>
<td>String</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> </tr>
<tr> <tr>
<td>header_bg_color</td> <td>header_bg_color</td>
<td>String</td> <td>String</td>
<td><em>Optional</em>. ==Bot API 7.0+== Header background color in the <code>#RRGGBB</code> format. <br>Also available as the CSS variable <code>var(--tg-theme-header-bg-color)</code>.</td> <td><em>Optional</em>. <mark>Bot API 7.0+</mark> Header background color in the <code>#RRGGBB</code> format.<br>Also available as the CSS variable <code>var(--tg-theme-header-bg-color)</code>.</td>
</tr> </tr>
<tr> <tr>
<td>accent_text_color</td> <td>accent_text_color</td>
<td>String</td> <td>String</td>
<td><em>Optional</em>. ==Bot API 7.0+== Accent text color in the <code>#RRGGBB</code> format. <br>Also available as the CSS variable <code>var(--tg-theme-accent-text-color)</code>.</td> <td><em>Optional</em>. <mark>Bot API 7.0+</mark> Accent text color in the <code>#RRGGBB</code> format.<br>Also available as the CSS variable <code>var(--tg-theme-accent-text-color)</code>.</td>
</tr> </tr>
<tr> <tr>
<td>section_bg_color</td> <td>section_bg_color</td>
<td>String</td> <td>String</td>
<td><em>Optional</em>. ==Bot API 7.0+== Background color for the section in the <code>#RRGGBB</code> format. It is recommended to use this in conjunction with <em>secondary_bg_color</em>. <br>Also available as the CSS variable <code>var(--tg-theme-section-bg-color)</code>.</td> <td><em>Optional</em>. <mark>Bot API 7.0+</mark> Background color for the section in the <code>#RRGGBB</code> format. It is recommended to use this in conjunction with <em>secondary_bg_color</em>.<br>Also available as the CSS variable <code>var(--tg-theme-section-bg-color)</code>.</td>
</tr> </tr>
<tr> <tr>
<td>section_header_text_color</td> <td>section_header_text_color</td>
<td>String</td> <td>String</td>
<td><em>Optional</em>. ==Bot API 7.0+== Header text color for the section in the <code>#RRGGBB</code> format. <br>Also available as the CSS variable <code>var(--tg-theme-section-header-text-color)</code>.</td> <td><em>Optional</em>. <mark>Bot API 7.0+</mark> Header text color for the section in the <code>#RRGGBB</code> format.<br>Also available as the CSS variable <code>var(--tg-theme-section-header-text-color)</code>.</td>
</tr> </tr>
<tr> <tr>
<td>subtitle_text_color</td> <td>subtitle_text_color</td>
<td>String</td> <td>String</td>
<td><em>Optional</em>. ==Bot API 7.0+== Subtitle text color in the <code>#RRGGBB</code> format. <br>Also available as the CSS variable <code>var(--tg-theme-subtitle-text-color)</code>.</td> <td><em>Optional</em>. <mark>Bot API 7.0+</mark> Subtitle text color in the <code>#RRGGBB</code> format.<br>Also available as the CSS variable <code>var(--tg-theme-subtitle-text-color)</code>.</td>
</tr> </tr>
<tr> <tr>
<td>destructive_text_color</td> <td>destructive_text_color</td>
<td>String</td> <td>String</td>
<td><em>Optional</em>. ==Bot API 7.0+== Text color for destructive actions in the <code>#RRGGBB</code> format. <br>Also available as the CSS variable <code>var(--tg-theme-destructive-text-color)</code>.</td> <td><em>Optional</em>. <mark>Bot API 7.0+</mark> Text color for destructive actions in the <code>#RRGGBB</code> format.<br>Also available as the CSS variable <code>var(--tg-theme-destructive-text-color)</code>.</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
<div> <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> </div>
<h4><a class="anchor" href="#popupparams" id="popupparams" name="popupparams"><i class="anchor-icon"></i></a>PopupParams</h4>
<h4><a class="anchor" name="popupparams" href="#popupparams"><i class="anchor-icon"></i></a>PopupParams</h4>
<p>This object describes the native popup.</p> <p>This object describes the native popup.</p>
<table class="table"> <table class="table">
<thead> <thead>
@ -543,11 +547,11 @@
<tr> <tr>
<td>buttons</td> <td>buttons</td>
<td>Array of <a href="#popupbutton">PopupButton</a></td> <td>Array of <a href="#popupbutton">PopupButton</a></td>
<td><em>Optional</em>. List of buttons to be displayed in the popup, 1-3 buttons. Set to <em>[{"type":"close"}]</em> by default.</td> <td><em>Optional</em>. List of buttons to be displayed in the popup, 1-3 buttons. Set to <em>[{“type”:“close”}]</em> by default.</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
<h4><a class="anchor" href="#scanqrpopupparams" id="scanqrpopupparams" name="scanqrpopupparams"><i class="anchor-icon"></i></a>ScanQrPopupParams</h4> <h4><a class="anchor" name="scanqrpopupparams" href="#scanqrpopupparams"><i class="anchor-icon"></i></a>ScanQrPopupParams</h4>
<p>This object describes the native popup for scanning QR codes.</p> <p>This object describes the native popup for scanning QR codes.</p>
<table class="table"> <table class="table">
<thead> <thead>
@ -561,11 +565,11 @@
<tr> <tr>
<td>text</td> <td>text</td>
<td>String</td> <td>String</td>
<td><em>Optional</em>. The text to be displayed under the 'Scan QR' heading, 0-64 characters.</td> <td><em>Optional</em>. The text to be displayed under the &#39;Scan QR&#39; heading, 0-64 characters.</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
<h4><a class="anchor" href="#popupbutton" id="popupbutton" name="popupbutton"><i class="anchor-icon"></i></a>PopupButton</h4> <h4><a class="anchor" name="popupbutton" href="#popupbutton"><i class="anchor-icon"></i></a>PopupButton</h4>
<p>This object describes the native popup button.</p> <p>This object describes the native popup button.</p>
<table class="table"> <table class="table">
<thead> <thead>
@ -584,7 +588,7 @@
<tr> <tr>
<td>type</td> <td>type</td>
<td>String</td> <td>String</td>
<td><em>Optional</em>. Type of the button. Set to <em>default</em> by default. <br>Can be one of these values: <br>- <em>default</em>, a button with the default style, <br>- <em>ok</em>, a button with the localized text "OK", <br>- <em>close</em>, a button with the localized text "Close", <br>- <em>cancel</em>, a button with the localized text "Cancel", <br>- <em>destructive</em>, a button with a style that indicates a destructive action (e.g. "Remove", "Delete", etc.).</td> <td><em>Optional</em>. Type of the button. Set to <em>default</em> by default.<br>Can be one of these values:<br>- <em>default</em>, a button with the default style,<br>- <em>ok</em>, a button with the localized text “OK”,<br>- <em>close</em>, a button with the localized text “Close”,<br>- <em>cancel</em>, a button with the localized text “Cancel”,<br>- <em>destructive</em>, a button with a style that indicates a destructive action (e.g. “Remove”, “Delete”, etc.).</td>
</tr> </tr>
<tr> <tr>
<td>text</td> <td>text</td>
@ -593,7 +597,7 @@
</tr> </tr>
</tbody> </tbody>
</table> </table>
<h4><a class="anchor" href="#backbutton" id="backbutton" name="backbutton"><i class="anchor-icon"></i></a>BackButton</h4> <h4><a class="anchor" name="backbutton" href="#backbutton"><i class="anchor-icon"></i></a>BackButton</h4>
<p>This object controls the <strong>back</strong> button, which can be displayed in the header of the Mini App in the Telegram interface.</p> <p>This object controls the <strong>back</strong> button, which can be displayed in the header of the Mini App in the Telegram interface.</p>
<table class="table"> <table class="table">
<thead> <thead>
@ -612,27 +616,27 @@
<tr> <tr>
<td>onClick(callback)</td> <td>onClick(callback)</td>
<td>Function</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(&#39;backButtonClicked&#39;, callback)</code></td>
</tr> </tr>
<tr> <tr>
<td>offClick(callback)</td> <td>offClick(callback)</td>
<td>Function</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(&#39;backButtonClicked&#39;, callback)</code></td>
</tr> </tr>
<tr> <tr>
<td>show()</td> <td>show()</td>
<td>Function</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>
<tr> <tr>
<td>hide()</td> <td>hide()</td>
<td>Function</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> </tr>
</tbody> </tbody>
</table> </table>
<p>All these methods return the BackButton object so they can be chained.</p> <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 Mini App in the Telegram interface.</p> <p>This object controls the main button, which is displayed at the bottom of the Mini App in the Telegram interface.</p>
<table class="table"> <table class="table">
<thead> <thead>
@ -681,12 +685,12 @@
<tr> <tr>
<td>onClick(callback)</td> <td>onClick(callback)</td>
<td>Function</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(&#39;mainButtonClicked&#39;, callback)</code></td>
</tr> </tr>
<tr> <tr>
<td>offClick(callback)</td> <td>offClick(callback)</td>
<td>Function</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(&#39;mainButtonClicked&#39;, callback)</code></td>
</tr> </tr>
<tr> <tr>
<td>show()</td> <td>show()</td>
@ -726,7 +730,7 @@
</tbody> </tbody>
</table> </table>
<p>All these methods return the MainButton object so they can be chained.</p> <p>All these methods return the MainButton object so they can be chained.</p>
<h4><a class="anchor" href="#settingsbutton" id="settingsbutton" name="settingsbutton"><i class="anchor-icon"></i></a>SettingsButton</h4> <h4><a class="anchor" name="settingsbutton" href="#settingsbutton"><i class="anchor-icon"></i></a>SettingsButton</h4>
<p>This object controls the <strong>Settings</strong> item in the context menu of the Mini App in the Telegram interface.</p> <p>This object controls the <strong>Settings</strong> item in the context menu of the Mini App in the Telegram interface.</p>
<table class="table"> <table class="table">
<thead> <thead>
@ -745,27 +749,27 @@
<tr> <tr>
<td>onClick(callback)</td> <td>onClick(callback)</td>
<td>Function</td> <td>Function</td>
<td>==Bot API 7.0+== A method that sets the press event handler for the Settings item in the context menu. An alias for <code>Telegram.WebApp.onEvent('settingsButtonClicked', callback)</code></td> <td><mark>Bot API 7.0+</mark> A method that sets the press event handler for the Settings item in the context menu. An alias for <code>Telegram.WebApp.onEvent(&#39;settingsButtonClicked&#39;, callback)</code></td>
</tr> </tr>
<tr> <tr>
<td>offClick(callback)</td> <td>offClick(callback)</td>
<td>Function</td> <td>Function</td>
<td>==Bot API 7.0+== A method that removes the press event handler from the Settings item in the context menu. An alias for <code>Telegram.WebApp.offEvent('settingsButtonClicked', callback)</code></td> <td><mark>Bot API 7.0+</mark> A method that removes the press event handler from the Settings item in the context menu. An alias for <code>Telegram.WebApp.offEvent(&#39;settingsButtonClicked&#39;, callback)</code></td>
</tr> </tr>
<tr> <tr>
<td>show()</td> <td>show()</td>
<td>Function</td> <td>Function</td>
<td>==Bot API 7.0+== A method to make the Settings item in the context menu visible.</td> <td><mark>Bot API 7.0+</mark> A method to make the Settings item in the context menu visible.</td>
</tr> </tr>
<tr> <tr>
<td>hide()</td> <td>hide()</td>
<td>Function</td> <td>Function</td>
<td>==Bot API 7.0+== A method to hide the Settings item in the context menu.</td> <td><mark>Bot API 7.0+</mark> A method to hide the Settings item in the context menu.</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
<p>All these methods return the <a href="#settingsbutton">SettingsButton</a> object so they can be chained.</p> <p>All these methods return the <a href="#settingsbutton">SettingsButton</a> 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> <h4><a class="anchor" name="hapticfeedback" href="#hapticfeedback"><i class="anchor-icon"></i></a>HapticFeedback</h4>
<p>This object controls haptic feedback.</p> <p>This object controls haptic feedback.</p>
<table class="table"> <table class="table">
<thead> <thead>
@ -779,22 +783,22 @@
<tr> <tr>
<td>impactOccurred(style)</td> <td>impactOccurred(style)</td>
<td>Function</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>
<tr> <tr>
<td>notificationOccurred(type)</td> <td>notificationOccurred(type)</td>
<td>Function</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>
<tr> <tr>
<td>selectionChanged()</td> <td>selectionChanged()</td>
<td>Function</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> </tr>
</tbody> </tbody>
</table> </table>
<p>All these methods return the HapticFeedback object so they can be chained.</p> <p>All these methods return the HapticFeedback object so they can be chained.</p>
<h4><a class="anchor" href="#cloudstorage" id="cloudstorage" name="cloudstorage"><i class="anchor-icon"></i></a>CloudStorage</h4> <h4><a class="anchor" name="cloudstorage" href="#cloudstorage"><i class="anchor-icon"></i></a>CloudStorage</h4>
<p>This object controls the cloud storage. Each bot can store up to 1024 items per user in the cloud storage.</p> <p>This object controls the cloud storage. Each bot can store up to 1024 items per user in the cloud storage.</p>
<table class="table"> <table class="table">
<thead> <thead>
@ -808,38 +812,38 @@
<tr> <tr>
<td>setItem(key, value[, callback])</td> <td>setItem(key, value[, callback])</td>
<td>Function</td> <td>Function</td>
<td>==Bot API 6.9+== A method that stores a value in the cloud storage using the specified key. The key should contain 1-128 characters, only <code>A-Z</code>, <code>a-z</code>, <code>0-9</code>, <code>_</code> and <code>-</code> are allowed. The value should contain 0-4096 characters. You can store up to 1024 keys in the cloud storage. If an optional <em>callback</em> parameter was passed, the <em>callback</em> function will be called. In case of an error, the first argument will contain the error. In case of success, the first argument will be <em>null</em> and the second argument will be a boolean indicating whether the value was stored.</td> <td><mark>Bot API 6.9+</mark> A method that stores a value in the cloud storage using the specified key. The key should contain 1-128 characters, only <code>A-Z</code>, <code>a-z</code>, <code>0-9</code>, <code>_</code> and <code>-</code> are allowed. The value should contain 0-4096 characters. You can store up to 1024 keys in the cloud storage. If an optional <em>callback</em> parameter was passed, the <em>callback</em> function will be called. In case of an error, the first argument will contain the error. In case of success, the first argument will be <em>null</em> and the second argument will be a boolean indicating whether the value was stored.</td>
</tr> </tr>
<tr> <tr>
<td>getItem(key, callback)</td> <td>getItem(key, callback)</td>
<td>Function</td> <td>Function</td>
<td>==Bot API 6.9+== A method that receives a value from the cloud storage using the specified key. The key should contain 1-128 characters, only <code>A-Z</code>, <code>a-z</code>, <code>0-9</code>, <code>_</code> and <code>-</code> are allowed. In case of an error, the <em>callback</em> function will be called and the first argument will contain the error. In case of success, the first argument will be <em>null</em> and the value will be passed as the second argument.</td> <td><mark>Bot API 6.9+</mark> A method that receives a value from the cloud storage using the specified key. The key should contain 1-128 characters, only <code>A-Z</code>, <code>a-z</code>, <code>0-9</code>, <code>_</code> and <code>-</code> are allowed. In case of an error, the <em>callback</em> function will be called and the first argument will contain the error. In case of success, the first argument will be <em>null</em> and the value will be passed as the second argument.</td>
</tr> </tr>
<tr> <tr>
<td>getItems(keys, callback)</td> <td>getItems(keys, callback)</td>
<td>Function</td> <td>Function</td>
<td>==Bot API 6.9+== A method that receives values from the cloud storage using the specified keys. The keys should contain 1-128 characters, only <code>A-Z</code>, <code>a-z</code>, <code>0-9</code>, <code>_</code> and <code>-</code> are allowed. In case of an error, the <em>callback</em> function will be called and the first argument will contain the error. In case of success, the first argument will be <em>null</em> and the values will be passed as the second argument.</td> <td><mark>Bot API 6.9+</mark> A method that receives values from the cloud storage using the specified keys. The keys should contain 1-128 characters, only <code>A-Z</code>, <code>a-z</code>, <code>0-9</code>, <code>_</code> and <code>-</code> are allowed. In case of an error, the <em>callback</em> function will be called and the first argument will contain the error. In case of success, the first argument will be <em>null</em> and the values will be passed as the second argument.</td>
</tr> </tr>
<tr> <tr>
<td>removeItem(key[, callback])</td> <td>removeItem(key[, callback])</td>
<td>Function</td> <td>Function</td>
<td>==Bot API 6.9+== A method that removes a value from the cloud storage using the specified key. The key should contain 1-128 characters, only <code>A-Z</code>, <code>a-z</code>, <code>0-9</code>, <code>_</code> and <code>-</code> are allowed. If an optional <em>callback</em> parameter was passed, the <em>callback</em> function will be called. In case of an error, the first argument will contain the error. In case of success, the first argument will be <em>null</em> and the second argument will be a boolean indicating whether the value was removed.</td> <td><mark>Bot API 6.9+</mark> A method that removes a value from the cloud storage using the specified key. The key should contain 1-128 characters, only <code>A-Z</code>, <code>a-z</code>, <code>0-9</code>, <code>_</code> and <code>-</code> are allowed. If an optional <em>callback</em> parameter was passed, the <em>callback</em> function will be called. In case of an error, the first argument will contain the error. In case of success, the first argument will be <em>null</em> and the second argument will be a boolean indicating whether the value was removed.</td>
</tr> </tr>
<tr> <tr>
<td>removeItems(keys[, callback])</td> <td>removeItems(keys[, callback])</td>
<td>Function</td> <td>Function</td>
<td>==Bot API 6.9+== A method that removes values from the cloud storage using the specified keys. The keys should contain 1-128 characters, only <code>A-Z</code>, <code>a-z</code>, <code>0-9</code>, <code>_</code> and <code>-</code> are allowed. If an optional <em>callback</em> parameter was passed, the <em>callback</em> function will be called. In case of an error, the first argument will contain the error. In case of success, the first argument will be <em>null</em> and the second argument will be a boolean indicating whether the values were removed.</td> <td><mark>Bot API 6.9+</mark> A method that removes values from the cloud storage using the specified keys. The keys should contain 1-128 characters, only <code>A-Z</code>, <code>a-z</code>, <code>0-9</code>, <code>_</code> and <code>-</code> are allowed. If an optional <em>callback</em> parameter was passed, the <em>callback</em> function will be called. In case of an error, the first argument will contain the error. In case of success, the first argument will be <em>null</em> and the second argument will be a boolean indicating whether the values were removed.</td>
</tr> </tr>
<tr> <tr>
<td>getKeys(callback)</td> <td>getKeys(callback)</td>
<td>Function</td> <td>Function</td>
<td>==Bot API 6.9+== A method that receives the list of all keys stored in the cloud storage. In case of an error, the <em>callback</em> function will be called and the first argument will contain the error. In case of success, the first argument will be <em>null</em> and the list of keys will be passed as the second argument.</td> <td><mark>Bot API 6.9+</mark> A method that receives the list of all keys stored in the cloud storage. In case of an error, the <em>callback</em> function will be called and the first argument will contain the error. In case of success, the first argument will be <em>null</em> and the list of keys will be passed as the second argument.</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
<p>All these methods return the <a href="#cloudstorage">CloudStorage</a> object, so they can be chained.</p> <p>All these methods return the <a href="#cloudstorage">CloudStorage</a> object, so they can be chained.</p>
<h4><a class="anchor" href="#biometricmanager" id="biometricmanager" name="biometricmanager"><i class="anchor-icon"></i></a>BiometricManager</h4> <h4><a class="anchor" name="biometricmanager" href="#biometricmanager"><i class="anchor-icon"></i></a>BiometricManager</h4>
<p>^==NEW==^ This object controls biometrics on the device. Before the first use of this object, it needs to be initialized using the <em>init</em> method.</p> <p><sup><mark>NEW</mark></sup> This object controls biometrics on the device. Before the first use of this object, it needs to be initialized using the <em>init</em> method.</p>
<table class="table"> <table class="table">
<thead> <thead>
<tr> <tr>
@ -852,67 +856,67 @@
<tr> <tr>
<td>isInited</td> <td>isInited</td>
<td>Boolean</td> <td>Boolean</td>
<td>==Bot API 7.2+== Shows whether biometrics object is initialized.</td> <td><mark>Bot API 7.2+</mark> Shows whether biometrics object is initialized.</td>
</tr> </tr>
<tr> <tr>
<td>isBiometricAvailable</td> <td>isBiometricAvailable</td>
<td>Boolean</td> <td>Boolean</td>
<td>==Bot API 7.2+== Shows whether biometrics is available on the current device.</td> <td><mark>Bot API 7.2+</mark> Shows whether biometrics is available on the current device.</td>
</tr> </tr>
<tr> <tr>
<td>biometricType</td> <td>biometricType</td>
<td>String</td> <td>String</td>
<td>==Bot API 7.2+== The type of biometrics currently available on the device. Can be one of these values: <br>- <em>finger</em>, fingerprint-based biometrics, <br>- <em>face</em>, face-based biometrics, <br>- <em>unknown</em>, biometrics of an unknown type.</td> <td><mark>Bot API 7.2+</mark> The type of biometrics currently available on the device. Can be one of these values:<br>- <em>finger</em>, fingerprint-based biometrics,<br>- <em>face</em>, face-based biometrics,<br>- <em>unknown</em>, biometrics of an unknown type.</td>
</tr> </tr>
<tr> <tr>
<td>isAccessRequested</td> <td>isAccessRequested</td>
<td>Boolean</td> <td>Boolean</td>
<td>==Bot API 7.2+== Shows whether permission to use biometrics has been requested.</td> <td><mark>Bot API 7.2+</mark> Shows whether permission to use biometrics has been requested.</td>
</tr> </tr>
<tr> <tr>
<td>isAccessGranted</td> <td>isAccessGranted</td>
<td>Boolean</td> <td>Boolean</td>
<td>==Bot API 7.2+== Shows whether permission to use biometrics has been granted.</td> <td><mark>Bot API 7.2+</mark> Shows whether permission to use biometrics has been granted.</td>
</tr> </tr>
<tr> <tr>
<td>isBiometricTokenSaved</td> <td>isBiometricTokenSaved</td>
<td>Boolean</td> <td>Boolean</td>
<td>==Bot API 7.2+== Shows whether the token is saved in secure storage on the device.</td> <td><mark>Bot API 7.2+</mark> Shows whether the token is saved in secure storage on the device.</td>
</tr> </tr>
<tr> <tr>
<td>deviceId</td> <td>deviceId</td>
<td>String</td> <td>String</td>
<td>==Bot API 7.2+== A unique device identifier that can be used to match the token to the device.</td> <td><mark>Bot API 7.2+</mark> A unique device identifier that can be used to match the token to the device.</td>
</tr> </tr>
<tr> <tr>
<td>init([callback])</td> <td>init([callback])</td>
<td>Function</td> <td>Function</td>
<td>==Bot API 7.2+== A method that initializes the BiometricManager object. It should be called before the object's first use. If an optional <em>callback</em> parameter was passed, the <em>callback</em> function will be called when the object is initialized.</td> <td><mark>Bot API 7.2+</mark> A method that initializes the BiometricManager object. It should be called before the object&#39;s first use. If an optional <em>callback</em> parameter was passed, the <em>callback</em> function will be called when the object is initialized.</td>
</tr> </tr>
<tr> <tr>
<td>requestAccess(params[, callback])</td> <td>requestAccess(params[, callback])</td>
<td>Function</td> <td>Function</td>
<td>==Bot API 7.2+== A method that requests permission to use biometrics according to the <em>params</em> argument of type <a href="#biometricrequestaccessparams">BiometricRequestAccessParams</a>. If an optional <em>callback</em> parameter was passed, the <em>callback</em> function will be called and the first argument will be a boolean indicating whether the user granted access.</td> <td><mark>Bot API 7.2+</mark> A method that requests permission to use biometrics according to the <em>params</em> argument of type <a href="#biometricrequestaccessparams">BiometricRequestAccessParams</a>. If an optional <em>callback</em> parameter was passed, the <em>callback</em> function will be called and the first argument will be a boolean indicating whether the user granted access.</td>
</tr> </tr>
<tr> <tr>
<td>authenticate(params[, callback])</td> <td>authenticate(params[, callback])</td>
<td>Function</td> <td>Function</td>
<td>==Bot API 7.2+== A method that authenticates the user using biometrics according to the <em>params</em> argument of type <a href="#biometricauthenticateparams">BiometricAuthenticateParams</a>. If an optional <em>callback</em> parameter was passed, the <em>callback</em> function will be called and the first argument will be a boolean indicating whether the user authenticated successfully. If so, the second argument will be a biometric token.</td> <td><mark>Bot API 7.2+</mark> A method that authenticates the user using biometrics according to the <em>params</em> argument of type <a href="#biometricauthenticateparams">BiometricAuthenticateParams</a>. If an optional <em>callback</em> parameter was passed, the <em>callback</em> function will be called and the first argument will be a boolean indicating whether the user authenticated successfully. If so, the second argument will be a biometric token.</td>
</tr> </tr>
<tr> <tr>
<td>updateBiometricToken(token, [callback])</td> <td>updateBiometricToken(token, [callback])</td>
<td>Function</td> <td>Function</td>
<td>==Bot API 7.2+== A method that updates the biometric token in secure storage on the device. To remove the token, pass an empty string. If an optional <em>callback</em> parameter was passed, the <em>callback</em> function will be called and the first argument will be a boolean indicating whether the token was updated.</td> <td><mark>Bot API 7.2+</mark> A method that updates the biometric token in secure storage on the device. To remove the token, pass an empty string. If an optional <em>callback</em> parameter was passed, the <em>callback</em> function will be called and the first argument will be a boolean indicating whether the token was updated.</td>
</tr> </tr>
<tr> <tr>
<td>openSettings()</td> <td>openSettings()</td>
<td>Function</td> <td>Function</td>
<td>==Bot API 7.2+== A method that opens the biometric access settings for bots. Useful when you need to request biometrics access to users who haven't granted it yet. <br><br><em>Note that this method can be called only in response to user interaction with the Mini App interface (e.g. a click inside the Mini App or on the main button)</em></td> <td><mark>Bot API 7.2+</mark> A method that opens the biometric access settings for bots. Useful when you need to request biometrics access to users who haven&#39;t granted it yet.<br><br><em>Note that this method can be called only in response to user interaction with the Mini App interface (e.g. a click inside the Mini App or on the main button)</em></td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
<p>All these methods return the <a href="#biometricmanager">BiometricManager</a> object so they can be chained.</p> <p>All these methods return the <a href="#biometricmanager">BiometricManager</a> object so they can be chained.</p>
<h4><a class="anchor" href="#biometricrequestaccessparams" id="biometricrequestaccessparams" name="biometricrequestaccessparams"><i class="anchor-icon"></i></a>BiometricRequestAccessParams</h4> <h4><a class="anchor" name="biometricrequestaccessparams" href="#biometricrequestaccessparams"><i class="anchor-icon"></i></a>BiometricRequestAccessParams</h4>
<p>This object describes the native popup for requesting permission to use biometrics.</p> <p>This object describes the native popup for requesting permission to use biometrics.</p>
<table class="table"> <table class="table">
<thead> <thead>
@ -930,7 +934,7 @@
</tr> </tr>
</tbody> </tbody>
</table> </table>
<h4><a class="anchor" href="#biometricauthenticateparams" id="biometricauthenticateparams" name="biometricauthenticateparams"><i class="anchor-icon"></i></a>BiometricAuthenticateParams</h4> <h4><a class="anchor" name="biometricauthenticateparams" href="#biometricauthenticateparams"><i class="anchor-icon"></i></a>BiometricAuthenticateParams</h4>
<p>This object describes the native popup for authenticating the user using biometrics.</p> <p>This object describes the native popup for authenticating the user using biometrics.</p>
<table class="table"> <table class="table">
<thead> <thead>
@ -948,7 +952,7 @@
</tr> </tr>
</tbody> </tbody>
</table> </table>
<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 Mini App when it is opened. It is empty if the Mini App was launched from a <a href="#keyboard-button-mini-apps">keyboard button</a> or from <a href="#inline-mode-mini-apps">inline mode</a>.</p> <p>This object contains data that is transferred to the Mini App when it is opened. It is empty if the Mini App was launched from a <a href="#keyboard-button-mini-apps">keyboard button</a> or from <a href="#inline-mode-mini-apps">inline mode</a>.</p>
<table class="table"> <table class="table">
<thead> <thead>
@ -982,7 +986,7 @@
<tr> <tr>
<td>chat_type</td> <td>chat_type</td>
<td>String</td> <td>String</td>
<td><em>Optional.</em> Type of the chat from which the Mini App was opened. Can be either "sender" for a private chat with the user opening the link, "private", "group", "supergroup", or "channel". Returned only for Mini Apps launched from direct links.</td> <td><em>Optional.</em> Type of the chat from which the Mini App was opened. Can be either “sender” for a private chat with the user opening the link, “private”, “group”, “supergroup”, or “channel”. Returned only for Mini Apps launched from direct links.</td>
</tr> </tr>
<tr> <tr>
<td>chat_instance</td> <td>chat_instance</td>
@ -1011,7 +1015,7 @@
</tr> </tr>
</tbody> </tbody>
</table> </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 Mini App user.</p> <p>This object contains the data of the Mini App user.</p>
<table class="table"> <table class="table">
<thead> <thead>
@ -1050,7 +1054,7 @@
<tr> <tr>
<td>language_code</td> <td>language_code</td>
<td>String</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&#39;s language. Returns in <em>user</em> field only.</td>
</tr> </tr>
<tr> <tr>
<td>is_premium</td> <td>is_premium</td>
@ -1074,7 +1078,7 @@
</tr> </tr>
</tbody> </tbody>
</table> </table>
<h4><a class="anchor" href="#webappchat" id="webappchat" name="webappchat"><i class="anchor-icon"></i></a>WebAppChat</h4> <h4><a class="anchor" name="webappchat" href="#webappchat"><i class="anchor-icon"></i></a>WebAppChat</h4>
<p>This object represents a chat.</p> <p>This object represents a chat.</p>
<table class="table"> <table class="table">
<thead> <thead>
@ -1093,7 +1097,7 @@
<tr> <tr>
<td>type</td> <td>type</td>
<td>String</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>
<tr> <tr>
<td>title</td> <td>title</td>
@ -1112,19 +1116,19 @@
</tr> </tr>
</tbody> </tbody>
</table> </table>
<h4><a class="anchor" href="#validating-data-received-via-the-mini-app" id="validating-data-received-via-the-mini-app" name="validating-data-received-via-the-mini-app"><i class="anchor-icon"></i></a>Validating data received via the Mini App</h4> <h4><a class="anchor" name="validating-data-received-via-the-mini-app" href="#validating-data-received-via-the-mini-app"><i class="anchor-icon"></i></a>Validating data received via the Mini App</h4>
<p>To validate data received via the Mini 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>To validate data received via the Mini App, one should send the data from the <em>Telegram.WebApp.initData</em> field to the bot&#39;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>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&#39;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=&lt;value&gt;</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=&lt;auth_date&gt;\nquery_id=&lt;query_id&gt;\nuser=&lt;user&gt;'</code>.</p> <p><strong>Data-check-string</strong> is a chain of all received fields, sorted alphabetically, in the format <code>key=&lt;value&gt;</code> with a <a href="https://en.wikipedia.org/wiki/Newline">line feed</a> character (&#39;\n&#39;, 0x0A) used as separator e.g., <code>&#39;auth_date=&lt;auth_date&gt;\nquery_id=&lt;query_id&gt;\nuser=&lt;user&gt;&#39;</code>.</p>
<p>The full check might look like:</p> <p>The full check might look like:</p>
<pre><code>data_check_string = ... <pre><code>data_check_string = ...
secret_key = HMAC_SHA256(&lt;bot_token&gt;, "WebAppData") secret_key = HMAC_SHA256(&lt;bot_token&gt;, &quot;WebAppData&quot;)
if (hex(HMAC_SHA256(data_check_string, secret_key)) == hash) { if (hex(HMAC_SHA256(data_check_string, secret_key)) == hash) {
// data is from Telegram // data is from Telegram
}</code></pre> }</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 Mini App.</p> <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 Mini App.</p>
<p>Once validated, the data may be used on your server. Complex data types are represented as JSON-serialized objects.</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-mini-apps" id="events-available-for-mini-apps" name="events-available-for-mini-apps"><i class="anchor-icon"></i></a>Events Available for Mini Apps</h4> <h4><a class="anchor" name="events-available-for-mini-apps" href="#events-available-for-mini-apps"><i class="anchor-icon"></i></a>Events Available for Mini Apps</h4>
<p>The Mini 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> <p>The Mini 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"> <table class="table">
<thead> <thead>
@ -1136,7 +1140,7 @@ if (hex(HMAC_SHA256(data_check_string, secret_key)) == hash) {
<tbody> <tbody>
<tr> <tr>
<td><code>themeChanged</code></td> <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&#39;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>
<tr> <tr>
<td><code>viewportChanged</code></td> <td><code>viewportChanged</code></td>
@ -1148,72 +1152,66 @@ if (hex(HMAC_SHA256(data_check_string, secret_key)) == hash) {
</tr> </tr>
<tr> <tr>
<td><code>backButtonClicked</code></td> <td><code>backButtonClicked</code></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><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>
<tr> <tr>
<td><code>settingsButtonClicked</code></td> <td><code>settingsButtonClicked</code></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><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>
<tr> <tr>
<td><code>invoiceClosed</code></td> <td><code>invoiceClosed</code></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><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> </tr>
<tr> <tr>
<td><code>popupClosed</code></td> <td><code>popupClosed</code></td>
<td>==Bot API 6.2+== Occurrs when the opened popup is closed. <br><em>eventHandler</em> receives an object with the single field <em>button_id</em> the value of the field <em>id</em> of the pressed button. If no buttons were pressed, the field <em>button_id</em> will be <em>null</em>.</td> <td><mark>Bot API 6.2+</mark> Occurrs when the opened popup is closed.<br><em>eventHandler</em> receives an object with the single field <em>button_id</em> the value of the field <em>id</em> of the pressed button. If no buttons were pressed, the field <em>button_id</em> will be <em>null</em>.</td>
</tr> </tr>
<tr> <tr>
<td><code>qrTextReceived</code></td> <td><code>qrTextReceived</code></td>
<td>==Bot API 6.4+== Occurs when the QR code scanner catches a code with text data. <br><em>eventHandler</em> receives an object with the single field <em>data</em> containing text data from the QR code.</td> <td><mark>Bot API 6.4+</mark> Occurs when the QR code scanner catches a code with text data.<br><em>eventHandler</em> receives an object with the single field <em>data</em> containing text data from the QR code.</td>
</tr> </tr>
<tr> <tr>
<td><code>clipboardTextReceived</code></td> <td><code>clipboardTextReceived</code></td>
<td>==Bot API 6.4+== Occurrs when the <code>readTextFromClipboard</code> method is called. <br><em>eventHandler</em> receives an object with the single field <em>data</em> containing text data from the clipboard. If the clipboard contains non-text data, the field <em>data</em> will be an empty string. If the Mini App has no access to the clipboard, the field <em>data</em> will be <em>null</em>.</td> <td><mark>Bot API 6.4+</mark> Occurrs when the <code>readTextFromClipboard</code> method is called.<br><em>eventHandler</em> receives an object with the single field <em>data</em> containing text data from the clipboard. If the clipboard contains non-text data, the field <em>data</em> will be an empty string. If the Mini App has no access to the clipboard, the field <em>data</em> will be <em>null</em>.</td>
</tr> </tr>
<tr> <tr>
<td><code>writeAccessRequested</code></td> <td><code>writeAccessRequested</code></td>
<td>==Bot API 6.9+== Occurs when the write permission was requested. <br><em>eventHandler</em> receives an object with the single field <em>status</em> containing one of the statuses: <br>- <strong>allowed</strong> user granted write permission to the bot, <br>- <strong>cancelled</strong> user declined this request.</td> <td><mark>Bot API 6.9+</mark> Occurs when the write permission was requested.<br><em>eventHandler</em> receives an object with the single field <em>status</em> containing one of the statuses:<br>- <strong>allowed</strong> user granted write permission to the bot,<br>- <strong>cancelled</strong> user declined this request.</td>
</tr> </tr>
<tr> <tr>
<td><code>contactRequested</code></td> <td><code>contactRequested</code></td>
<td>==Bot API 6.9+== Occurrs when the user's phone number was requested. <br><em>eventHandler</em> receives an object with the single field <em>status</em> containing one of the statuses: <br>- <strong>sent</strong> user shared their phone number with the bot, <br>- <strong>cancelled</strong> user declined this request.</td> <td><mark>Bot API 6.9+</mark> Occurrs when the user&#39;s phone number was requested.<br><em>eventHandler</em> receives an object with the single field <em>status</em> containing one of the statuses:<br>- <strong>sent</strong> user shared their phone number with the bot,<br>- <strong>cancelled</strong> user declined this request.</td>
</tr> </tr>
<tr> <tr>
<td><code>biometricManagerUpdated</code></td> <td><code>biometricManagerUpdated</code></td>
<td>==Bot API 7.2+== Occurs whenever BiometricManager object is changed. <br><em>eventHandler</em> receives no parameters.</td> <td><mark>Bot API 7.2+</mark> Occurs whenever BiometricManager object is changed.<br><em>eventHandler</em> receives no parameters.</td>
</tr> </tr>
<tr> <tr>
<td><code>biometricAuthRequested</code></td> <td><code>biometricAuthRequested</code></td>
<td>==Bot API 7.2+== Occurs whenever biometric authentication was requested. <br><em>eventHandler</em> receives an object with the field <em>isAuthenticated</em> containing a boolean indicating whether the user was authenticated successfully. If <em>isAuthenticated</em> is true, the field <em>biometricToken</em> will contain the biometric token stored in secure storage on the device.</td> <td><mark>Bot API 7.2+</mark> Occurs whenever biometric authentication was requested.<br><em>eventHandler</em> receives an object with the field <em>isAuthenticated</em> containing a boolean indicating whether the user was authenticated successfully. If <em>isAuthenticated</em> is true, the field <em>biometricToken</em> will contain the biometric token stored in secure storage on the device.</td>
</tr> </tr>
<tr> <tr>
<td><code>biometricTokenUpdated</code></td> <td><code>biometricTokenUpdated</code></td>
<td>==Bot API 7.2+== Occurs whenever the biometric token was updated. <br><em>eventHandler</em> receives an object with the single field <em>isUpdated</em>, containing a boolean indicating whether the token was updated.</td> <td><mark>Bot API 7.2+</mark> Occurs whenever the biometric token was updated.<br><em>eventHandler</em> receives an object with the single field <em>isUpdated</em>, containing a boolean indicating whether the token was updated.</td>
</tr> </tr>
</tbody> </tbody>
</table> </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> <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>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>A special link is used to add bots to the attachment menu:</p>
<p><code>https://t.me/botusername?startattach</code> <p><code>https://t.me/botusername?startattach</code><br>or<br><code>https://t.me/botusername?startattach=command</code></p>
or
<code>https://t.me/botusername?startattach=command</code></p>
<blockquote> <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> </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 Mini App in the <em>start_param</em> field and in the GET parameter <em>tgWebAppStartParam</em>.</p> <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 Mini 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>The following link formats are also supported:</p>
<p><code>https://t.me/username?attach=botusername</code> <p><code>https://t.me/username?attach=botusername</code><br><code>https://t.me/username?attach=botusername&amp;startattach=command</code><br><code>https://t.me/+1234567890?attach=botusername</code><br><code>https://t.me/+1234567890?attach=botusername&amp;startattach=command</code></p>
<code>https://t.me/username?attach=botusername&amp;startattach=command</code> <p>These links open the Mini App in the attachment menu in the chat with a specific user. If the bot wasn&#39;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 Mini App in the <em>start_param</em> field and in the GET parameter <em>tgWebAppStartParam</em>.</p>
<code>https://t.me/+1234567890?attach=botusername</code> <p><mark>Bot API 6.1+</mark> supports a new link format:</p>
<code>https://t.me/+1234567890?attach=botusername&amp;startattach=command</code></p> <p><code>https://t.me/botusername?startattach&amp;choose=users+bots</code><br><code>https://t.me/botusername?startattach=command&amp;choose=groups+channels</code></p>
<p>These links open the Mini 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 Mini App in the <em>start_param</em> field and in the GET parameter <em>tgWebAppStartParam</em>.</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&#39;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 Mini 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> <h3><a class="anchor" name="testing-mini-apps" href="#testing-mini-apps"><i class="anchor-icon"></i></a>Testing Mini Apps</h3>
<p><code>https://t.me/botusername?startattach&amp;choose=users+bots</code> <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>
<code>https://t.me/botusername?startattach=command&amp;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 Mini App in the <em>start_param</em> field and in the GET parameter <em>tgWebAppStartParam</em>.</p>
<h3><a class="anchor" href="#testing-mini-apps" id="testing-mini-apps" name="testing-mini-apps"><i class="anchor-icon"></i></a>Testing Mini 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>To log in to the test environment, use either of the following:</p> <p>To log in to the test environment, use either of the following:</p>
<ul> <ul>
<li><strong>iOS:</strong> tap 10 times on the Settings icon &gt; Accounts &gt; Login to another account &gt; Test.</li> <li><strong>iOS:</strong> tap 10 times on the Settings icon &gt; Accounts &gt; Login to another account &gt; Test.</li>
@ -1226,7 +1224,7 @@ or
<blockquote> <blockquote>
<p><strong>Note:</strong> When working with the test environment, you may use HTTP links without TLS to test your Mini App.</p> <p><strong>Note:</strong> When working with the test environment, you may use HTTP links without TLS to test your Mini App.</p>
</blockquote> </blockquote>
<h4><a class="anchor" href="#debug-mode-for-mini-apps" id="debug-mode-for-mini-apps" name="debug-mode-for-mini-apps"><i class="anchor-icon"></i></a>Debug Mode for Mini Apps</h4> <h4><a class="anchor" name="debug-mode-for-mini-apps" href="#debug-mode-for-mini-apps"><i class="anchor-icon"></i></a>Debug Mode for Mini Apps</h4>
<p>Use these tools to find app-specific issues in your Mini App:</p> <p>Use these tools to find app-specific issues in your Mini App:</p>
<p><strong>Android</strong></p> <p><strong>Android</strong></p>
<ul> <ul>
@ -1237,16 +1235,17 @@ or
</ul> </ul>
<p><strong>Telegram Desktop on Windows and Linux</strong></p> <p><strong>Telegram Desktop on Windows and Linux</strong></p>
<ul> <ul>
<li>Download and launch the <a href="https://desktop.telegram.org/changelog#beta-version">Beta Version</a> of Telegram Desktop on <strong>Windows</strong> or <strong>Linux</strong> (not supported on Telegram Desktop for macOS yet).</li> <li>Download and launch the <a href="https://desktop.telegram.org/changelog#beta-version">Beta Version</a> of Telegram Desktop.</li>
<li>Go to <em>Settings &gt; Advanced &gt; Experimental settings &gt; Enable webview inspection</em>.</li> <li>Go to <em>Settings &gt; Advanced &gt; Experimental settings &gt; Enable webview inspection</em>.</li>
<li>Right click in the WebView and choose <em>Inspect</em>.</li> <li>Right click in the WebView and choose <em>Inspect</em>.</li>
</ul> </ul>
<p><strong>Telegram macOS</strong></p> <p><strong>Telegram macOS</strong></p>
<ul> <ul>
<li>Download and launch the <a href="https://telegram.org/dl/macos/beta">Beta Version</a> of Telegram macOS.</li> <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 Mini Apps".</li> <li>Quickly click 5 times on the Settings icon to open the debug menu and enable “Debug Mini Apps”.</li>
<li>Right click in the Mini App and choose <em>Inspect Element</em>.</li> <li>Right click in the Mini App and choose <em>Inspect Element</em>.</li>
</ul></div> </ul>
</div>
</div> </div>