Sveltegram

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

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/439" />

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) | | 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:

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 login widget
• [x] Migrate to svelte 5
• [x] Deploy demo to cloudflare
• [ ] Add Share button widget
• [ ] Publish to jsr.io

License

MIT