Update content of files

This commit is contained in:
GitHub Action 2023-04-03 12:45:50 +00:00
parent 46988c13c0
commit 8b64c80fa2
8 changed files with 41 additions and 294 deletions

View file

@ -72,7 +72,7 @@
<p>Try <a href="https://t.me/durgerkingbot">@DurgerKingBot</a> or check out the <a href="/bots/webapps">dedicated guide to Web Apps</a> to build your own.</p>
</blockquote>
<h4><a class="anchor" name="receive-payments" href="#receive-payments"><i class="anchor-icon"></i></a>Receive Payments</h4>
<p>Bots can <a href="/bots/payments">receive payments</a> from more than <strong>200 countries</strong> through more than <strong>15</strong> integrated payment providers (which include support for <em>Apple Pay</em> and <em>Google Pay</em>). These payments are securely processed by the providers and Telegram takes no commission.</p>
<p>Bots can <a href="/bots/payments">receive payments</a> from more than <strong>200 countries</strong> through more than <strong>20</strong> integrated payment providers (which include support for <em>Apple Pay</em> and <em>Google Pay</em>). These payments are securely processed by the providers and Telegram takes no commission.</p>
<div class="blog_video_player_wrap" style="max-width: 600px; margin: 20px auto 20px;">
<video class="blog_video_player tl_blog_vid_autoplay" onclick="videoTogglePlay(this)" autoplay loop controls muted poster="/file/464001866/10889/GZJM7zyZ6UE.105798/32d6a4d1d4f0b13355" style="max-width: 600px;" title="If your pizza place can't deliver a clone army, you're buying pizza from the wrong shop." alt="Video: Ordering a pizza through a Telegram channel">
<source src="/file/464001417/10bf1/nIRBV1iB0NY.3878528.mp4/c95b8092ce1ece10ef" type="video/mp4">

View file

@ -323,17 +323,20 @@ width=44% /></a>
<blockquote>
<p>Check out <a href="https://t.me/gamebot">@GameBot</a> and <a href="https://t.me/gamee">@gamee</a> for examples of what you can do using our Gaming Platform.</p>
</blockquote>
<h3><a class="anchor" name="stickers" href="#stickers"><i class="anchor-icon"></i></a>Stickers</h3>
<p><a href="/stickers">Stickers</a> are a distinctive Telegram feature used by millions of users to share artwork every day. Stickers take many forms ranging from <strong>basic images</strong> to smooth <strong>vector animations</strong> and high-detail <strong>.WEBM videos</strong>.</p>
<p>All these formats are supported by our <a href="/bots/api#stickers">Bot API</a>, which allows bots to <strong>create</strong>, <strong>edit</strong>, <strong>delete</strong> and <strong>share</strong> new sticker packs on the fly. Telegram&#39;s <a href="/import-stickers">Import API</a> lets users <strong>migrate packs</strong> from other platforms and sticker apps.</p>
<p>To create a <strong>new sticker pack</strong>, follow these simple steps:</p>
<h3><a class="anchor" name="stickers-and-custom-emoji" href="#stickers-and-custom-emoji"><i class="anchor-icon"></i></a>Stickers and Custom Emoji</h3>
<p><a href="https://core.telegram.org/stickers">Stickers</a> and <a href="https://telegram.org/blog/custom-emoji">Custom Emoji</a> are a distinctive Telegram feature used by millions of users to share artwork every day. Stickers and custom emoji take many forms ranging from <strong>basic images</strong> to smooth <strong>vector animations</strong> and high-detail <strong>.WEBM videos</strong>.</p>
<p>All these formats are supported by our <a href="api#stickers">Bot API</a>, which allows bots to <strong>create</strong>, <strong>edit</strong>, <strong>delete</strong> and <strong>share</strong> new artwork packs on the fly. Telegram&#39;s <a href="https://core.telegram.org/import-stickers">Import API</a> lets users <strong>migrate packs</strong> from other platforms and sticker apps.</p>
<p><strong>Creating a new pack</strong><br>To create a <strong>new pack</strong>, simply:</p>
<ul>
<li><strong>Upload</strong> a new sticker file via <a href="/bots/api#uploadstickerfile">uploadStickerFile</a>. Repeat for all the stickers in the set. You will use the returned <a href="/bots/api#file">files</a> in the next step, so keep them around.</li>
<li><strong>Create</strong> a new sticker pack via <a href="/bots/api#createnewstickerset">createStickerSet</a>. Attach the first sticker as a <a href="/bots/api#file">file</a> you collected in <strong>step 1</strong> and remember to only specify <strong>one</strong> of the three avaiable fields <code>png_sticker</code>, <code>tgs_sticker</code> and <code>webm_sticker</code> depending on which sticker format you uploaded.</li>
<li><strong>Complete</strong> the pack by adding each remaining sticker in sequence via <a href="/bots/api#addstickertoset">addStickerToSet</a>.</li>
<li><strong>Prepare</strong> your artwork following our <a href="https://core.telegram.org/stickers">technical requirements</a>.</li>
<li><strong>Create</strong> a new sticker pack via <a href="api#createnewstickerset">createStickerSet</a>. Set <code>sticker_type</code> to <em>regular</em> to create a sticker pack or to <em>custom emoji</em> to create a pack of custom emoji. Attach the <a href="api#file">files</a> you wish to include in the pack as an array of <a href="https://core.telegram.org/bots#inputsticker">InputSticker</a></li>
<li>You can use <a href="api#addstickertoset">addStickerToSet</a> to add stickers or emoji later on.</li>
</ul>
<p><strong>Additional features</strong><br>Regular stickers and custom emoji support <strong>keywords</strong> that users can type to quickly find the respective artwork this can be useful when a sticker doesn&#39;t have obvious ties to a specific emoji. You can use the <code>keywords</code> parameter in <a href="https://core.telegram.org/bots#inputsticker">InputSticker</a> to specify them.</p>
<p>Custom emoji additionally support <strong>adaptive colors</strong> they will always match the current context (e.g., white on photos, accent color when used as status, etc.); to enable this feature, use the <code>needs_repainting</code> parameter in <a href="api#createnewstickerset">createStickerSet</a>.</p>
<p>Once you&#39;re done creating and sharing your artwork, don&#39;t forget to check out our <a href="api#stickers">remaining sticker methods</a> to find out how to <a href="api#setstickersetthumb">edit</a>, <a href="api#deletestickerfromset">delete</a> and even <a href="api#setstickerpositioninset">reorder</a> your pack. </p>
<blockquote>
<p>Once you&#39;re done, don&#39;t forget to check out our <a href="/bots/api#stickers">remaining sticker methods</a> to find out how to <a href="/bots/api#setstickersetthumb">edit</a>, <a href="/bots/api#deletestickerfromset">delete</a> and even <a href="/bots/api#setstickerpositioninset">reorder</a> your pack.<br>Note that these methods will only work on packs <strong>created by the bot that is calling them</strong>.</p>
<p>Note that these methods will only work on packs <strong>created by the bot that is calling them</strong>.</p>
</blockquote>
<h3><a class="anchor" name="language-support" href="#language-support"><i class="anchor-icon"></i></a>Language Support</h3>
<p>Bots can tailor their interfaces to <strong>support multiple languages</strong> updating inputs and information on the fly. A users <a href="/bots/api#user">language_code</a> is included in every relevant <a href="/bots/api#update">update</a> as an <a href="https://en.wikipedia.org/wiki/IETF_language_tag">IETF language tag</a>, allowing bots to adapt accordingly. </p>
@ -342,6 +345,7 @@ width=44% /></a>
<li>Your interfaces, texts and <a href="/bots/api#answerinlinequery">inline results</a> should adapt seamlessly to the <em>language_code</em>, without user intervention.</li>
<li>Connected <a href="/bots/webapps">WebApps</a> will receive the user&#39;s <em>language_code</em> your HTML page should account for it.</li>
<li><a href="/bots/html5-games">HTML5 Games</a> can obtain language information if you specify it as a <a href="/bots/games#using-url-parameters">URL parameter</a>. You can generate this parameter from the <em>language_code</em> field in the <a href="/bots/api#user">User</a> object served with the initial game <a href="/bots/api#callbackquery">CallbackQuery</a>.</li>
<li>The bot&#39;s <strong>Description</strong> and <strong>About text</strong> can be natively localized with the respective <a href="https://core.telegram.org/bots/api#setmydescription">methods</a>.</li>
<li>Command lists can also be specified for individual languages more on this <a href="#commands">here</a>.</li>
</ul>
<div class="blog_video_player_wrap" style="max-width: 400px; margin: 20px auto 20px;">
@ -497,9 +501,12 @@ width=44% /></a>
<p>You can also add a photo or video to this field with <code>Edit Description Picture</code> in <a href="https://t.me/botfather">@BotFather</a>.</p>
</blockquote>
<p>Additionally, just like normal users, bots also come with a <strong>short bio</strong> available on their profile. If you didn&#39;t specify this field while first creating your bot, you can set it at any time with the <code>/setabouttext</code> command in <a href="https://t.me/botfather">@BotFather</a>. Users can interact with many bots and they won&#39;t have access to their description after starting them having a quick reminder of the bot&#39;s purpose can be very useful.</p>
<blockquote>
<p>Note that both the <strong>Description</strong> and the <strong>About text</strong> can be <a href="https://core.telegram.org/bots/api#setmydescription">natively localized</a> each user will automatically see the correct translation for their language.</p>
</blockquote>
<p>Bots can also have a <strong>profile picture</strong> you should pick something unique and original so that users can find it in their chat list at a glance.</p>
<blockquote>
<p>Once set, the description, about text and profile pic can be <strong>replaced</strong> but never fully <strong>removed</strong>.</p>
<p>Once set, the bot profile picture can be <strong>replaced</strong> but never fully <strong>removed</strong>.</p>
</blockquote>
<h4><a class="anchor" name="generating-an-authentication-token" href="#generating-an-authentication-token"><i class="anchor-icon"></i></a>Generating an authentication token</h4>
<p>If your existing token is <strong>compromised</strong> or <strong>you lost it</strong> for some reason, use the <code>/token</code> command to generate a new one.</p>

