Symbol Overview Widget — Chart and Live Price
Give one symbol the space it deserves: the asset logo, its full name, the exchange it trades on, and a large live price — with a full price chart underneath. Readers switch between a line and a candlestick view with a single click, and the quote keeps updating over WebSocket while they read. It is the same header Vunelix uses on its own symbol pages, packaged as a widget you can drop into any site.
Sign up for free, add your website domain, and paste the embed code above into your HTML. Your widget will activate automatically.
Search and select one or more symbols. Each becomes a tab. Max 5 symbols.
Display the full asset name (e.g. Bitcoin / TetherUS).
Display the ticker and its exchange (e.g. BTCUSDT — BINANCE).
Display the asset logo (both logos for a pair).
Display an open/closed badge with the market's trading hours.
Display the extended-hours price when a pre-market or after-hours session is running.
Display price change and change percentage.
Display when the price was last updated (e.g. "As of today, 08:19 PM GMT+5").
Draw the chart as a smooth line or as candlesticks.
Let visitors switch between line and candlestick view.
Which range buttons appear below the chart. Drag to reorder.
Which range the chart opens on. Must be one of the ranges above.
Let visitors switch the chart timeframe.
Height of the chart area in pixels.
How live price changes are highlighted when prices update in real time.
How long the color highlight stays visible after a price change (e.g. 1500 = 1.5 seconds).
Auto matches your site's language — when visitors switch it, the widget follows. Pick a language to keep it fixed.
Auto matches your site's dark/light mode — when visitors switch your site theme, the widget follows automatically. Choose Light or Dark to keep it fixed.
Remove the widget background color so it blends with your page.
If you have your own loading spinner or skeleton on the page, enter its ID or class here (e.g. #my-loader). The widget will remove it once data is ready.
Add your own CSS code to change fonts, colors, spacing, or any other styling in the widget.
Color for positive values (gains, up arrows).
Color for negative values (losses, down arrows).
Main background color of the widget.
Background color for cards, rows, and hover states.
Primary text color for headings and values.
Color for labels, descriptions, and muted text.
Color for borders, dividers, and outlines.
The Header and the Chart Together
A price on its own answers "how much"; a chart answers "coming from where". This widget puts both in one block. Above: the pair's logos, its full name, the ticker with its exchange, and today's change. Below: the price history, with dates along the bottom and price levels down the right, so the number at the top has an arc behind it.
Line or Candlesticks — the Reader Chooses
Two buttons sit above the chart. Line keeps it calm and readable, right for a general audience skimming an article. Candlesticks show each session's open, high, low and close, which is what a trader actually reads. You pick which one loads first, and you can hide the buttons entirely if you would rather the chart stay as you set it. Switching views costs nothing — the data is already loaded, so the chart redraws instantly.
Which Exchange the Price Comes From
The same pair can trade at slightly different prices on different venues. The chip beside the name says exactly which one this is — BTCUSDT on BINANCE, not just "Bitcoin" — so a reader comparing figures across sources knows what they are looking at. That matters more with a chart present than with a bare quote.
Key Features
- Chart plus live quote — price history and the current price in one block, not two widgets.
- Line or candlestick — set the default, and let visitors switch with one click.
- Full OHLC on hover — open, high, low and close for any session in the candlestick view.
- Asset logos — both sides of a pair, picked automatically from the symbol.
- Exchange shown — the ticker and the venue it trades on, so the price is unambiguous.
- Live over WebSocket — price, change and change percentage update without a refresh.
- Adjustable height — from a compact 120px strip to a 600px feature chart.
- Light and dark themes — follows the host page, with full color customization.
- Free to embed — no signup, no API key, no monthly fees.
Who Uses This Widget?
Crypto projects put their own token at the top of the homepage, chart and all. Finance writers open an article with the asset they are about to discuss, so the reader sees the trend before the first paragraph. Broker landing pages feature a headline pair. Anywhere a single symbol deserves more than a number — but less than a full trading terminal — this is the right size. For a compact one-line quote with no chart, use the single ticker instead; for many symbols at once, see market overview.
Vunelix vs TradingView — Symbol Overview
TradingView's Symbol Overview and Mini Chart widgets render inside an iframe carrying TradingView's branding, fonts and colors. The iframe adds page weight, cannot inherit your site's theme, and leaves a visible seam in your layout.
Vunelix's symbol overview is a native web component with Shadow DOM — no iframe, lighter to load, and it picks up your light or dark theme on its own. The chart is drawn as plain SVG, so it stays sharp at any size and scales with its container rather than a fixed pixel box. Prices arrive over the same WebSocket feed that powers Vunelix's own symbol pages.