Widgets
Embed real-time CryHub market data on any site — copy a snippet and paste it into your HTML.
How it works
Include the CryHub widgets script once, then drop the custom element tag wherever you want the widget to appear. Attributes on the tag control the coin, pair, theme, and size.
Live price chart
Candlestick chart with 24h stats and timeframe selector.
Preview
Configure
Embed
<script src="/cryhub-widgets.js"></script>
<cryhub-chart-widget></cryhub-chart-widget>Mini chart
Compact line chart with the latest price and 24h change.
Preview
Configure
Embed
<script src="/cryhub-widgets.js"></script>
<cryhub-mini-widget></cryhub-mini-widget>Ticker overview
Single-symbol card with price, 24h change, high, low, and volume.
Preview
Configure
Embed
<script src="/cryhub-widgets.js"></script>
<cryhub-ticker-widget></cryhub-ticker-widget>Order book
Top bids and asks with aggregated depth bars.
Preview
Configure
Embed
<script src="/cryhub-widgets.js"></script>
<cryhub-orderbook-widget></cryhub-orderbook-widget>Depth chart
Cumulative bid/ask liquidity around the mid price.
Preview
Configure
Embed
<script src="/cryhub-widgets.js"></script>
<cryhub-depth-widget></cryhub-depth-widget>Trade history
Stream of recent buys and sells for any pair.
Preview
Configure
Embed
<script src="/cryhub-widgets.js"></script>
<cryhub-trades-widget></cryhub-trades-widget>Top movers
Top gainers, losers, and volume leaders across the market.
Preview
Configure
Embed
<script src="/cryhub-widgets.js"></script>
<cryhub-leaderboard-widget></cryhub-leaderboard-widget>Market heatmap
Treemap of the broader market — boxes sized by 24h volume, colored by % change.
Preview
Configure
Embed
<script src="/cryhub-widgets.js"></script>
<cryhub-treemap-widget></cryhub-treemap-widget>