Sveltegram

Reactive Telegram widgets built with svelte

Installation

npm install sveltegram

Components

Telegram post

Code

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

<Post
  link="https://t.me/computly/159"
  color="#2f81f6"
  colorDark="#89baff"
/>

Demo

API

Please refer to Telegram documentation for more details.

Property Type Default
link (required) string Description: Telegram post link. You can copy it from context menu
darkMode boolean false Description: Enable dark mode
color string #2f81f6 Description: Accent color
colorDark string #89baff Description: Accent color in dark mode

Telegram discussion

Code

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

<Discussions
  link="https://t.me/contest/198"
  color="#2f81f6"
  colorDark="#89baff"
  commentsLimit={5}
/>

Demo

API

Please refer to Telegram documentation for more details.

Property Type Default
link (required) string Description: Telegram post link. You can copy it from context menu
pageURL string Description: As shown in Telegram docs, you can load comments dynamically if you have a channel that has discussions enabled and you post articles to it, you can set the link parameter to your channel link like https://t.me/computly and Telegram will automatically fetch the discussions belonging to current article, you still need to pass current page full URL so the widget can be reactive to things like theme changes, as well as setting canonical <link> tag with current page URL.
darkMode boolean false Description: Enable dark mode
color string #2f81f6 Description: Accent color
colorDark string #89baff Description: Accent color in dark mode
colorfulNames boolean false Description: Use different color for usernames
commentsLimit number 5 Description: How many comments are displayed
height number Description: Widget height. The default value is 'auto' which is determined by Telegram

Telegram login widget

Code

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

<Login
  username="ComputlyBot"
  requestAccess={true}
  on:auth={(data) =› { console.log(data.user.id); }}
/>

Demo

API

Please refer to Telegram documentation for more details.

Property Type Default
username (required) string Description: Your bot username
authType string callback Description: How to authenticate users? Choices are [callback, redirect]
redirectURL string Description: In case you chose redirect as an authentication method, you must set this property
requestAccess boolean false Description: Whether you want to send messages to the user in the future.
size string medium Description: Login button size. choices are [small, medium,large]
buttonRadius number 10 Description: Login button radius (in pixels)