Sveltegram

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

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

Demo & Documentation

• Sveltegram
  • Demo & Documentation
  • Post widget
    • How to use
    • API
  • Discussions widget
    • How to use
    • API
  • Login widget
    • How to use
    • API
• Content Security Policy
• Limitations
• Development
  • Install
• TODO
• License

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

• [x] Add support for login widget

License

MIT