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)