Embeddable widget
Drop a live rates ticker or card onto any website with one script tag — no signup, no key required. Build and preview yours in the widget builder.
Quick start
HTML
<script src="https://pricefeed.online/widget/v1.js" async></script> <pricefeed-widget type="ticker" pairs="BTC/UAH,ETH/USD,XAU/UAH" theme="auto"></pricefeed-widget>
Attributes
| Attribute | Values | Description |
|---|---|---|
type | ticker, card | Widget layout. Default ticker. |
pairs | BTC/UAH,ETH/USD | Comma-separated pairs (up to 20). |
theme | auto, light, dark | Color theme. auto follows the visitor's OS. |
show-change | true/false | Show 24h percent change. Default true. |
show-sparkline | true/false | Show 24h mini chart (card type). Default true. |
decimals | integer | Force decimal places. Default: auto by magnitude. |
locale | en-US, uk… | Number formatting locale. |
refresh | seconds | Poll interval. Minimum 15. Default 30. |
api-key | string | Optional — higher rate limit for busy embeds. |
Theming with CSS variables
Override any of these on the element to match your design — they pierce the widget's shadow DOM:
CSS
pricefeed-widget {
--pf-bg: #0a101c;
--pf-text: #eef3fa;
--pf-accent: #38d4f5;
--pf-up: #2fd58c;
--pf-down: #f4655f;
--pf-radius: 12px;
--pf-font: "Inter", system-ui, sans-serif;
}| Variable | What it controls |
|---|---|
--pf-bg | Background |
--pf-text | Primary text |
--pf-muted | Secondary text (symbols, quote) |
--pf-accent | Accent / links |
--pf-up / --pf-down | Up / down colors |
--pf-border | Border color |
--pf-radius | Corner radius |
--pf-font | Font family |
Examples
Card with custom theme
<pricefeed-widget type="card" pairs="BTC/UAH" style="--pf-accent:#7c5cff; --pf-radius:16px;"></pricefeed-widget>
Data comes from the same aggregated API (median across multiple sources). The free widget shows a small “Powered by PriceFeed” link.