How to Add a Live Telegram Stars Calculator to Your Website (Free, Two Lines of HTML)

If your site, blog or bot landing page is about Telegram, one question keeps coming back: how much are my Stars worth in dollars? The honest answer has three parts — what Stars cost in the Telegram app, what they cost on Fragment, and what a creator actually receives when cashing them out — and the gap between them is large.

We built a free calculator widget that answers it right on your page. This post shows how to add it (two lines of HTML) and how it works under the hood.

Free Telegram Stars Calculator Widget for Your Website

Free Telegram Stars calculator for your website: app, Fragment and creator-payout prices in USD and GRAM. Two lines of code, no sign-up, no cookies.

starsearn.com

What the widget shows

Visitors type a number of Stars (or tap 100 / 500 / 1,000 / 5,000) and get three numbers, in US dollars and in GRAM — the coin formerly called TON:

A few facts behind those numbers:

• Telegram prices Stars in US dollars. In the app, packs cost $1.99 for 100, $9.99 for 500 and $19.99 for 1,000 — that price includes the app stores' cut.
• Fragment sold Stars at $0.015 each when we last checked fragment.com (October 7, 2026), so buying there is about 25% cheaper than in the app.
• Creators withdraw earned Stars through Fragment, from 1,000 Stars and 21 days after earning them.
• The GRAM amounts use the live GRAM rate (CoinGecko, with Kraken and Bybit as fallbacks), refreshed every 15 minutes. The dollar prices are Telegram's.

Add it to your site

Paste this where your site accepts HTML — a Custom HTML block in WordPress, an HTML card in Ghost, or the HTML embed element of your site builder:

<iframe src="https://starsearn.com/widget/stars-calculator" title="Telegram Stars calculator" width="100%" height="390" style="border:0;max-width:480px;border-radius:16px" loading="lazy"></iframe>
<p style="font-size:12px;margin:4px 0 0">Powered by <a href="https://starsearn.com/calculator">StarsEarn</a></p>

That's it: no script, no API key, nothing to update. Please keep the "Powered by StarsEarn" line — it keeps the tool free.

Options

Two query parameters, both optional:

• theme=light — a light version for white pages (the code on the embed page adds a thin border to it).
• lang=en|uk|de|fr|es — fix the language. Without it, the widget shows each visitor's browser language and falls back to English.

<iframe src="https://starsearn.com/widget/stars-calculator?theme=light&lang=de" ...></iframe>

The widget fills any width up to 480 px. The 390 px height fits it from 280 px to 480 px wide in all five languages — we measured every combination in Chromium, WebKit and Firefox, including a seven-digit number of Stars.

Privacy

The widget sets no cookies, stores nothing in the visitor's browser and loads no analytics or ads. Everything it loads — the page, its script, the logo and the GRAM rate — comes from starsearn.com.

How it's built

A few details that may be useful if you're building an embeddable widget yourself. The site runs on Next.js (App Router).

1. Only one route can be framed. Every page sends X-Frame-Options: DENY; the widget route drops it and allows any parent through CSP instead:

// next.config.ts
async headers() {
  return [
    { source: '/((?!widget/).*)', headers: securityHeaders }, // X-Frame-Options: DENY
    {
      source: '/widget/:path*',
      headers: securityHeaders
        .filter((h) => h.key !== 'X-Frame-Options')
        .map((h) => h.key === 'Content-Security-Policy'
          ? { ...h, value: `${h.value}; frame-ancestors *` }
          : h),
    },
  ];
}

The widget page also lives outside the localized route tree, so it renders without the site's header, navigation and footer, and it is noindex with a canonical pointing at the embed page.

2. The language is picked on the server. Reading Accept-Language in the route avoids the flash of English you'd get from detecting navigator.language after hydration:

const LANGS = ['en', 'uk', 'de', 'fr', 'es'];

export function widgetLangFromHeader(header: string | null) {
  const tags = (header ?? '')
    .split(',')
    .map((part) => {
      const [tag, ...params] = part.trim().split(';');
      const q = params.map((x) => x.trim()).find((x) => x.startsWith('q='));
      return { lang: tag.trim().toLowerCase().split('-')[0], q: q ? Number(q.slice(2)) || 0 : 1 };
    })
    .filter((t) => t.lang && t.q > 0)
    .sort((a, b) => b.q - a.q);
  return tags.find((t) => LANGS.includes(t.lang))?.lang ?? 'en';
}

Numbers then follow the language too: Intl.NumberFormat with currencyDisplay: 'narrowSymbol' keeps a plain "$" everywhere (French would otherwise print "$US"), with a fallback for older Safari.

3. No third-party requests inside someone else's page. The site's Google Analytics loader runs only on our own domain and never on the widget route — not just "disabled", but never requested. A site in the EU that embeds a widget which calls Google would need its visitors' consent for that.

4. Embeds can't hammer upstream APIs. The GRAM rate is fetched server-side and cached for 15 minutes, so a thousand widget views still mean only four price refreshes an hour.

5. The credit line sits outside the iframe. A link inside the frame belongs to the framed document, not to the page around it — which is why the "Powered by" line is part of the embed code rather than the widget.

Get the code

Pick dark or light and a language, preview it, and copy the code on starsearn.com/embed. The full calculator — buy price vs withdrawal value side by side — is at starsearn.com/calculator.

If you add it somewhere, I'd love to see it — drop the link in the comments.