Paste either snippet into your page — a Custom HTML block on WordPress, Shopify, or Squarespace works too. Both snippets update live as you customize, so what you copy is exactly what you configured.
<!-- Free Crypto Price Ticker widget by haynes lab — https://hayneslab.dev/tools/widgets/crypto-price-ticker -->
<script data-hl-config='[{"name":"Bitcoin","symbol":"BTC","price":67412.50,"change":2.41},{"name":"Ethereum","symbol":"ETH","price":3521.08,"change":-1.18},{"name":"Solana","symbol":"SOL","price":162.74,"change":5.63},{"name":"Cardano","symbol":"ADA","price":0.4521,"change":-0.84},{"name":"Dogecoin","symbol":"DOGE","price":0.1283,"change":3.02}]'>
/*!
* haynes lab — Crypto Price Ticker widget (free)
* Docs & embed code: https://hayneslab.dev/tools/widgets/crypto-price-ticker
*/
(function () {
'use strict';
var PREFIX = 'hlw-crypto-price-ticker';
var STYLE_ID = 'hlw-crypto-price-ticker-styles';
var LOG_PREFIX = '[haynes lab crypto-price-ticker]';
var SAMPLE_COINS = [
{ name: 'Bitcoin', symbol: 'BTC', price: 67412.5, change: 2.41 },
{ name: 'Ethereum', symbol: 'ETH', price: 3521.08, change: -1.18 },
{ name: 'Solana', symbol: 'SOL', price: 162.74, change: 5.63 },
{ name: 'Cardano', symbol: 'ADA', price: 0.4521, change: -0.84 },
{ name: 'Dogecoin', symbol: 'DOGE', price: 0.1283, change: 3.02 }
];
function findScript() {
return document.currentScript ||
document.querySelector('script[src*="widgets/crypto-price-ticker.js"]');
}
function injectStyles() {
if (document.getElementById(STYLE_ID)) return;
var css =
'.' + PREFIX + ', .' + PREFIX + ' * { box-sizing: border-box; }' +
'.' + PREFIX + ' { position: relative; max-width: 960px; margin: 0 auto; padding: 16px 16px 30px;' +
' font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;' +
' font-size: 16px; line-height: 1.5; color: #1f2937; background: #ffffff;' +
' border: 1px solid #e5e7eb; border-radius: 12px; }' +
'.' + PREFIX + '__list { margin: 0; padding: 0; list-style: none; gap: 12px; }' +
'.' + PREFIX + '__list--row { display: flex; overflow-x: auto; padding-bottom: 4px; }' +
'.' + PREFIX + '__list--row .' + PREFIX + '__coin { flex: 0 0 auto; min-width: 172px; }' +
'.' + PREFIX + '__list--grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(172px, 1fr)); }' +
'.' + PREFIX + '__coin { padding: 12px 14px; background: #ffffff;' +
' border: 1px solid #e5e7eb; border-radius: 10px; }' +
'.' + PREFIX + '__top { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }' +
'.' + PREFIX + '__badge { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%;' +
' display: flex; align-items: center; justify-content: center; background: var(--hlw-accent);' +
' color: #ffffff; font-size: 10px; font-weight: 700; letter-spacing: 0.02em; }' +
'.' + PREFIX + '__name { font-weight: 600; font-size: 14px; color: #111827; }' +
'.' + PREFIX + '__symbol { font-size: 12px; color: #6b7280; text-transform: uppercase; }' +
'.' + PREFIX + '__price { font-size: 18px; font-weight: 700; color: #111827; }' +
'.' + PREFIX + '__change { display: inline-flex; align-items: center; gap: 4px; margin-top: 2px;' +
' padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 600; }' +
'.' + PREFIX + '__change--up { color: #15803d; background: #dcfce7; }' +
'.' + PREFIX + '__change--down { color: #b91c1c; background: #fee2e2; }' +
'.' + PREFIX + '__credit { position: absolute; right: 10px; bottom: 6px; font-size: 11px;' +
' display: inline-flex; align-items: center; gap: 4px; color: #9ca3af; text-decoration: none; }' +
'.' + PREFIX + '__credit svg { display: block; }' +
'.' + PREFIX + '__credit:hover { color: #6b7280; text-decoration: underline; }' +
'@media (max-width: 560px) { .' + PREFIX + ' { padding: 12px 12px 28px; }' +
' .' + PREFIX + '__list--row .' + PREFIX + '__coin { min-width: 152px; } }';
var style = document.createElement('style');
style.id = STYLE_ID;
style.textContent = css;
document.head.appendChild(style);
}
function normalizeCoins(data) {
if (!Array.isArray(data)) return null;
var coins = [];
data.forEach(function (c) {
if (!c || typeof c.name !== 'string' || !c.name) return;
var price = Number(c.price);
var change = Number(c.change);
if (!isFinite(price)) return;
coins.push({
name: c.name,
symbol: typeof c.symbol === 'string' && c.symbol ? c.symbol : '?',
price: price,
change: isFinite(change) ? change : 0
});
});
return coins.length ? coins : null;
}
function parseConfigCoins(script) {
var raw = script.getAttribute('data-hl-config');
if (!raw) return null;
var data;
try {
data = JSON.parse(raw);
} catch (e) {
console.warn(LOG_PREFIX + ' data-hl-config is not valid JSON. Using built-in sample data.', e);
return null;
}
var coins = normalizeCoins(data);
if (!coins) {
console.warn(LOG_PREFIX + ' data-hl-config must be a JSON array of {"name","symbol","price","change"}. Using built-in sample data.');
}
return coins;
}
function loadCoins(script, done) {
var fallback = parseConfigCoins(script) || SAMPLE_COINS;
var endpoint = script.getAttribute('data-hl-endpoint');
if (!endpoint) { done(fallback); return; }
fetch(endpoint)
.then(function (res) {
if (!res.ok) throw new Error('HTTP ' + res.status);
return res.json();
})
.then(function (data) {
var coins = normalizeCoins(data);
if (!coins) throw new Error('Response is not a JSON array of coins');
done(coins);
})
.catch(function (e) {
console.warn(LOG_PREFIX + ' Could not load data-hl-endpoint "' + endpoint + '". Falling back to data-hl-config or sample data.', e);
done(fallback);
});
}
function el(tag, className, text) {
var node = document.createElement(tag);
if (className) node.className = className;
if (text != null) node.textContent = text;
return node;
}
function logoSvg() {
var svgNS = 'http://www.w3.org/2000/svg';
var svg = document.createElementNS(svgNS, 'svg');
svg.setAttribute('viewBox', '0 0 32 32');
svg.setAttribute('width', '13');
svg.setAttribute('height', '13');
svg.setAttribute('aria-hidden', 'true');
svg.setAttribute('focusable', 'false');
function circle(cx, cy, r, attrs) {
var c = document.createElementNS(svgNS, 'circle');
c.setAttribute('cx', cx);
c.setAttribute('cy', cy);
c.setAttribute('r', r);
for (var key in attrs) c.setAttribute(key, attrs[key]);
svg.appendChild(c);
}
circle(16, 16, 16, { fill: '#0f0a0a' });
circle(16, 16, 12, { fill: 'none', stroke: '#fff5f5', 'stroke-width': 1, opacity: 0.3 });
circle(16, 16, 9, { fill: 'none', stroke: '#fff5f5', 'stroke-width': 1, opacity: 0.5 });
circle(16, 16, 6, { fill: 'none', stroke: '#fff5f5', 'stroke-width': 1.2, opacity: 0.9 });
circle(16, 16, 3, { fill: '#06b6d4' });
circle(24.5, 7.5, 2, { fill: '#f97316' });
circle(7, 16, 1.8, { fill: '#f97316' });
circle(20, 20, 1.5, { fill: '#f97316' });
return svg;
}
function formatPrice(price, currency) {
var decimals = price >= 1 ? 2 : 4;
return currency + price.toLocaleString(undefined, {
minimumFractionDigits: 2,
maximumFractionDigits: decimals
});
}
function build(script, coins) {
var layout = script.getAttribute('data-hl-layout') === 'grid' ? 'grid' : 'row';
var currency = script.getAttribute('data-hl-currency') || '$';
var accent = script.getAttribute('data-hl-accent') || '#f97316';
injectStyles();
var root = el('div', PREFIX);
root.setAttribute('role', 'region');
root.setAttribute('aria-label', 'Cryptocurrency prices');
root.style.setProperty('--hlw-accent', accent);
var list = el('ul', PREFIX + '__list ' + PREFIX + '__list--' + layout);
root.appendChild(list);
coins.forEach(function (c) {
var up = c.change >= 0;
var priceText = formatPrice(c.price, currency);
var changeText = (up ? '+' : '') + c.change.toFixed(2) + '%';
var coin = el('li', PREFIX + '__coin');
coin.setAttribute('aria-label',
c.name + ' (' + c.symbol + '): ' + priceText + ', ' +
(up ? 'up ' : 'down ') + Math.abs(c.change).toFixed(2) + '% in 24 hours');
var top = el('div', PREFIX + '__top');
var badge = el('span', PREFIX + '__badge', c.symbol.slice(0, 4).toUpperCase());
badge.setAttribute('aria-hidden', 'true');
top.appendChild(badge);
var label = el('div');
label.appendChild(el('div', PREFIX + '__name', c.name));
label.appendChild(el('div', PREFIX + '__symbol', c.symbol));
top.appendChild(label);
coin.appendChild(top);
coin.appendChild(el('div', PREFIX + '__price', priceText));
var pill = el('span', PREFIX + '__change ' + PREFIX + '__change--' + (up ? 'up' : 'down'));
var arrow = el('span', null, up ? '▲' : '▼');
arrow.setAttribute('aria-hidden', 'true');
pill.appendChild(arrow);
pill.appendChild(document.createTextNode(changeText));
coin.appendChild(pill);
list.appendChild(coin);
});
var credit = el('a', PREFIX + '__credit');
credit.appendChild(logoSvg());
credit.appendChild(document.createTextNode('Powered by haynes lab'));
credit.href = 'https://hayneslab.dev/tools/widgets/crypto-price-ticker';
credit.target = '_blank';
credit.rel = 'noopener';
root.appendChild(credit);
if (script.parentNode && script.parentNode.nodeName !== 'HEAD') {
script.insertAdjacentElement('afterend', root);
} else {
document.body.appendChild(root);
}
}
function init() {
var script = findScript();
if (!script) {
console.warn(LOG_PREFIX + ' Could not locate its own script tag. Nothing rendered.');
return;
}
loadCoins(script, function (coins) { build(script, coins); });
}
if (document.body) {
init();
} else {
document.addEventListener('DOMContentLoaded', init);
}
})();
</script>