<!DOCTYPE html> <html class=""> <head> <meta charset="utf-8"> <title>Post Widget</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta property="description" content="You can embed messages from public groups and channels anywhere. Here’s what an embed of a Telegram message looks like when…"> <meta property="og:title" content="Post Widget"> <meta property="og:image" content="https://core.telegram.org/file/811140747/166d/MNEJA3BlETo.107862/6fe98d36f382b03091"> <meta property="og:description" content="You can embed messages from public groups and channels anywhere. Here’s what an embed of a Telegram message looks like when…"> <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/bootstrap-extra.css?2" rel="stylesheet"> <link href="/css/core-widgets.css?1" 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"><ul class="breadcrumb clearfix"><li><a href="/widgets" >Widgets</a></li><i class="icon icon-breadcrumb-divider"></i><li><a href="/widgets/post" >Post Widget</a></li></ul></div> <h1 id="dev_page_title">Post Widget</h1> <div id="dev_page_content"><p>You can <strong>embed messages from public groups and channels</strong> anywhere. Here’s what an embed of a Telegram message looks like when included on a web page:</p> <div><br> <script async src="https://telegram.org/js/telegram-widget.js?1" data-telegram-post="durov/68" data-width="100%"></script> <br><br> </div> <p>To get the HTML-code for embedding a message, just <strong>open its t.me link</strong> (e.g., <a href="https://t.me/durov/43">t.me/durov/43</a>) in a web browser and click <strong>< > EMBED</strong>:</p> <div class="blog_image_wrap"> <a href="/file/811140747/166d/MNEJA3BlETo.107862/6fe98d36f382b03091" target="_blank"><img src="/file/811140747/166d/MNEJA3BlETo.107862/6fe98d36f382b03091" title="Login on external website" /></a> </div> <h3><a class="anchor" name="configure-widget" href="#configure-widget"><i class="anchor-icon"></i></a>Configure widget</h3> <p>You can choose more options using the form below.</p> <p><form class="form-horizontal form-telegram clearfix" id="post_widget_config"> <div class="form-group"> <label class="col-md-3 control-label">Link to post:</label> <div class="col-md-6"> <div class="textfield-item"> <input id="post_link" name="post_link" type="text" class="form-control" placeholder="link to a public post, e.g. https://t.me/telegram/83"> <div class="textfield-item-underline"></div> <span class="textfield-item-error" id="post_link_error"></span> </div> </div> </div> <div class="form-group"> <label class="col-md-3 control-label">Width:</label> <div class="col-md-6"> <div class="textfield-item" style="width: 50px;"> <input id="width" name="width" type="text" class="form-control" placeholder="100%" maxlength="4"> <div class="textfield-item-underline"></div> </div> </div> </div> <div class="form-group"> <label class="col-md-3 control-label">Author Photo:</label> <div class="col-md-6"> <label class="radio-item radio-item-block"> <input type="radio" class="radio" name="author_photo" value="" checked /> <span class="radio-input ripple-handler"><span class="ripple-mask"><span class="ripple"></span></span><span class="radio-input-icon"></span></span><span class="radio-label">Auto</span> </label> <label class="radio-item radio-item-block"> <input type="radio" class="radio" name="author_photo" value="true" /> <span class="radio-input ripple-handler"><span class="ripple-mask"><span class="ripple"></span></span><span class="radio-input-icon"></span></span><span class="radio-label">Always show</span> </label> <label class="radio-item radio-item-block"> <input type="radio" class="radio" name="author_photo" value="false" /> <span class="radio-input ripple-handler"><span class="ripple-mask"><span class="ripple"></span></span><span class="radio-input-icon"></span></span><span class="radio-label">Always hide</span> </label> </div> </div> <div class="form-group"> <label class="col-md-3 control-label">Accent color:</label> <div class="col-md-6"> <div class="widget-accent-colors"> <label class="widget-accent-color-item"> <input type="radio" class="radio" name="color" value="default" checked /> <div class="widget-color-circle"></div> <div class="widget-color-label">Default</div> </label> <label class="widget-accent-color-item" data-color="13B4C6" data-bg-color="13C5D9" data-dark-color="39C4E8"> <input type="radio" class="radio" name="color" value="13B4C6" /> <div class="widget-color-circle" style="background-color: #13C5D9;"></div> <div class="widget-color-label">Cyan</div> </label> <label class="widget-accent-color-item" data-color="29B127" data-bg-color="4CB94E" data-dark-color="72E350"> <input type="radio" class="radio" name="color" value="29B127" /> <div class="widget-color-circle" style="background-color: #4CB94E;"></div> <div class="widget-color-label">Green</div> </label> <label class="widget-accent-color-item" data-color="CA9C0E" data-bg-color="E8B824" data-dark-color="F0B138"> <input type="radio" class="radio" name="color" value="CA9C0E" /> <div class="widget-color-circle" style="background-color: #E8B824;"></div> <div class="widget-color-label">Yellow</div> </label> <label class="widget-accent-color-item" data-color="E22F38" data-bg-color="F34750" data-dark-color="F95C54"> <input type="radio" class="radio" name="color" value="E22F38" /> <div class="widget-color-circle" style="background-color: #F34750;"></div> <div class="widget-color-label">Red</div> </label> <label class="widget-accent-color-item" data-color="343638" data-bg-color="343638" data-dark-color="FFFFFF" data-text="Black" data-dark-text="White"> <input type="radio" class="radio" name="color" value="343638" /> <div class="widget-color-circle" style="background-color: #343638;"></div> <div class="widget-color-label">Black</div> </label> <label class="widget-accent-color-item"> <input type="radio" class="radio" name="color" value="custom"> <div class="widget-color-circle widget-color-circle-custom" style="color: #F646A4;"></div> <div class="widget-color-label widget-color-label-custom">Custom</div> <div class="textfield-item widget-accent-color-field-item"> <input class="form-control widget-accent-color-field" name="customcolor" type="text" autocomplete="off" value="F646A4" maxlength="6"> <div class="textfield-item-underline"></div> </div> </label> </div> <label class="checkbox-item checkbox-item-block"> <input type="checkbox" class="checkbox" name="dark" value="1" /> <span class="checkbox-input ripple-handler"><span class="ripple-mask"><span class="ripple"></span></span><span class="checkbox-input-icon"></span></span><span class="checkbox-label">Dark theme</span> </label> </div> </div> <div class="form-group"> <label for="embed_code" class="col-md-3 control-label">Embed Code:</label> <div class="col-md-6"> <textarea id="embed_code" class="form-control embed_code" rows="5" readonly onclick="this.select();"></textarea> </div> </div> <div class="form-group"> <div class="col-md-offset-1 col-md-10"> <div class="widget_container row" id="widget_container"></div> </div> </div> </form></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 src="/js/jquery.min.js?1"></script> <script src="/js/jquery-ui.min.js?1"></script> <script src="/js/bootstrap.min.js?1"></script> <script src="/js/core-widgets.js?1"></script> <script>PostWidget.init({"default_link":"https:\/\/t.me\/telegram\/83","link_error":"Invalid post link","widget_script":"https:\/\/telegram.org\/js\/telegram-widget.js?22"}); backToTopInit("Go up"); removePreloadInit(); </script> </body> </html>