https://github.com/amr3k/sveltegram
Reactive Telegram widgets built with svelte
https://github.com/amr3k/sveltegram
javascript npm package svelte svelte-component svelte5 sveltejs sveltekit telegram widget
Last synced: 9 months ago
JSON representation
Reactive Telegram widgets built with svelte
- Host: GitHub
- URL: https://github.com/amr3k/sveltegram
- Owner: amr3k
- License: mit
- Created: 2022-04-19T05:07:42.000Z (about 4 years ago)
- Default Branch: main
- Last Pushed: 2025-04-30T22:56:34.000Z (about 1 year ago)
- Last Synced: 2025-07-12T02:13:27.397Z (12 months ago)
- Topics: javascript, npm, package, svelte, svelte-component, svelte5, sveltejs, sveltekit, telegram, widget
- Language: Svelte
- Homepage: https://sveltegram.a3k.me
- Size: 994 KB
- Stars: 32
- Watchers: 1
- Forks: 2
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Sveltegram
This package allows you to embed telegram widgets in your svelte web application.
## [Demo & Documentation](https://sveltegram.a3k.me)
[](https://sveltegram.a3k.me)
[](https://hitsofcode.com/github/amr3k/sveltegram/view?branch=main)
- [Sveltegram](#sveltegram)
- [Demo \& Documentation](#demo--documentation)
- [Post widget](#post-widget)
- [How to use](#how-to-use)
- [API](#api)
- [Discussions widget](#discussions-widget)
- [How to use](#how-to-use-1)
- [API](#api-1)
- [Login widget](#login-widget)
- [How to use](#how-to-use-2)
- [API](#api-2)
- [Content Security Policy](#content-security-policy)
- [Limitations](#limitations)
- [Development](#development)
- [Install](#install)
- [TODO](#todo)
- [License](#license)
## Post widget
Embed a telegram post widget in your svelte application.
### How to use
```js
import { Post } from 'sveltegram';
```
### 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
```js
import { Discussions } from 'sveltegram';
```
### 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](https://core.telegram.org/widgets/discussion) You'll need to pass the same page URL as the one in `` |
| `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
```js
import { Login } from 'sveltegram';
```
### 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) |
| `onauth` **(Required) if `authType = callback`** | Function | | Callback function responsible for handling successful authentication |
# Content Security Policy
If you are using CSP, you'll need to allow scripts and iFrames coming from Telegram domains as follows:
```js
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
```sh
git clone https://github.com/amr3k/sveltegram.git
cd sveltegram
```
Then install dependencies:
```sh
pnpm install
```
# TODO
- [x] Add login widget
- [x] Migrate to svelte 5
- [x] Deploy demo to cloudflare
- [ ] Add [Share button widget](https://core.telegram.org/widgets/share)
- [ ] Publish to [jsr.io](https://jsr.io)
# License
[MIT](./LICENSE)