DEV Community

Ozor
Ozor

Posted on • Originally published at api-catalog-three.vercel.app

Add Live Crypto Prices to Any Website in 60 Seconds (Free Widget)

#webdev #tutorial #cryptocurrency #javascript

Want to show live crypto prices on your website? Here's how to do it with a single line of HTML.

The Widget

Drop this into any HTML page:

<script src="https://api-catalog-three.vercel.app/widget/crypto-ticker.js"
  data-coins="BTC,ETH,SOL"
  data-theme="dark">
</script>
Enter fullscreen mode Exit fullscreen mode

That's it. You'll get a live ticker showing real-time prices for Bitcoin, Ethereum, and Solana with 24h change indicators. No API key, no signup, no configuration.

Two Styles

Ticker (horizontal bar)

A compact one-line ticker, perfect for headers, footers, or sidebars:

<script src="https://api-catalog-three.vercel.app/widget/crypto-ticker.js"
  data-coins="BTC,ETH,SOL,DOGE"
  data-theme="dark"
  data-style="ticker">
</script>
Enter fullscreen mode Exit fullscreen mode

Cards (grid)

A card layout showing each coin with more detail:

<script src="https://api-catalog-three.vercel.app/widget/crypto-ticker.js"
  data-coins="BTC,ETH,SOL"
  data-theme="light"
  data-style="cards">
</script>
Enter fullscreen mode Exit fullscreen mode

Configuration

All configuration happens through data- attributes:

Attribute Default Options
data-coins BTC,ETH,SOL Any combination of 40+ tokens
data-theme dark dark, light
data-style ticker ticker, cards
data-refresh 60 30-300 (seconds)

Supported Tokens

BTC, ETH, SOL, BNB, XRP, DOGE, ADA, AVAX, DOT, LINK, ARB, OP, ATOM, NEAR, APT, SUI, UNI, AAVE, MKR, LDO, RENDER, FET, ONDO, PENDLE, LTC, BCH, XLM, XMR, TRX, TON, HBAR, and more.

Why This Exists

I needed a way to add live prices to a project without:

  • Registering for yet another API key
  • Dealing with rate limits
  • Adding a heavy dependency
  • Paying for a "premium" widget

So I built a free one. It's ~3KB, fetches data from CoinGecko, auto-refreshes, and works on any website.

Technical Details

  • Zero dependencies — vanilla JavaScript, no frameworks
  • Under 3KB — won't bloat your page
  • CORS enabled — works from any domain
  • 60-second cache — fresh data without hammering the API
  • Auto-refresh — prices update automatically
  • Self-contained — creates its own DOM, no CSS conflicts

Visual Configurator

Don't want to write HTML? Use the interactive widget builder to customize your widget, preview both styles, and copy the embed code.

Need More Data?

The widget covers basic price display. If you need historical data, more tokens, or programmatic access, check out the Crypto Price API — 200 free credits, no credit card.

The widget is part of Frostbyte, a collection of 40+ free developer APIs.

Top comments (0)