This package allows you to embed telegram widgets in your svelte web application.
Embed a telegram post widget in your svelte application.
<script>
import { Post } from 'sveltegram';
</script>
<Post link="https://t.me/computly/439" />| Property | Type | Default | Description |
|---|---|---|---|
link (Required) |
string | Telegram post link (You can find it in context menu) | |
color |
string | #2f81f6 |
Accent color |
colorDark |
string | #89baff |
Accent color in dark mode |
darkMode |
boolean | false |
Enable dark mode |
Embed a telegram discussions widget in your svelte application.
<script>
import { Discussions } from 'sveltegram';
</script>
<Discussions link="https://t.me/contest/198" />| Property | Type | Default | Description |
|---|---|---|---|
link (Required) |
string | Telegram discussions link (You can find it in context menu) | |
pageURL |
string | If you want to auto load comments from your channel as explained in Telegram documentation You'll need to pass the same page URL as the one in <link rel="canonical"> |
|
color |
string | #2f81f6 |
Accent color |
colorDark |
string | #89baff |
Accent color in dark mode |
darkMode |
boolean | false |
Enable dark mode |
colorfulNames |
boolean | false |
Use different color for usernames |
commentsLimit |
number | 5 |
Number of comments to show |
height |
number | Height of the widget, The default value is 'auto' which is determined by Telegram |
Embed a telegram login button in your svelte application.
<script>
import { Login } from 'sveltegram';
</script>
<Login username="ComputlyBot" />| Property | Type | Default | Description |
|---|---|---|---|
username (Required) |
string | Your telegram bot username | |
authType |
string | callback |
How to authenticate users? Choices are [callback, redirect] |
redirectURL Required if authType = redirect |
string | In case you chose redirect as an authentication method, you must set this property | |
requestAccess |
boolean | false |
Whether you want to send messages to the user in the future |
size |
string | medium |
Login button size. choices are [small, medium,large] |
buttonRadius |
number | 10 |
Login button radius (in pixels) |
onauth (Required) if authType = callback |
Function | Callback function responsible for handling successful authentication |
If you are using CSP, you'll need to allow scripts and iFrames coming from Telegram domains as follows:
script-src https://telegram.org;
frame-src https://t.me;- Can't use the same widget more than once due to telegram script assigning a unique id to each widget.
git clone https://github.com/amr3k/sveltegram.git
cd sveltegramThen install dependencies:
pnpm install- Add login widget
- Migrate to svelte 5
- Deploy demo to cloudflare
- Add Share button widget
- Publish to jsr.io