telegram-crawler/data/core.telegram.org/widgets/discussion.html

227 lines
12 KiB
HTML
Raw Normal View History

2022-02-23 16:30:26 +01:00
<!DOCTYPE html>
<html class="">
<head>
<meta charset="utf-8">
<title>Discussion Widget</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta property="description" content="You can embed discussions from any public channel on your website. You only need a link to a post with comments to embed…">
<meta property="og:title" content="Discussion Widget">
<meta property="og:image" content="">
<meta property="og:description" content="You can embed discussions from any public channel on your website. You only need a link to a post with comments to embed…">
<link rel="shortcut icon" href="/favicon.ico?4" 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">
2022-04-19 13:29:30 +02:00
<link href="/css/telegram.css?227" rel="stylesheet" media="screen">
2022-02-23 16:30:26 +01:00
<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/discussion" >Discussion Widget</a></li></ul></div>
<h1 id="dev_page_title">Discussion Widget</h1>
<div id="dev_page_content"><p>You can <strong>embed discussions from any public channel</strong> on your website. You only need a link to a post with comments to embed it together with all discussion. </p>
<p>If you have a website with articles and a telegram channel where you post links to these articles, you can use this widget to show discussions from that channel on your website. In this case you only need a link to the channel. Discussions will be available on your website as soon as you post a link into the channel. For this to work, you should add the <code>&lt;link rel=&quot;canonical&quot; href=&quot;%page_url%&quot;&gt;</code> tag to the page header where <code>%page_url%</code> is the canonical URL of the current page.</p>
<h3><a class="anchor" name="configure-widget" href="#configure-widget"><i class="anchor-icon"></i></a>Configure widget</h3>
<p>You can choose options for your widget using the form below.</p>
<p><form class="form-horizontal form-telegram clearfix" id="discussion_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 or a channel">
<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">Comments limit:</label>
<div class="col-md-2">
<div class="textfield-item" style="width:100%">
<input id="comments_limit" name="comments_limit" type="text" autocomplete="off" class="form-control" placeholder="5" maxlength="2">
<div class="textfield-item-underline"></div>
</div>
</div>
<label class="col-md-2 control-label">Height:</label>
<div class="col-md-2">
<div class="textfield-item" style="width:100%">
<input id="height" name="height" type="text" autocomplete="off" class="form-control" placeholder="auto" maxlength="4">
<div class="textfield-item-underline"></div>
</div>
</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="colorful" 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">Use different colors for names</span>
</label>
<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 class="help-block canonical-helper hide">Make sure you have a <code>&lt;link rel=&quot;canonical&quot; href=&quot;%page_url%&quot;&gt;</code> tag in the page header with the canonical url of the current page.</div>
</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>
<h3><a class="anchor" name="basic-comments" href="#basic-comments"><i class="anchor-icon"></i></a>Basic comments</h3>
<p>If you&#39;re looking to simply add Telegram comments to <strong>pages on your website</strong>, without linking them with a channel, you can use our <a href="https://comments.app/">basic comments</a> solution.</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/blog">Blog</a></li>
<li><a href="//telegram.org/jobs">Jobs</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/dl/android">Android</a></li>
<li><a href="//telegram.org/dl/wp">Windows Phone</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>
2022-04-19 13:29:30 +02:00
<script src="/js/main.js?46"></script>
2022-02-23 16:30:26 +01:00
<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>
2022-04-14 13:01:34 +02:00
<script>DiscussionWidget.init({"default_link":"https:\/\/t.me\/contest\/198","link_error":"Invalid post link","widget_script":"https:\/\/telegram.org\/js\/telegram-widget.js?19"});
2022-02-23 16:30:26 +01:00
backToTopInit("Go up");
removePreloadInit();
</script>
</body>
</html>