Sveltegram

This package allows you to embed telegram widgets in your svelte web application.

Library size is 96 bytes (min+gzipped). bundlephobia

Demo & Documentation

Post widget

Embed a telegram post widget in your svelte application.

How to use

<script>
  import { Post } from 'sveltegram';
</script>

<Post link="https://t.me/computly/188" />

API

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

Discussions widget

Embed a telegram discussions widget in your svelte application.

How to use

<script>
  import { Discussions } from 'sveltegram';
</script>

<Discussions link="https://t.me/contest/198" />

API

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

Login widget

Embed a telegram login button in your svelte application.

How to use

<script>
  import { Login } from 'sveltegram';
</script>

<Login username="ComputlyBot" />

API

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)

Content Security Policy

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;

Limitations

  • Can't use the same widget more than once due to telegram script assigning a unique id to each widget.

Development

Install

git clone https://github.com/amr3k/sveltegram.git
cd sveltegram

Then install dependencies:

pnpm install

TODO

License

MIT

Top categories

Loading Svelte Themes