Fiboniq Widgets

LIVE

Embeddable real-time market data widgets for any website.

Ticker Tape

Horizontal scrolling ticker with live prices. Pauses on hover. Theme via data-theme.

Dark
Light
<div class="tw-ticker" data-symbols="EURUSD,GBPUSD,USDJPY,XAUUSD,BTCUSD,ETHUSD" data-theme="dark" data-speed="55"></div>
<script src="__HOST__/ticker-tape.js" async></script>

Price Card

Single-symbol card with live bid/ask and spread. Great for sidebars and dashboards.

Dark
Light
<div class="tw-price-card" data-symbol="BTCUSD" data-theme="dark"></div>
<script src="__HOST__/price-card.js" async></script>

Market Overview

Sortable live table with bid, ask, spread, and direction. Click any column header to sort.

Dark
Light
<div class="tw-market-overview" data-symbols="EURUSD,GBPUSD,USDJPY,XAUUSD,BTCUSD,ETHUSD" data-theme="dark" data-title="Market Overview"></div>
<script src="__HOST__/market-overview.js" async></script>

Price Banner

Full-width hero banner with a large live price and since-open change. Ideal for landing pages and headers.

Dark
Light
<div class="tw-price-banner" data-symbol="BTCUSD" data-theme="dark"></div>
<script src="__HOST__/price-banner.js" async></script>

Mini Chart

Live sparkline built entirely from incoming ticks — no historical feed needed. Colors by the window's trend.

Dark
Light
<div class="tw-mini-chart" data-symbol="BTCUSD" data-theme="dark" data-points="60"></div>
<script src="__HOST__/mini-chart.js" async></script>

Top Movers

Auto-ranked leaderboard by % change — gainers at the top, losers at the bottom. Re-ranks live.

Dark
Light
<div class="tw-top-movers" data-symbols="EURUSD,GBPUSD,USDJPY,XAUUSD,BTCUSD,ETHUSD,SOLUSD" data-theme="dark" data-title="Top Movers"></div>
<script src="__HOST__/top-movers.js" async></script>

Heatmap

Color-coded grid tinted by each symbol's movement — read the whole market at a glance. Tiles stay put; only color changes.

Dark
Light
<div class="tw-heatmap" data-symbols="EURUSD,GBPUSD,USDJPY,XAUUSD,BTCUSD,ETHUSD" data-theme="dark" data-title="Heatmap" data-cols="3"></div>
<script src="__HOST__/heatmap.js" async></script>

Currency Converter

Live two-way conversion at the real mid rate. Type in either field; the swap button reverses direction.

Dark
Light
<div class="tw-converter" data-symbol="EURUSD" data-theme="dark" data-amount="100"></div>
<script src="__HOST__/converter.js" async></script>

Configuration

Common data-* attributes. Each widget uses the ones relevant to it.

data-symbolsComma-separated symbol list (e.g. "EURUSD,BTCUSD,XAUUSD")
data-symbolSingle symbol for Price Card, Banner, Mini Chart, Converter
data-theme"dark" (default) or "light"
data-titleHeading text for Market Overview, Top Movers, Heatmap, Converter
data-labelDisplay name shown under the symbol
data-speedTicker scroll speed in seconds (default "40")
data-pointsMini Chart rolling window size (default "60")
data-colsHeatmap fixed column count (default: responsive)
data-countTop Movers max rows shown
data-amountConverter starting amount (default "1")
data-digitsOverride decimal places (otherwise inferred per symbol)

Licensing

Free to use with Fiboniq branding. Remove branding with a commercial license.

Community
All widgets with "Powered by Fiboniq Technologies" branding included
Free
White Label
No branding, dedicated connection limits, priority support
Get Started