CINXE.COM

<!DOCTYPE html> <html class=""> <head> <meta charset="utf-8"> <title>Working with GIFs</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta property="description" content="Telegram clients support displaying GIFs."> <meta property="og:title" content="Working with GIFs"> <meta property="og:image" content=""> <meta property="og:description" content="Telegram clients support displaying GIFs."> <link rel="icon" type="image/svg+xml" href="/img/website_icon.svg?4"> <link rel="apple-touch-icon" sizes="180x180" href="/img/apple-touch-icon.png"> <link rel="icon" type="image/png" sizes="32x32" href="/img/favicon-32x32.png"> <link rel="icon" type="image/png" sizes="16x16" href="/img/favicon-16x16.png"> <link rel="alternate icon" href="/img/favicon.ico" type="image/x-icon" /> <link href="/css/bootstrap.min.css?3" rel="stylesheet"> <link href="/css/telegram.css?241" rel="stylesheet" media="screen"> <style> </style> </head> <body class="preload"> <div class="dev_page_wrap"> <div class="dev_page_head navbar navbar-static-top navbar-tg"> <div class="navbar-inner"> <div class="container clearfix"> <ul class="nav navbar-nav navbar-right hidden-xs"><li class="navbar-twitter"><a href="https://twitter.com/telegram" target="_blank" data-track="Follow/Twitter" onclick="trackDlClick(this, event)"><i class="icon icon-twitter"></i><span> Twitter</span></a></li></ul> <ul class="nav navbar-nav"> <li><a href="//telegram.org/">Home</a></li> <li class="hidden-xs"><a href="//telegram.org/faq">FAQ</a></li> <li class="hidden-xs"><a href="//telegram.org/apps">Apps</a></li> <li class="active"><a href="/api">API</a></li> <li class=""><a href="/mtproto">Protocol</a></li> <li class=""><a href="/schema">Schema</a></li> </ul> </div> </div> </div> <div class="container clearfix"> <div class="dev_page"> <div id="dev_page_content_wrap" class=" "> <div class="dev_page_bread_crumbs"><ul class="breadcrumb clearfix"><li><a href="/api" >API</a></li><i class="icon icon-breadcrumb-divider"></i><li><a href="/api/gifs" >Working with GIFs</a></li></ul></div> <h1 id="dev_page_title">Working with GIFs</h1> <div id="dev_page_content"> <p>Telegram clients support displaying GIFs.</p> <p>On Telegram, GIFs are actually MPEG4 (h264) videos without sound; if the user tries to upload an actual GIF file, it will be automatically converted to an MPEG4 file by the server. </p> <h3><a class="anchor" href="#uploading-gifs" id="uploading-gifs" name="uploading-gifs"><i class="anchor-icon"></i></a>Uploading GIFs</h3> <pre><code><a href='/constructor/documentAttributeAnimated'>documentAttributeAnimated</a>#11b58939 = <a href='/type/DocumentAttribute'>DocumentAttribute</a>; <a href='/constructor/inputMediaUploadedDocument'>inputMediaUploadedDocument</a>#5b38c6c1 flags:<a href='/type/%23'>#</a> nosound_video:flags.3?<a href='/constructor/true'>true</a> force_file:flags.4?<a href='/constructor/true'>true</a> spoiler:flags.5?<a href='/constructor/true'>true</a> file:<a href='/type/InputFile'>InputFile</a> thumb:flags.2?<a href='/type/InputFile'>InputFile</a> mime_type:<a href='/type/string'>string</a> attributes:<a href='/type/Vector%20t'>Vector</a><<a href='/type/DocumentAttribute'>DocumentAttribute</a>> stickers:flags.0?<a href='/type/Vector%20t'>Vector</a><<a href='/type/InputDocument'>InputDocument</a>> ttl_seconds:flags.1?<a href='/type/int'>int</a> = <a href='/type/InputMedia'>InputMedia</a>; ---functions--- <a href='/method/messages.sendMedia'>messages.sendMedia</a>#7852834e flags:<a href='/type/%23'>#</a> silent:flags.5?<a href='/constructor/true'>true</a> background:flags.6?<a href='/constructor/true'>true</a> clear_draft:flags.7?<a href='/constructor/true'>true</a> noforwards:flags.14?<a href='/constructor/true'>true</a> update_stickersets_order:flags.15?<a href='/constructor/true'>true</a> invert_media:flags.16?<a href='/constructor/true'>true</a> peer:<a href='/type/InputPeer'>InputPeer</a> reply_to:flags.0?<a href='/type/InputReplyTo'>InputReplyTo</a> media:<a href='/type/InputMedia'>InputMedia</a> message:<a href='/type/string'>string</a> random_id:<a href='/type/long'>long</a> reply_markup:flags.2?<a href='/type/ReplyMarkup'>ReplyMarkup</a> entities:flags.3?<a href='/type/Vector%20t'>Vector</a><<a href='/type/MessageEntity'>MessageEntity</a>> schedule_date:flags.10?<a href='/type/int'>int</a> send_as:flags.13?<a href='/type/InputPeer'>InputPeer</a> quick_reply_shortcut:flags.17?<a href='/type/InputQuickReplyShortcut'>InputQuickReplyShortcut</a> effect:flags.18?<a href='/type/long'>long</a> = <a href='/type/Updates'>Updates</a>;</code></pre> <p>On Telegram, GIFs are actually MPEG4 videos without sound; if the user tries to upload an actual GIF file, it will be automatically converted to an MPEG4 file by the server. </p> <p>To upload a GIF, follow the usual <a href="/api/files#uploading-files">file upload procedure聽禄</a>, specifying the <a href="/constructor/documentAttributeAnimated">documentAttributeAnimated</a>. </p> <p>Uploading a GIF will automatically add it to the user's <a href="#saved-gifs">saved GIFs list聽禄</a>. </p> <h4><a class="anchor" href="#uploading-by-hash" id="uploading-by-hash" name="uploading-by-hash"><i class="anchor-icon"></i></a>Uploading by hash</h4> <p>For some types of documents like GIFs, <a href="/method/messages.getDocumentByHash">messages.getDocumentByHash</a> can be used to search for the document on Telegram servers, instead of uploading it from scratch.<br> See <a href="/api/files#uploading-by-hash">here聽禄</a> for the full procedure. </p> <h3><a class="anchor" href="#saved-gifs" id="saved-gifs" name="saved-gifs"><i class="anchor-icon"></i></a>Saved GIFs</h3> <pre><code><a href='/constructor/updateSavedGifs'>updateSavedGifs</a>#9375341e = <a href='/type/Update'>Update</a>; <a href='/constructor/messages.savedGifsNotModified'>messages.savedGifsNotModified</a>#e8025ca2 = <a href='/type/messages.SavedGifs'>messages.SavedGifs</a>; <a href='/constructor/messages.savedGifs'>messages.savedGifs</a>#84a02a0d hash:<a href='/type/long'>long</a> gifs:<a href='/type/Vector%20t'>Vector</a><<a href='/type/Document'>Document</a>> = <a href='/type/messages.SavedGifs'>messages.SavedGifs</a>; ---functions--- <a href='/method/messages.saveGif'>messages.saveGif</a>#327a30cb id:<a href='/type/InputDocument'>InputDocument</a> unsave:<a href='/type/Bool'>Bool</a> = <a href='/type/Bool'>Bool</a>; <a href='/method/messages.getSavedGifs'>messages.getSavedGifs</a>#5cf09635 hash:<a href='/type/long'>long</a> = <a href='/type/messages.SavedGifs'>messages.SavedGifs</a>;</code></pre> <p>GIFs received in a chat may be added to (or removed from) the saved gifs list using <a href="/method/messages.saveGif">messages.saveGif</a>. </p> <p>Modifying the saved gifs list with the method indicated above will emit an <a href="/constructor/updateSavedGifs">updateSavedGifs</a> update to other currently logged in sessions, which should trigger a call to <a href="/method/messages.getSavedGifs">messages.getSavedGifs</a>, to refresh the locally cached list. </p> <p><a href="/method/messages.getSavedGifs">messages.getSavedGifs</a> should also be called when first logging in. </p> <p><a href="#uploading-gifs">Uploading聽禄</a> a GIF will automatically add it to the saved gifs list. </p> <p>The saved GIFs list should be displayed in the <a href="#searching-gifs">GIF selection UI聽禄</a>. </p> <p>The maximum number of GIFs that may be added to the saved GIF list is specified by <a href="/api/config#saved-gifs-limit-default">appConfig.saved_gifs_limit_default</a>/<a href="/api/config#saved-gifs-limit-premium">appConfig.saved_gifs_limit_premium</a> for non-<a href="/api/premium">Premium</a>/<a href="/api/premium">Premium</a> users. </p> <p>Trying to add one more GIF after the non-Premium limit is reached should open the Premium subscription modal.<br> If the user adds one more GIF even after the non-Premium/Premium limit is reached, the server will automatically delete the oldest GIF, and the client should display a toast, notifying the user of this deletion. </p> <h3><a class="anchor" href="#searching-gifs" id="searching-gifs" name="searching-gifs"><i class="anchor-icon"></i></a>Searching GIFs</h3> <pre><code><a href='/constructor/config'>config</a>#cc1a241e flags:<a href='/type/%23'>#</a> default_p2p_contacts:flags.3?<a href='/constructor/true'>true</a> preload_featured_stickers:flags.4?<a href='/constructor/true'>true</a> revoke_pm_inbox:flags.6?<a href='/constructor/true'>true</a> blocked_mode:flags.8?<a href='/constructor/true'>true</a> force_try_ipv6:flags.14?<a href='/constructor/true'>true</a> date:<a href='/type/int'>int</a> expires:<a href='/type/int'>int</a> test_mode:<a href='/type/Bool'>Bool</a> this_dc:<a href='/type/int'>int</a> dc_options:<a href='/type/Vector%20t'>Vector</a><<a href='/type/DcOption'>DcOption</a>> dc_txt_domain_name:<a href='/type/string'>string</a> chat_size_max:<a href='/type/int'>int</a> megagroup_size_max:<a href='/type/int'>int</a> forwarded_count_max:<a href='/type/int'>int</a> online_update_period_ms:<a href='/type/int'>int</a> offline_blur_timeout_ms:<a href='/type/int'>int</a> offline_idle_timeout_ms:<a href='/type/int'>int</a> online_cloud_timeout_ms:<a href='/type/int'>int</a> notify_cloud_delay_ms:<a href='/type/int'>int</a> notify_default_delay_ms:<a href='/type/int'>int</a> push_chat_period_ms:<a href='/type/int'>int</a> push_chat_limit:<a href='/type/int'>int</a> edit_time_limit:<a href='/type/int'>int</a> revoke_time_limit:<a href='/type/int'>int</a> revoke_pm_time_limit:<a href='/type/int'>int</a> rating_e_decay:<a href='/type/int'>int</a> stickers_recent_limit:<a href='/type/int'>int</a> channels_read_media_period:<a href='/type/int'>int</a> tmp_sessions:flags.0?<a href='/type/int'>int</a> call_receive_timeout_ms:<a href='/type/int'>int</a> call_ring_timeout_ms:<a href='/type/int'>int</a> call_connect_timeout_ms:<a href='/type/int'>int</a> call_packet_timeout_ms:<a href='/type/int'>int</a> me_url_prefix:<a href='/type/string'>string</a> autoupdate_url_prefix:flags.7?<a href='/type/string'>string</a> gif_search_username:flags.9?<a href='/type/string'>string</a> venue_search_username:flags.10?<a href='/type/string'>string</a> img_search_username:flags.11?<a href='/type/string'>string</a> static_maps_provider:flags.12?<a href='/type/string'>string</a> caption_length_max:<a href='/type/int'>int</a> message_length_max:<a href='/type/int'>int</a> webfile_dc_id:<a href='/type/int'>int</a> suggested_lang_code:flags.2?<a href='/type/string'>string</a> lang_pack_version:flags.2?<a href='/type/int'>int</a> base_lang_pack_version:flags.2?<a href='/type/int'>int</a> reactions_default:flags.15?<a href='/type/Reaction'>Reaction</a> autologin_token:flags.16?<a href='/type/string'>string</a> = <a href='/type/Config'>Config</a>;</code></pre> <p>Clients should implement a GIF selection/search UI that is almost identical to the <a href="/api/stickers">sticker</a> search UI, featuring a search bar (with a list of <a href="/api/emoji-categories">emoji categories</a>) followed (initially) by the list of <a href="#saved-gifs">saved GIFs</a> that may be selected and sent by the user to the current chat. </p> <p>Entering text in the search bar should replace the saved GIFs list with the results of the GIF search, which must be implemented as an <a href="/api/bots/inline">inline query聽禄</a> to the bot specified in <a href="/constructor/config">config</a>.<code>gif_search_username</code>, with <code>peer</code>=<a href="/constructor/inputPeerEmpty">inputPeerEmpty</a> and <code>query</code> set equal to the input of the user.<br> Again, the GIF search UI should be almost identical to the <a href="/api/stickers">sticker</a> search UI: even if inline bot queries are used, the usual inline query UI should <strong>not</strong> be used for the GIF search UI. </p> <p>As mentioned above, the GIF search bar should also offer a list of categories to quickly filter results by a (list of) emojis, or by some other criteria, see <a href="/api/emoji-categories">here聽禄</a> for more info. </p> <p>When an emoji category is selected, the search input bar should be disabled, and a search should be made, passing to <code>query</code> the first emoji of the selected emoji group.</p></div> </div> </div> </div> <div class="footer_wrap"> <div class="footer_columns_wrap footer_desktop"> <div class="footer_column footer_column_telegram"> <h5>Telegram</h5> <div class="footer_telegram_description"></div> Telegram is a cloud-based mobile and desktop messaging app with a focus on security and speed. </div> <div class="footer_column"> <h5><a href="//telegram.org/faq">About</a></h5> <ul> <li><a href="//telegram.org/faq">FAQ</a></li> <li><a href="//telegram.org/privacy">Privacy</a></li> <li><a href="//telegram.org/press">Press</a></li> </ul> </div> <div class="footer_column"> <h5><a href="//telegram.org/apps#mobile-apps">Mobile Apps</a></h5> <ul> <li><a href="//telegram.org/dl/ios">iPhone/iPad</a></li> <li><a href="//telegram.org/android">Android</a></li> <li><a href="//telegram.org/dl/web">Mobile Web</a></li> </ul> </div> <div class="footer_column"> <h5><a href="//telegram.org/apps#desktop-apps">Desktop Apps</a></h5> <ul> <li><a href="//desktop.telegram.org/">PC/Mac/Linux</a></li> <li><a href="//macos.telegram.org/">macOS</a></li> <li><a href="//telegram.org/dl/web">Web-browser</a></li> </ul> </div> <div class="footer_column footer_column_platform"> <h5><a href="/">Platform</a></h5> <ul> <li><a href="/api">API</a></li> <li><a href="//translations.telegram.org/">Translations</a></li> <li><a href="//instantview.telegram.org/">Instant View</a></li> </ul> </div> </div> <div class="footer_columns_wrap footer_mobile"> <div class="footer_column"> <h5><a href="//telegram.org/faq">About</a></h5> </div> <div class="footer_column"> <h5><a href="//telegram.org/blog">Blog</a></h5> </div> <div class="footer_column"> <h5><a href="//telegram.org/apps">Apps</a></h5> </div> <div class="footer_column"> <h5><a href="/">Platform</a></h5> </div> <div class="footer_column"> <h5><a href="//telegram.org/press">Press</a></h5> </div> </div> </div> </div> <script src="/js/main.js?47"></script> <script src="/js/jquery.min.js?1"></script> <script src="/js/bootstrap.min.js?1"></script> <script>window.initDevPageNav&&initDevPageNav(); backToTopInit("Go up"); removePreloadInit(); </script> </body> </html>