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…" >
2022-04-21 15:52:36 +02:00
< 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" / >
2022-02-23 16:30:26 +01:00
< 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-06-17 17:53:56 +02:00
< link href = "/css/telegram.css?231" 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 > < link rel=" canonical" href=" %page_url%" > < / 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 > < link rel=" canonical" href=" %page_url%" > < / 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' 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 > D i s c u s s i o n W i d g e t . i n i t ( { " d e f a u l t _ l i n k " : " h t t p s : \ / \ / t . m e \ / c o n t e s t \ / 1 9 8 " , " l i n k _ e r r o r " : " I n v a l i d p o s t l i n k " , " w i d g e t _ s c r i p t " : " h t t p s : \ / \ / t e l e g r a m . o r g \ / j s \ / t e l e g r a m - w i d g e t . j s ? 1 9 " } ) ;
2022-02-23 16:30:26 +01:00
backToTopInit("Go up");
removePreloadInit();
< / script >
< / body >
< / html >
