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: 6 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 3 years ago)
- Default Branch: main
- Last Pushed: 2024-06-13T16:53:41.000Z (about 1 year ago)
- Last Synced: 2024-12-10T05:32:47.469Z (7 months ago)
- Topics: javascript, npm, package, svelte, svelte-component, svelte5, sveltejs, sveltekit, telegram, widget
- Language: Svelte
- Homepage: https://sveltegram.a3k.me
- Size: 425 KB
- Stars: 29
- Watchers: 1
- Forks: 2
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
[](https://TheBSD.github.io/StandWithPalestine/)
# Sveltegram
This package allows you to embed telegram widgets in your svelte web application.
Library size is **96 bytes** (min+gzipped). _[bundlephobia](https://bundlephobia.com/package/sveltegram@latest)_
## [Demo & Documentation](https://sveltegram.a3k.me)
[](https://github.com/amr3k/sveltegram)
[](https://sveltegram.a3k.me)
[](https://openbase.com/js/sveltegram?utm_source=embedded&utm_medium=badge&utm_campaign=rate-badge)
[](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) |
# 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 support for [login widget](https://core.telegram.org/widgets/login)
# License
[MIT](./LICENSE)