Sveltegram
Reactive Telegram widgets built with svelteInstallation
npm
install
sveltegram
Components
Telegram post
Code
<script>
import
{ Post }
from
'sveltegram';
</script>
<Post
link=
"https://t.me/computly/159"
color=
"#2f81f6"
colorDark=
"#89baff"
/>
Demo
API
Please refer to Telegram documentation for more details.
Property Type Default
link (required) string Description:Telegram post link. You can copy it from context menu
darkMode boolean false Description:Enable dark mode
color string #2f81f6 Description:Accent color
colorDark string #89baff Description:Accent color in dark mode
Telegram discussion
Code
<script>
import
{ Discussions }
from
'sveltegram';
</script>
<Discussions
link=
"https://t.me/contest/198"
color=
"#2f81f6"
colorDark=
"#89baff"
commentsLimit=
{5}
/>
Demo
API
Please refer to Telegram documentation for more details.
Property Type Default
link (required) string Description:Telegram post link. You can copy it from context menu
pageURL string Description:As shown in Telegram docs, you can load comments dynamically if you have a channel that has discussions enabled and you post articles to it, you can set the
link
parameter to your channel link like https://t.me/computly
and Telegram will automatically fetch the discussions belonging to current article, you still need to pass current page full URL so the widget can be reactive to things like theme changes, as well as setting canonical <link>
tag with current page URL.darkMode boolean false Description:Enable dark mode
color string #2f81f6 Description:Accent color
colorDark string #89baff Description:Accent color in dark mode
colorfulNames boolean false Description:Use different color for usernames
commentsLimit number 5 Description:How many comments are displayed
height number Description:Widget height. The default value is 'auto' which is determined by Telegram
Telegram login widget
Code
<script>
import
{ Login }
from
'sveltegram';
</script>
<Login
username=
"ComputlyBot"
requestAccess=
{
true
}
on:
auth=
{(data
) =›{
console.log(data
.user.id);}
}/>
Demo
API
Please refer to Telegram documentation for more details.
Property Type Default
username (required) string Description:Your bot username
authType string callback Description:How to authenticate users? Choices are [callback, redirect]
redirectURL string Description:In case you chose
redirect
as an authentication method, you must set this propertyrequestAccess boolean false Description:Whether you want to send messages to the user in the future.
size string medium Description:Login button size. choices are [small, medium,large]
buttonRadius number 10 Description:Login button radius (in pixels)