How to add the Stock Card to your website
- Type a symbol above and choose the size and theme. The preview shows exactly what your visitors will see.
- Click Copy code.
- Paste the code into your page’s HTML where you want the card to appear – in a sidebar, inside an article or in a footer – and publish.
The code has two parts: a <div> that marks where the card goes, and a <script> that draws it:
<div class="ql-stockcard" data-symbol="AAPL" data-size="full" data-theme="light">
<a href="https://www.quotelinks.com/stocks/aapl.html">AAPL stock quote</a> by
<a href="https://www.quotelinks.com/">Quotelinks</a>
</div>
<script src="https://www.quotelinks.com/widgets/stockcard.js" async></script>The two links are shown at the bottom of the card. If JavaScript is turned off, visitors still see them as plain links.
Step by step for popular platforms
- WordPressIn the block editor add a Custom HTML block and paste the code. For a sidebar, use Appearance › Widgets and add a Custom HTML widget.
- BloggerFor a post, switch to HTML view and paste. For the sidebar, go to Layout › Add a Gadget › HTML/JavaScript.
- SquarespaceAdd a Code block to the page and paste the code. Leave “Display Source” off.
- WixUse Add › Embed Code › Embed HTML, choose “Code” and paste. Wix shows the card in a frame; give it about 360 × 380 px.
- GhostIn the editor add an HTML card and paste the code.
- Plain HTMLPaste the code anywhere inside
<body>. Upload the page as usual.
Platforms that don’t allow scripts in posts (for example Medium) can’t show the card; the two links still appear.
Options
| Attribute | Values | What it does |
|---|---|---|
data-symbol | e.g. AAPL, BRK.B, SPY | The stock or ETF to show. |
data-size | full (default), compact | Full: price, change, one-month chart, 52-week range and six key stats. Compact: price and change only. |
data-theme | light (default), dark, auto | Auto follows each visitor’s light or dark system setting. |
Several cards on one page
Repeat the <div> for each symbol and add the <script> tag only once:
<div class="ql-stockcard" data-symbol="MSFT" data-size="compact">
<a href="https://www.quotelinks.com/stocks/msft.html">MSFT stock quote</a> by
<a href="https://www.quotelinks.com/">Quotelinks</a>
</div>
<div class="ql-stockcard" data-symbol="SPY" data-size="compact">
<a href="https://www.quotelinks.com/etfs/spy.html">SPY ETF quote</a> by
<a href="https://www.quotelinks.com/">Quotelinks</a>
</div>
<script src="https://www.quotelinks.com/widgets/stockcard.js" async></script>More free widgets
The Ticker Tape shows a scrolling strip of up to 20 stocks and ETFs across the top of your site, and Market Movers lists the day’s top gainers, losers and most active stocks. See all widgets.
Terms of use
The Stock Card is free for any website, personal or commercial. In return, please keep the two links in the code visible and unchanged. Prices are end-of-day and for information only; they are not investment advice. See the disclaimer.
Frequently asked questions
Is the Stock Card widget free?
Yes. It is free for personal and commercial websites, with no sign-up and no API key. The only condition is that the two links in the embed code stay in place and visible.
How often are the prices updated?
The card shows end-of-day data: the official closing price, change, open, day range and volume of the latest US trading session. It updates after each market close, usually by early evening New York time.
Does it show real-time quotes?
No. The card is an end-of-day quote card. For intraday prices, visitors can click through to the full quote page on Quotelinks.
Which symbols can I use?
More than 5,000 US stocks listed on the NYSE, NASDAQ and NYSE American, and more than 5,000 US-listed ETFs. Class shares work with a dot or a dash (BRK.B or BRK-B). For an ETF the card shows net assets and expense ratio instead of market cap and P/E.
Will it slow down my page?
No. The script is about 5 KB compressed, loads with async so it never blocks your page, and makes one small request per symbol. Several cards for the same symbol share that request.
Will my site's CSS break the card, or the card break my site?
No. The card is drawn inside a Shadow DOM, so your styles don't change it and its styles don't leak into your page.
Can I show several cards on one page?
Yes. Repeat the <div> for each symbol and include the <script> tag once, anywhere on the page.
How wide is the card?
The full card is 340 px wide and the compact card 300 px. Both shrink to fit narrower spaces down to about 260 px, so they fit most sidebars and mobile screens.
What if a symbol is delisted or mistyped?
The card shows “Quote unavailable” and keeps the links, so nothing breaks on your page.