Quote Board Widget — Live Bid & Ask
Put a broker's dealing board on your page. The quote board is a grid of live cards — each one shows the pair, its daily change with an up or down arrow, and the Bid and Ask as large quotes with the last two digits sized bigger, exactly the way a trading desk reads them. A Price and Spread bar sits underneath. Add as many forex pairs as you like, set the number of columns, and every quote updates live over WebSocket. No signup, no API key.
Sign up for free, add your website domain, and paste the embed code above into your HTML. Your widget will activate automatically.
The pairs shown as cards. Drag to reorder. Bid/Ask + spread work best on forex pairs. Max 8 symbols.
How many cards per row. Auto fits as many as the width allows.
The short symbol in the card header, e.g. EURUSD.
The full name, e.g. "Euro / US Dollar". With the symbol on, it shows small underneath; on its own it replaces the symbol.
The percent change with up/down arrow in the card header.
The mid price in the bottom bar.
The Ask − Bid spread (in pips) in the bottom bar.
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.
A Dealing Board, Not a Table
Rows of numbers are hard to scan at speed. The quote board lays each pair out as a card with the Bid and Ask as big, glanceable quotes — the pip digits enlarged like a broker terminal — so the two prices that matter jump out. The daily change sits at the top with a coloured arrow, and a Price and Spread bar underneath shows how wide the market is.
Live Over WebSocket
Every card updates in real time — bid, ask, change and spread all move as the market does, with no page refresh. The board is built for forex where the spread is the story, so traders watching your page always see the current market, not a cached snapshot.
Your Pairs, Your Layout
Choose the pairs — majors, minors, exotics, metals — and set how many columns the grid uses, so the board fits a wide dashboard or a narrow sidebar. It reflows to the width it is given and stays readable on mobile.
Key Features
- Broker-style cards — Bid and Ask as large quotes, pip digits enlarged.
- Live updates — price, change and spread over WebSocket.
- Spread bar — see how wide each market is at a glance.
- Your pairs — any forex pairs, majors to exotics plus metals.
- Configurable columns — fits a dashboard or a sidebar.
- Light and dark themes — follows the host page automatically.
- Responsive — reflows to the width it is given.
- Free to embed — no signup, no API key, no monthly fees.
Quote Board or Ticker?
The quote board is for the bid/ask/spread detail a trader needs — a dealing view. If you just want live prices and daily change in compact cards, use the ticker; for a single scrolling strip, the ticker tape.
Who Uses This Widget?
Forex brokers put it on their landing and instrument pages. Trading educators show a live board during lessons. Signal services and prop firms feature their tracked pairs with real spreads.