16 free widgets
Copy raw HTML, CSS and JavaScript snippets into any website, dashboard or trading platform. Every widget connects to the market data API with a single API key.
How it works
Filter by category (Dashboard, Trading, Analytics) and pick the component you need.
Every snippet calls the RealMarketAPI REST API with your key. Replace YOUR_API_KEY before you ship.
Paste the raw HTML/CSS/JS snippet into any page. No build step and no dependencies.
Example embed: price card for XAUUSD
<!-- RealMarketAPI — Price Card Widget -->
<!-- Fetches: GET https://api.realmarketapi.com/api/v1/price?apiKey=YOUR_KEY&symbolCode=SYMBOL&timeFrame=M1 -->
<style>
.rma-card { font-family: system-ui, sans-serif; background: #0f172a; border-radius: 14px; padding: 20px 24px; max-width: 280px; color: #f1f5f9; box-shadow: 0 4px 24px rgba(0,0,0,.35); }
.rma-card-label { font-size: 10px; text-transform: uppercase; letter-spacing:.1em; color:#94a3b8; margin-bottom:4px; }
.rma-card-sym { font-size: 18px; font-weight: 700; }
.rma-card-price { font-size: 36px; font-weight: 900; font-family: monospace; margin: 8px 0 12px; }
.rma-card-row { display: flex; gap: 10px; }
.rma-card-stat { flex:1; background:rgba(255,255,255,.07); border-radius:8px; padding:8px 12px; }
.rma-card-stat-lbl { font-size:9px; text-transform:uppercase; letter-spacing:.08em; color:#64748b; }
.rma-card-stat-val { font-size:12px; font-weight:600; margin-top:2px; }
.rma-up { color:#34d399; } .rma-dn { color:#f87171; }
.rma-dot { display:inline-block; width:7px; height:7px; border-radius:50%; background:#34d399; animation:rma-pulse 1.5s ease-in-out infinite; margin-right:4px; }
@keyframes rma-pulse { 0%,100%{opacity:1} 50%{opacity:.3} }
</style>
<div class="rma-card">
<div class="rma-card-label">Market Price</div>
<div class="rma-card-sym">XAUUSD</div>
<div class="rma-card-price" id="rma-price">—</div>
<div class="rma-card-row">
<div class="rma-card-stat">
<div class="rma-card-stat-lbl">24h Change</div>
<div class="rma-card-stat-val" id="rma-chg">—</div>
</div>
<div class="rma-card-stat">
<div class="rma-card-stat-lbl">Source</div>
<div class="rma-card-stat-val"><span class="rma-dot"></span>Real-time</div>
</div>
</div>
</div>
<script>
(function() {
const API_KEY = "YOUR_API_KEY";
const SYM = "XAUUSD";
const BASE = "https://api.realmarketapi.com/api/v1/price";
async function load() {
try {
const r = await fetch(BASE + "?apiKey=" + API_KEY + "&symbolCode=" + SYM + "&timeFrame=M1");
const j = await r.json();
const d = j.data ?? j;
const close = parseFloat(d.closePrice ?? 0);
const open = parseFloat(d.openPrice ?? close);
const c = open ? (close - open) / open * 100 : 0;
document.getElementById("rma-price").textContent = close.toLocaleString("en-US",{minimumFractionDigits:2,maximumFractionDigits:4});
const el = document.getElementById("rma-chg");
el.textContent = (c >= 0 ? "+" : "") + c.toFixed(2) + "%";
el.className = "rma-card-stat-val " + (c >= 0 ? "rma-up" : "rma-dn");
} catch(e) {}
}
load(); setInterval(load, 60000);
})();
</script>Gallery
Previews use sample data until live prices load. Open a card to copy its embed code.
Biggest 24-hour gainers and losers across every symbol. Uses the public hourly-close endpoint, so the embed needs no API key.
Convert an amount between the two currencies of a forex pair at the latest price, with a swap button. Pick the pair when you copy the code.
Shows which forex sessions (Sydney, Tokyo, London, New York) are open right now. Runs entirely in the browser, with no API calls.
Scrolling market tape with real-time prices and 24h change for all symbols. Requires Starter — uses the /price/market endpoint.
Single-symbol price card showing close price, 24h change indicator, and live status. Switchable between symbols.
Compact multi-symbol table with live prices and directional change badges. Requires Starter — uses the /price/market endpoint.
Lightweight SVG line chart of recent closes. Ideal for compact dashboard tiles or news widgets showing price trend.
OHLC candlestick visualization with wick lines and coloured bodies. Supports all timeframes available on your plan.
Semicircular gauge displaying the Relative Strength Index (RSI) with colour-coded overbought and oversold zones.
MACD histogram with signal and MACD lines. Shows momentum cross signals favoured by technical analysts.
Price chart overlaid with configurable Simple or Exponential Moving Average lines. Supports multiple MA periods simultaneously.
Real-time bid and ask prices with live spread calculation. Essential for forex and crypto traders who need precise entry and exit points.
Horizontal bar chart showing relative trading volume across all symbols in your plan. Requires Starter — uses the /price/market endpoint.
Open, High, Low, Close card for a single symbol with 24h change. Great for concise tooltips or sidebar panels on any dashboard.
Color-coded tile grid showing 24h % change for all symbols. Hot green = rising, deep red = falling. Requires Starter — uses the /price/market endpoint.
Composite Fear & Greed score (0–100) with trend classification and RSI/MACD sub-components. Requires Pro — uses the /indicator/sentiment endpoint.
Start free — no credit card required. Upgrade when you need more symbols, timeframes, or indicator widgets.