AlkePulse

Embeddable Bitcoin price ticker and converter web components. Zero dependencies, zero backend — works on any website.

Quick Start

CDN

<script src="https://cdn.jsdelivr.net/npm/alke-pulse/dist/alke-pulse.min.js"></script>

<alke-btc-price currencies="USD,EUR,GBP" show-sats></alke-btc-price>
<alke-btc-converter show-sats></alke-btc-converter>

npm

npm install alke-pulse

import 'alke-pulse';

Vanilla JS (auto-init)

No custom elements needed — just add classes and data attributes:

<script src="https://cdn.jsdelivr.net/npm/alke-pulse/dist/alke-pulse.min.js"></script>

<div class="btc-ticker" data-currencies="USD,EUR,GBP" data-show-sats></div>
<div class="alke-converter" data-default-from="USD" data-default-to="BTC"></div>

Widgets

<alke-btc-price> — Price Ticker

Displays the current Bitcoin price with a currency selector.

| Attribute | Default | Description | |-----------|---------|-------------| | currency | USD | Active currency on load | | currencies | USD,NGN,GHS,KES,ZAR | Comma-separated currency pills | | show-sats | — | Show sats-per-fiat-unit below price | | theme | light | light or dark | | refresh-interval | 60000 | Poll interval in ms (min 10000) |

<alke-btc-price
  currency="EUR"
  currencies="EUR,GBP,USD,NGN"
  show-sats
  theme="dark">
</alke-btc-price>

<alke-btc-converter> — Conversion Widget

Convert between BTC, sats, and fiat currencies.

| Attribute | Default | Description | |-----------|---------|-------------| | default-from | BTC | Initial "from" unit | | default-to | USD | Initial "to" unit | | currencies | USD,NGN,GHS,KES,ZAR | Available fiat currencies | | show-sats | — | Show sats equivalent below result | | theme | light | light or dark | | refresh-interval | 60000 | Poll interval in ms (min 10000) |

Units: BTC, SATS, and any supported currency code.

<alke-btc-converter
  default-from="USD"
  default-to="BTC"
  currencies="USD,EUR,GBP,NGN,GHS"
  show-sats>
</alke-btc-converter>

Supported Currencies

Any valid ISO 4217 currency code works — if the forex API has a rate for it, the widget displays it. That's 150+ currencies including:

Defaults: USD, NGN, GHS, KES, ZAR

Also works: EUR, GBP, UGX, TZS, RWF, ETB, XOF, XAF, EGP, MAD, JPY, INR, BRL, and any other 3-letter code the API supports.

Theming

Customize via CSS custom properties on the element:

alke-btc-price {
  --ap-bg: #1e293b;
  --ap-text: #f1f5f9;
  --ap-accent: #22c55e;
  --ap-border: #334155;
  --ap-pill: #334155;
  --ap-pill-on: #22c55e;
  --ap-pill-on-t: #000;
}

Or use the built-in dark theme: theme="dark".

Shared Price Engine

Both widgets share a singleton price engine. Multiple widgets on one page make only one set of API calls. The engine:

• Fetches BTC/USD from Binance, Coinbase, and Kraken (median of 3)
• Fetches forex rates from open.er-api.com (6hr cache)
• Pauses polling when the tab is hidden
• Uses exponential backoff on failures

Browser Support

Chrome 73+, Firefox 101+, Safari 16.4+ (requires adoptedStyleSheets support).

CSP

If your site uses Content Security Policy, add these to connect-src:

connect-src data-api.binance.vision api.coinbase.com api.kraken.com open.er-api.com cdn.jsdelivr.net;

Known Limitations

• NGN rates: Free forex APIs return the official CBN rate, which can differ 30–60% from the parallel market rate.
• BTCUSDT vs BTCUSD: Binance returns BTC/USDT (Tether), while Coinbase and Kraken return BTC/USD. The divergence is typically negligible (~0.05%).

License

MIT