View file

@ -4,10 +4,10 @@
<meta charset="utf-8">
<title>Web Apps for Bots</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta property="description" content="Telegram bots can completely replace any website. They support seamless authorization, integrated payments via 15 payment…">
<meta property="description" content="Telegram bots can completely replace any website. They support seamless authorization, integrated payments via 20 payment…">
<meta property="og:title" content="Web Apps for Bots">
<meta property="og:image" content="https://blogfork.telegram.org/file/464001702/1194c/mBQhTbIWqw8.451557/08727d5d763e24d750">
<meta property="og:description" content="Telegram bots can completely replace any website. They support seamless authorization, integrated payments via 15 payment…">
<meta property="og:description" content="Telegram bots can completely replace any website. They support seamless authorization, integrated payments via 20 payment…">
<link rel="icon" type="image/svg+xml" href="/img/website_icon.svg?4">
<link rel="apple-touch-icon" sizes="180x180" href="/img/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/img/favicon-32x32.png">
@ -44,7 +44,7 @@
<div id="dev_page_content"><!-- scroll_nav -->
<p>Telegram bots can completely replace <strong>any website</strong>. They support <a href="https://telegram.org/blog/privacy-discussions-web-bots#meet-seamless-web-bots">seamless authorization</a>, <a href="https://core.telegram.org/bots/payments">integrated payments</a> via <strong>15</strong> payment providers (with <em>Google Pay</em> and <em>Apple Pay</em> out of the box), delivering tailored push notifications to users, and <a href="https://core.telegram.org/bots">much more</a>.</p>
<p>Telegram bots can completely replace <strong>any website</strong>. They support <a href="https://telegram.org/blog/privacy-discussions-web-bots#meet-seamless-web-bots">seamless authorization</a>, <a href="https://core.telegram.org/bots/payments">integrated payments</a> via <strong>20</strong> payment providers (with <em>Google Pay</em> and <em>Apple Pay</em> out of the box), delivering tailored push notifications to users, and <a href="https://core.telegram.org/bots">much more</a>.</p>
<p>With <strong>Web Apps</strong>, bots get a whole new dimension. Bot developers can create <strong>infinitely flexible interfaces</strong> with <em>JavaScript</em>, the most widely used programming language in the world.</p>
<div class="blog_video_player_wrap" style="max-width: 600px; margin: 20px auto 20px;">
<video class="blog_video_player tl_blog_vid_autoplay" onclick="videoTogglePlay(this)" autoplay loop controls muted poster="/file/464001434/100bf/eWprjdgzEbE.100386/644bbea83084f44c8f" style="max-width: 600px;" title="console.log('Vive la révolution')" alt="Bot Revolution">

View file

@ -1,267 +0,0 @@
<!DOCTYPE html>
<html class="">
<head>
<meta charset="utf-8">
<title>Telegram Stickers</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta property="description" content="All users can create, send and share custom artwork using Telegram&#39;s open platform for stickers and emoji. Stickers take…">
<meta property="og:title" content="Telegram Stickers">
<meta property="og:image" content="">
<meta property="og:description" content="All users can create, send and share custom artwork using Telegram&#39;s open platform for stickers and emoji. Stickers take…">
<link rel="icon" type="image/svg+xml" href="/img/website_icon.svg?4">
<link rel="apple-touch-icon" sizes="180x180" href="/img/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/img/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/img/favicon-16x16.png">
<link rel="alternate icon" href="/img/favicon.ico" type="image/x-icon" />
<link href="/css/bootstrap.min.css?3" rel="stylesheet">
<link href="/css/telegram.css?236" rel="stylesheet" media="screen">
<style>
</style>
</head>
<body class="preload">
<div class="dev_page_wrap">
<div class="dev_page_head navbar navbar-static-top navbar-tg">
<div class="navbar-inner">
<div class="container clearfix">
<ul class="nav navbar-nav navbar-right hidden-xs"><li class="navbar-twitter"><a href="https://twitter.com/telegram" target="_blank" data-track="Follow/Twitter" onclick="trackDlClick(this, event)"><i class="icon icon-twitter"></i><span> Twitter</span></a></li></ul>
<ul class="nav navbar-nav">
<li><a href="//telegram.org/">Home</a></li>
<li class="hidden-xs"><a href="//telegram.org/faq">FAQ</a></li>
<li class="hidden-xs"><a href="//telegram.org/apps">Apps</a></li>
<li class=""><a href="/api">API</a></li>
<li class=""><a href="/mtproto">Protocol</a></li>
<li class=""><a href="/schema">Schema</a></li>
</ul>
</div>
</div>
</div>
<div class="container clearfix">
<div class="dev_page">
<div id="dev_page_content_wrap" class=" ">
<div class="dev_page_bread_crumbs"></div>
<h1 id="dev_page_title">Telegram Stickers</h1>
<div id="dev_page_content"><p>All users can create, send and share custom artwork using Telegram&#39;s <strong>open platform</strong> for stickers and <a href="#custom-emoji">emoji</a>. Stickers take many forms from <strong>basic images</strong> to stunning <strong>vector animations</strong>.</p>
<p>To start building your own custom sets, click below:</p>
<ul>
<li><strong>Creating Stickers</strong><ul>
<li><a href="#creating-animations">Animated</a></li>
<li><a href="#video-stickers-and-emoji">Video</a></li>
<li><a href="#static-stickers-and-emoji">Static</a></li>
</ul>
</li>
<li><strong>Uploading Stickers</strong><ul>
<li><a href="#using-the-stickers-bot">How to Upload</a></li>
<li><a href="#importing-stickers-from-other-apps">Importing from other apps</a></li>
</ul>
</li>
</ul>
<h3><a class="anchor" name="animated-stickers-and-emoji" href="#animated-stickers-and-emoji"><i class="anchor-icon"></i></a>Animated Stickers and Emoji</h3>
<p>Telegram stickers and emoji can move with smooth <strong>60 FPS animations</strong> to bring your characters to life in high resolution.</p>
<blockquote>
<p>Animations require Telegram&#39;s unique <strong>.TGS format</strong> click <a href="#video-stickers-and-emoji">here</a> for <strong>Video Stickers and Emoji</strong> made in <strong>.WEBM format</strong>.</p>
</blockquote>
<h4><a class="anchor" name="creating-animations" href="#creating-animations"><i class="anchor-icon"></i></a>Creating Animations</h4>
<p>To create vector-animated stickers and emoji you will need the following:</p>
<ol>
<li>Any vector graphics editor that allows exporting vector objects to Adobe After Effects to turn them into animations.</li>
<li>Adobe After Effects.</li>
<li>The <a href="https://github.com/TelegramMessenger/bodymovin-extension">Bodymovin-TG</a> plugin, a fork of Bodymovin for Adobe After Effects that can be used to export animations to Telegram&#39;s <strong>.TGS format</strong>.</li>
</ol>
<blockquote>
<p>The Lottie-based .TGS format allows for incredibly detailed animations that are <strong>less than 30 KB</strong> in size six times smaller than the average photo.</p>
</blockquote>
<h4><a class="anchor" name="animation-requirements" href="#animation-requirements"><i class="anchor-icon"></i></a>Animation Requirements</h4>
<ul>
<li>The canvas size must be <strong>512х512 pixels</strong>.</li>
<li>Objects must not leave the canvas.</li>
<li>Animation length must not exceed <strong>3 seconds</strong>.</li>
<li>All animations must be looped.</li>
<li>Final file size must not exceed <strong>64 KB</strong> after rendering in Bodymovin.</li>
<li>All animations must run at <strong>60 Frames Per Second</strong>.</li>
<li>You <strong>must not</strong> use the following Adobe After Effects functionality when animating your artwork: <em>Auto-bezier keys, Expressions, Masks, Layer Effects, Images, Solids, Texts, 3D Layers, Merge Paths, Star Shapes, Gradient Strokes, Repeaters, Time Stretching, Time Remapping, Auto-Oriented Layers</em>.</li>
</ul>
<h4><a class="anchor" name="uploading-animations" href="#uploading-animations"><i class="anchor-icon"></i></a>Uploading Animations</h4>
<p>When your files are ready, send the <code>/newanimated</code> command to the <a href="https://t.me/Stickers">@Stickers</a> bot then send it the .TGS files.</p>
<p>To upload emoji, send <code>/newemojipack</code> to <a href="https://t.me/Stickers">@Stickers</a>. The requirements for .TGS stickers and emoji are <strong>exactly the same</strong>.</p>
<p>Your set will need an icon. Icons for your sets must be <strong>100x100 pixels</strong>, with a looped animation not exceeding 3 seconds.</p>
<hr>
<h3><a class="anchor" name="video-stickers-and-emoji" href="#video-stickers-and-emoji"><i class="anchor-icon"></i></a>Video Stickers and Emoji</h3>
<p>Stickers and emoji can also be built with <strong>.WEBM</strong> an open-source format that is compatible with many graphics editors to create high-detail images. Requires <a href="https://telegram.org/apps">Telegram 8.5</a> or higher.</p>
<!--
> This format also allows you to [import custom stickers](https://core.telegram.org/import-stickers) to Telegram from other apps.
-->
<h4><a class="anchor" name="creating-videos" href="#creating-videos"><i class="anchor-icon"></i></a>Creating Videos</h4>
<p>To create stickers and emoji from video files, you only need <a href="https://core.telegram.org/stickers/webm-vp9-encoding">editing software</a> that lets you export your project as a <strong>.WEBM video file</strong>.</p>
<h4><a class="anchor" name="video-requirements" href="#video-requirements"><i class="anchor-icon"></i></a>Video Requirements</h4>
<blockquote>
<p>See this <a href="https://core.telegram.org/stickers/webm-vp9-encoding">Encoding .WEBM with VP9 Guide</a> for details </p>
</blockquote>
<ul>
<li>For stickers, one side must be exactly <strong>512 pixels</strong> in size the other side can be 512 pixels <strong>or less</strong>.</li>
<li>For emoji, the video must be exactly <strong>100x100 pixels</strong> in size</li>
<li>Video duration must not exceed <strong>3 seconds</strong>.</li>
<li>Frame rate can be up to <strong>30 FPS</strong>.</li>
<li>Video should be looped for optimal user experience.</li>
<li>Video size should not exceed <strong>256 KB</strong>. </li>
<li>Video must be in .WEBM format encoded with the <strong>VP9 codec</strong>.</li>
<li>Video must have <strong>no audio stream</strong>.</li>
</ul>
<h4><a class="anchor" name="uploading-videos" href="#uploading-videos"><i class="anchor-icon"></i></a>Uploading Videos</h4>
<p>Once your stickers are ready, send the <code>/newvideo</code> command to the <a href="https://t.me/Stickers">@Stickers</a> bot then send it the .WEBM files.</p>
<p>To upload emoji, send <code>/newemojipack</code> to <a href="https://t.me/Stickers">@Stickers</a>. Note that video emoji need to be a <a href="#video-requirements">smaller resolution</a> than stickers.</p>
<p>Your set will need a .WEBM icon. Icons for video sticker sets must be <strong>100x100 pixels</strong>, with a looped animation not exceeding 3 seconds.</p>
<hr>
<h3><a class="anchor" name="static-stickers-and-emoji" href="#static-stickers-and-emoji"><i class="anchor-icon"></i></a>Static Stickers and Emoji</h3>
<p>Turn your favorite drawings and memes into packs of images that are easily to share and access on any device.</p>
<h4><a class="anchor" name="creating-images" href="#creating-images"><i class="anchor-icon"></i></a>Creating Images</h4>
<p>To create static stickers and emoji for Telegram, you only need an image editor that lets you export in <strong>.PNG</strong> or <strong>.WEBP</strong> format.</p>
<h4><a class="anchor" name="image-requirements" href="#image-requirements"><i class="anchor-icon"></i></a>Image Requirements</h4>
<ul>
<li>For stickers, one side must be exactly <strong>512 pixels</strong> in size the other side can be 512 pixels <strong>or less</strong>.</li>
<li>For emoji, images must be exactly <strong>100x100 pixels</strong> in size.</li>
<li>The image file must be in either .PNG or .WEBP format.</li>
</ul>
<blockquote>
<p>Tip: a transparent background, white stroke and black shadow effect will make your sticker stand out.</p>
</blockquote>
<h4><a class="anchor" name="uploading-images" href="#uploading-images"><i class="anchor-icon"></i></a>Uploading Images</h4>
<p>Once your stickers are ready, start a chat with the <a href="https://t.me/Stickers">@Stickers</a> bot and send the command <code>/newpack</code>. Your sticker set can also have a <strong>custom icon</strong> a <strong>100x100 pixel image</strong> in .PNG or .WEBP format.</p>
<p>To upload emoji, send <code>/newemojipack</code> to <a href="https://t.me/Stickers">@Stickers</a>. Note that static emoji need to be a <a href="#image-requirements">smaller resolution</a> than stickers.</p>
<blockquote>
<p>For more info about using the <a href="https://t.me/Stickers">@Stickers</a> bot, click <a href="#using-the-stickers-bot">here</a>.</p>
</blockquote>
<h3><a class="anchor" name="custom-emoji" href="#custom-emoji"><i class="anchor-icon"></i></a>Custom Emoji</h3>
<p>As of version 8.9 released in August 2022, Telegram apps support <a href="https://telegram.org/blog/custom-emoji">custom emoji</a>.<br>Emoji use the same technology as stickers, making it very easy to convert your art to <strong>both formats</strong>. Check out the <a href="#video-requirements">video</a> and <a href="#image-requirements">image</a> sections for details on the different size requirements.<br>To upload them, use the <code>/newemojipack</code> command in <a href="https://t.me/stickers">@Stickers</a>. </p>
<blockquote>
<p>Everyone can create new custom emoji, however, adding and using custom sets is currently an exclusive <a href="https://t.me/premium">feature</a> of <a href="https://telegram.org/blog/700-million-and-premium">Telegram Premium</a> users.</p>
</blockquote>
<hr>
<h3><a class="anchor" name="using-the-stickers-bot" href="#using-the-stickers-bot"><i class="anchor-icon"></i></a>Using the @Stickers Bot</h3>
<p>Publishing and <a href="#editing-a-sticker-pack">editing</a> sticker packs is <strong>simple</strong> and <strong>automated</strong>, thanks to the <a href="https://t.me/Stickers">@Stickers</a> bot. It can also show you <a href="#sticker-stats">detailed stats</a> for stickers and packs.</p>
<h4><a class="anchor" name="publishing-a-sticker-pack" href="#publishing-a-sticker-pack"><i class="anchor-icon"></i></a>Publishing a Sticker Pack</h4>
<p>Once you open the bot, press the <strong>Start button</strong> or send <code>/start</code>. The bot will reply, describing its different commands. It will walk you through step by step, but here&#39;s a quick guide:</p>
<ul>
<li>Open the <a href="https://t.me/TelegramTips/283">bot menu</a> in the message bar and select the <code>/newpack</code> command to start uploading <a href="#uploading-images">static stickers</a>. For <a href="#uploading-animations">animated stickers</a> use <code>/newanimated</code>, or <code>/newvideo</code> for <a href="#uploading-videos">video stickers</a>.</li>
<li>Give your sticker pack a <strong>name</strong> this name will appear <strong>as the title</strong> for your pack in the sticker panel.</li>
<li>Send your first sticker file an <a href="#static-stickers-and-emoji">image file</a>, <a href="#animated-stickers-and-emoji">.TGS file</a>, or <a href="#video-stickers-and-emoji">.WEBM file</a>. Using one of the <a href="https://telegram.org/apps#desktop-apps">Desktop</a> or <a href="https://telegram.org/apps#web-apps">Web apps</a> is <strong>strongly recommended</strong>.</li>
<li>Choose an <strong>emoji</strong> that corresponds to your sticker this lets users quickly find it with <a href="https://t.me/TelegramTips/294">sticker suggestions</a>.</li>
<li>Continue uploading all your sticker files.</li>
<li>When you&#39;re done uploading, send the <code>/publish</code> command.</li>
<li>Set an icon for your pack <a href="#static-stickers-and-emoji">static sticker</a> packs can <code>/skip</code> this step, but it is required for <a href="#animated-stickers-and-emoji">animated</a> or <a href="#video-stickers-and-emoji">video stickers</a>.</li>
<li>Choose a <strong>short name</strong> for your sticker pack it will be used to create a <strong>shareable link</strong> for the pack like <a href="https://t.me/addstickers/HotCherry">t.me/addstickers/HotCherry</a>. Congratulations! Your stickers are ready for the world.</li>
</ul>
<blockquote>
<p>After your pack is finished, you can send <code>/start</code> again to see the full list of commands, or use the bot menu to create another pack, <a href="#editing-a-sticker-pack">edit an existing pack</a>, or <a href="#sticker-stats">see statistics</a>.</p>
</blockquote>
<h4><a class="anchor" name="editing-a-sticker-pack" href="#editing-a-sticker-pack"><i class="anchor-icon"></i></a>Editing a Sticker Pack</h4>
<p>Once you&#39;ve created <a href="#publishing-a-sticker-pack">one or more packs</a>, you can <strong>add</strong>, <strong>edit</strong> or <strong>replace stickers</strong> in your existing sets.</p>
<ul>
<li>Use <code>/addsticker</code> if you have more artwork you&#39;d like to add to a set. Choose one of your packs from the list the upload process is <a href="#publishing-a-sticker-pack">exactly the same</a> as before.</li>
<li>Use <code>/editsticker</code> to <strong>change the emoji</strong> you assigned to a sticker select the pack and sticker, or simply send the intended sticker from your panel.</li>
<li>Use <code>/replacesticker</code> if you want to swap out an older sticker for an updated version.</li>
<li>Use <code>/ordersticker</code> to <strong>change the order</strong> of stickers in your pack. Choose the pack and one of the stickers, then choose another sticker to appear before it (to the left) in the panel.</li>
<li>Use <code>/delsticker</code> to <strong>remove a sticker</strong> from the pack you can always use <code>/addsticker</code> to add it again if you change your mind.</li>
<li>Use <code>/seticon</code> to set an icon for your pack or to <strong>change the icon</strong>. Static sticker packs without a custom icon will use the first sticker as its icon.</li>
</ul>
<blockquote>
<p>Edits to your sticker packs may take up to an hour to update for all users.</p>
</blockquote>
<h4><a class="anchor" name="sticker-stats" href="#sticker-stats"><i class="anchor-icon"></i></a>Sticker Stats</h4>
<p>There are a number of commands that let you <strong>see statistics</strong> for your stickers here&#39;s what they all do:</p>
<ul>
<li><code>/packstats</code> shows how many times your pack was <strong>used</strong>, <strong>installed</strong> and <strong>removed</strong> both recently and overall.</li>
<li><code>/stats</code> shows how many times an <strong>individual sticker</strong> has been sent.</li>
<li><code>/top</code> shows the most popular stickers from <strong>all your packs</strong>.</li>
<li><code>/packtop</code> shows your most popular sticker packs and their <strong>individual stats</strong>.</li>
<li><code>/topbypack</code> shows the top stickers from a <strong>specific sticker pack</strong>.</li>
<li><code>/packusagetop</code> shows your most popular packs by <strong>recent usage</strong>.</li>
</ul>
<blockquote>
<p>You can filter the results of <code>/top</code>, <code>/packtop</code>, <code>/topbypack</code> and <code>/packusagetop</code>. For example <code>/top 20</code> would show your top 20 stickers, and <code>/topbypack -5</code> would show the 5 least popular stickers from a pack.</p>
</blockquote>
<h3><a class="anchor" name="importing-stickers-from-other-apps" href="#importing-stickers-from-other-apps"><i class="anchor-icon"></i></a>Importing Stickers From Other Apps</h3>
<p>Developers can build apps to automate importing stickers using Telegrams API. With these tools, users can instantly bring their favorite stickers to Telegram.</p>
<h4><a class="anchor" name="for-developers" href="#for-developers"><i class="anchor-icon"></i></a>For Developers</h4>
<p>As of version 7.8, Telegram apps support a simple API for importing stickers. Developers can use this to <strong>build apps</strong> or <strong>add tools</strong> to apps that let users instantly transfer stickers to Telegram or create custom stickers from photos or videos.</p>
<blockquote>
<p>Click <a href="https://core.telegram.org/import-stickers#sticker-formats">here</a> for more information about developing apps for importing stickers.</p>
</blockquote>
<h4><a class="anchor" name="for-users" href="#for-users"><i class="anchor-icon"></i></a>For Users</h4>
<p>Users can find apps that allow them to import stickers or quickly <strong>generate their own</strong>. They can also easily <a href="#publishing-a-sticker-pack">publish custom stickers</a> with the <a href="https://t.me/Stickers">@Stickers</a> bot using <a href="#static-stickers-and-emoji">.PNG</a>, <a href="#static-stickers-and-emoji">.WEBP</a> or <a href="#video-stickers-and-emoji">.WEBM</a> files for stickers from other apps.</p>
</div>
</div>
</div>
</div>
<div class="footer_wrap">
<div class="footer_columns_wrap footer_desktop">
<div class="footer_column footer_column_telegram">
<h5>Telegram</h5>
<div class="footer_telegram_description"></div>
Telegram is a cloud-based mobile and desktop messaging app with a focus on security and speed.
</div>
<div class="footer_column">
<h5><a href="//telegram.org/faq">About</a></h5>
<ul>
<li><a href="//telegram.org/faq">FAQ</a></li>
<li><a href="//telegram.org/privacy">Privacy</a></li>
<li><a href="//telegram.org/press">Press</a></li>
</ul>
</div>
<div class="footer_column">
<h5><a href="//telegram.org/apps#mobile-apps">Mobile Apps</a></h5>
<ul>
<li><a href="//telegram.org/dl/ios">iPhone/iPad</a></li>
<li><a href="//telegram.org/android">Android</a></li>
<li><a href="//telegram.org/dl/web">Mobile Web</a></li>
</ul>
</div>
<div class="footer_column">
<h5><a href="//telegram.org/apps#desktop-apps">Desktop Apps</a></h5>
<ul>
<li><a href="//desktop.telegram.org/">PC/Mac/Linux</a></li>
<li><a href="//macos.telegram.org/">macOS</a></li>
<li><a href="//telegram.org/dl/web">Web-browser</a></li>
</ul>
</div>
<div class="footer_column footer_column_platform">
<h5><a href="/">Platform</a></h5>
<ul>
<li><a href="/api">API</a></li>
<li><a href="//translations.telegram.org/">Translations</a></li>
<li><a href="//instantview.telegram.org/">Instant View</a></li>
</ul>
</div>
</div>
<div class="footer_columns_wrap footer_mobile">
<div class="footer_column">
<h5><a href="//telegram.org/faq">About</a></h5>
</div>
<div class="footer_column">
<h5><a href="//telegram.org/blog">Blog</a></h5>
</div>
<div class="footer_column">
<h5><a href="//telegram.org/apps">Apps</a></h5>
</div>
<div class="footer_column">
<h5><a href="/">Platform</a></h5>
</div>
<div class="footer_column">
<h5><a href="https://twitter.com/telegram" target="_blank" data-track="Follow/Twitter" onclick="trackDlClick(this, event)">Twitter</a></h5>
</div>
</div>
</div>
</div>
<script src="/js/main.js?47"></script>
<script>backToTopInit("Go up");
removePreloadInit();
</script>
</body>
</html>

View file

@ -72,7 +72,7 @@
<p>Try <a href="https://t.me/durgerkingbot">@DurgerKingBot</a> or check out the <a href="/bots/webapps">dedicated guide to Web Apps</a> to build your own.</p>
</blockquote>
<h4><a class="anchor" name="receive-payments" href="#receive-payments"><i class="anchor-icon"></i></a>Receive Payments</h4>
<p>Bots can <a href="/bots/payments">receive payments</a> from more than <strong>200 countries</strong> through more than <strong>15</strong> integrated payment providers (which include support for <em>Apple Pay</em> and <em>Google Pay</em>). These payments are securely processed by the providers and Telegram takes no commission.</p>
<p>Bots can <a href="/bots/payments">receive payments</a> from more than <strong>200 countries</strong> through more than <strong>20</strong> integrated payment providers (which include support for <em>Apple Pay</em> and <em>Google Pay</em>). These payments are securely processed by the providers and Telegram takes no commission.</p>
<div class="blog_video_player_wrap" style="max-width: 600px; margin: 20px auto 20px;">
<video class="blog_video_player tl_blog_vid_autoplay" onclick="videoTogglePlay(this)" autoplay loop controls muted poster="/file/464001866/10889/GZJM7zyZ6UE.105798/32d6a4d1d4f0b13355" style="max-width: 600px;" title="If your pizza place can't deliver a clone army, you're buying pizza from the wrong shop." alt="Video: Ordering a pizza through a Telegram channel">
<source src="/file/464001417/10bf1/nIRBV1iB0NY.3878528.mp4/c95b8092ce1ece10ef" type="video/mp4">

View file

@ -323,17 +323,20 @@ width=44% /></a>
<blockquote>
<p>Check out <a href="https://t.me/gamebot">@GameBot</a> and <a href="https://t.me/gamee">@gamee</a> for examples of what you can do using our Gaming Platform.</p>
</blockquote>
<h3><a class="anchor" name="stickers" href="#stickers"><i class="anchor-icon"></i></a>Stickers</h3>
<p><a href="/stickers">Stickers</a> are a distinctive Telegram feature used by millions of users to share artwork every day. Stickers take many forms ranging from <strong>basic images</strong> to smooth <strong>vector animations</strong> and high-detail <strong>.WEBM videos</strong>.</p>
<p>All these formats are supported by our <a href="/bots/api#stickers">Bot API</a>, which allows bots to <strong>create</strong>, <strong>edit</strong>, <strong>delete</strong> and <strong>share</strong> new sticker packs on the fly. Telegram&#39;s <a href="/import-stickers">Import API</a> lets users <strong>migrate packs</strong> from other platforms and sticker apps.</p>
<p>To create a <strong>new sticker pack</strong>, follow these simple steps:</p>
<h3><a class="anchor" name="stickers-and-custom-emoji" href="#stickers-and-custom-emoji"><i class="anchor-icon"></i></a>Stickers and Custom Emoji</h3>
<p><a href="https://core.telegram.org/stickers">Stickers</a> and <a href="https://telegram.org/blog/custom-emoji">Custom Emoji</a> are a distinctive Telegram feature used by millions of users to share artwork every day. Stickers and custom emoji take many forms ranging from <strong>basic images</strong> to smooth <strong>vector animations</strong> and high-detail <strong>.WEBM videos</strong>.</p>
<p>All these formats are supported by our <a href="api#stickers">Bot API</a>, which allows bots to <strong>create</strong>, <strong>edit</strong>, <strong>delete</strong> and <strong>share</strong> new artwork packs on the fly. Telegram&#39;s <a href="https://core.telegram.org/import-stickers">Import API</a> lets users <strong>migrate packs</strong> from other platforms and sticker apps.</p>
<p><strong>Creating a new pack</strong><br>To create a <strong>new pack</strong>, simply:</p>
<ul>
<li><strong>Upload</strong> a new sticker file via <a href="/bots/api#uploadstickerfile">uploadStickerFile</a>. Repeat for all the stickers in the set. You will use the returned <a href="/bots/api#file">files</a> in the next step, so keep them around.</li>
<li><strong>Create</strong> a new sticker pack via <a href="/bots/api#createnewstickerset">createStickerSet</a>. Attach the first sticker as a <a href="/bots/api#file">file</a> you collected in <strong>step 1</strong> and remember to only specify <strong>one</strong> of the three avaiable fields <code>png_sticker</code>, <code>tgs_sticker</code> and <code>webm_sticker</code> depending on which sticker format you uploaded.</li>
<li><strong>Complete</strong> the pack by adding each remaining sticker in sequence via <a href="/bots/api#addstickertoset">addStickerToSet</a>.</li>
<li><strong>Prepare</strong> your artwork following our <a href="https://core.telegram.org/stickers">technical requirements</a>.</li>
<li><strong>Create</strong> a new sticker pack via <a href="api#createnewstickerset">createStickerSet</a>. Set <code>sticker_type</code> to <em>regular</em> to create a sticker pack or to <em>custom emoji</em> to create a pack of custom emoji. Attach the <a href="api#file">files</a> you wish to include in the pack as an array of <a href="https://core.telegram.org/bots#inputsticker">InputSticker</a></li>
<li>You can use <a href="api#addstickertoset">addStickerToSet</a> to add stickers or emoji later on.</li>
</ul>
<p><strong>Additional features</strong><br>Regular stickers and custom emoji support <strong>keywords</strong> that users can type to quickly find the respective artwork this can be useful when a sticker doesn&#39;t have obvious ties to a specific emoji. You can use the <code>keywords</code> parameter in <a href="https://core.telegram.org/bots#inputsticker">InputSticker</a> to specify them.</p>
<p>Custom emoji additionally support <strong>adaptive colors</strong> they will always match the current context (e.g., white on photos, accent color when used as status, etc.); to enable this feature, use the <code>needs_repainting</code> parameter in <a href="api#createnewstickerset">createStickerSet</a>.</p>
<p>Once you&#39;re done creating and sharing your artwork, don&#39;t forget to check out our <a href="api#stickers">remaining sticker methods</a> to find out how to <a href="api#setstickersetthumb">edit</a>, <a href="api#deletestickerfromset">delete</a> and even <a href="api#setstickerpositioninset">reorder</a> your pack. </p>
<blockquote>
<p>Once you&#39;re done, don&#39;t forget to check out our <a href="/bots/api#stickers">remaining sticker methods</a> to find out how to <a href="/bots/api#setstickersetthumb">edit</a>, <a href="/bots/api#deletestickerfromset">delete</a> and even <a href="/bots/api#setstickerpositioninset">reorder</a> your pack.<br>Note that these methods will only work on packs <strong>created by the bot that is calling them</strong>.</p>
<p>Note that these methods will only work on packs <strong>created by the bot that is calling them</strong>.</p>
</blockquote>
<h3><a class="anchor" name="language-support" href="#language-support"><i class="anchor-icon"></i></a>Language Support</h3>
<p>Bots can tailor their interfaces to <strong>support multiple languages</strong> updating inputs and information on the fly. A users <a href="/bots/api#user">language_code</a> is included in every relevant <a href="/bots/api#update">update</a> as an <a href="https://en.wikipedia.org/wiki/IETF_language_tag">IETF language tag</a>, allowing bots to adapt accordingly. </p>
@ -342,6 +345,7 @@ width=44% /></a>
<li>Your interfaces, texts and <a href="/bots/api#answerinlinequery">inline results</a> should adapt seamlessly to the <em>language_code</em>, without user intervention.</li>
<li>Connected <a href="/bots/webapps">WebApps</a> will receive the user&#39;s <em>language_code</em> your HTML page should account for it.</li>
<li><a href="/bots/html5-games">HTML5 Games</a> can obtain language information if you specify it as a <a href="/bots/games#using-url-parameters">URL parameter</a>. You can generate this parameter from the <em>language_code</em> field in the <a href="/bots/api#user">User</a> object served with the initial game <a href="/bots/api#callbackquery">CallbackQuery</a>.</li>
<li>The bot&#39;s <strong>Description</strong> and <strong>About text</strong> can be natively localized with the respective <a href="https://core.telegram.org/bots/api#setmydescription">methods</a>.</li>
<li>Command lists can also be specified for individual languages more on this <a href="#commands">here</a>.</li>
</ul>
<div class="blog_video_player_wrap" style="max-width: 400px; margin: 20px auto 20px;">
@ -497,9 +501,12 @@ width=44% /></a>
<p>You can also add a photo or video to this field with <code>Edit Description Picture</code> in <a href="https://t.me/botfather">@BotFather</a>.</p>
</blockquote>
<p>Additionally, just like normal users, bots also come with a <strong>short bio</strong> available on their profile. If you didn&#39;t specify this field while first creating your bot, you can set it at any time with the <code>/setabouttext</code> command in <a href="https://t.me/botfather">@BotFather</a>. Users can interact with many bots and they won&#39;t have access to their description after starting them having a quick reminder of the bot&#39;s purpose can be very useful.</p>
<blockquote>
<p>Note that both the <strong>Description</strong> and the <strong>About text</strong> can be <a href="https://core.telegram.org/bots/api#setmydescription">natively localized</a> each user will automatically see the correct translation for their language.</p>
</blockquote>
<p>Bots can also have a <strong>profile picture</strong> you should pick something unique and original so that users can find it in their chat list at a glance.</p>
<blockquote>
<p>Once set, the description, about text and profile pic can be <strong>replaced</strong> but never fully <strong>removed</strong>.</p>
<p>Once set, the bot profile picture can be <strong>replaced</strong> but never fully <strong>removed</strong>.</p>
</blockquote>
<h4><a class="anchor" name="generating-an-authentication-token" href="#generating-an-authentication-token"><i class="anchor-icon"></i></a>Generating an authentication token</h4>
<p>If your existing token is <strong>compromised</strong> or <strong>you lost it</strong> for some reason, use the <code>/token</code> command to generate a new one.</p>

View file

@ -4,10 +4,10 @@
<meta charset="utf-8">
<title>Web Apps for Bots</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta property="description" content="Telegram bots can completely replace any website. They support seamless authorization, integrated payments via 15 payment…">
<meta property="description" content="Telegram bots can completely replace any website. They support seamless authorization, integrated payments via 20 payment…">
<meta property="og:title" content="Web Apps for Bots">
<meta property="og:image" content="https://core.telegram.org/file/464001702/1194c/mBQhTbIWqw8.451557/08727d5d763e24d750">
<meta property="og:description" content="Telegram bots can completely replace any website. They support seamless authorization, integrated payments via 15 payment…">
<meta property="og:description" content="Telegram bots can completely replace any website. They support seamless authorization, integrated payments via 20 payment…">
<link rel="icon" type="image/svg+xml" href="/img/website_icon.svg?4">
<link rel="apple-touch-icon" sizes="180x180" href="/img/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/img/favicon-32x32.png">
@ -44,7 +44,7 @@
<div id="dev_page_content"><!-- scroll_nav -->
<p>Telegram bots can completely replace <strong>any website</strong>. They support <a href="https://telegram.org/blog/privacy-discussions-web-bots#meet-seamless-web-bots">seamless authorization</a>, <a href="https://core.telegram.org/bots/payments">integrated payments</a> via <strong>15</strong> payment providers (with <em>Google Pay</em> and <em>Apple Pay</em> out of the box), delivering tailored push notifications to users, and <a href="https://core.telegram.org/bots">much more</a>.</p>
<p>Telegram bots can completely replace <strong>any website</strong>. They support <a href="https://telegram.org/blog/privacy-discussions-web-bots#meet-seamless-web-bots">seamless authorization</a>, <a href="https://core.telegram.org/bots/payments">integrated payments</a> via <strong>20</strong> payment providers (with <em>Google Pay</em> and <em>Apple Pay</em> out of the box), delivering tailored push notifications to users, and <a href="https://core.telegram.org/bots">much more</a>.</p>
<p>With <strong>Web Apps</strong>, bots get a whole new dimension. Bot developers can create <strong>infinitely flexible interfaces</strong> with <em>JavaScript</em>, the most widely used programming language in the world.</p>
<div class="blog_video_player_wrap" style="max-width: 600px; margin: 20px auto 20px;">
<video class="blog_video_player tl_blog_vid_autoplay" onclick="videoTogglePlay(this)" autoplay loop controls muted poster="/file/464001434/100bf/eWprjdgzEbE.100386/644bbea83084f44c8f" style="max-width: 600px;" title="console.log('Vive la révolution')" alt="Bot Revolution">

View file

@ -72,7 +72,7 @@
<p>Try <a href="https://t.me/durgerkingbot">@DurgerKingBot</a> or check out the <a href="/bots/webapps">dedicated guide to Web Apps</a> to build your own.</p>
</blockquote>
<h4><a class="anchor" name="receive-payments" href="#receive-payments"><i class="anchor-icon"></i></a>Receive Payments</h4>
<p>Bots can <a href="/bots/payments">receive payments</a> from more than <strong>200 countries</strong> through more than <strong>15</strong> integrated payment providers (which include support for <em>Apple Pay</em> and <em>Google Pay</em>). These payments are securely processed by the providers and Telegram takes no commission.</p>
<p>Bots can <a href="/bots/payments">receive payments</a> from more than <strong>200 countries</strong> through more than <strong>20</strong> integrated payment providers (which include support for <em>Apple Pay</em> and <em>Google Pay</em>). These payments are securely processed by the providers and Telegram takes no commission.</p>
<div class="blog_video_player_wrap" style="max-width: 600px; margin: 20px auto 20px;">
<video class="blog_video_player tl_blog_vid_autoplay" onclick="videoTogglePlay(this)" autoplay loop controls muted poster="/file/464001866/10889/GZJM7zyZ6UE.105798/32d6a4d1d4f0b13355" style="max-width: 600px;" title="If your pizza place can't deliver a clone army, you're buying pizza from the wrong shop." alt="Video: Ordering a pizza through a Telegram channel">
<source src="/file/464001417/10bf1/nIRBV1iB0NY.3878528.mp4/c95b8092ce1ece10ef" type="video/mp4">