Price Widget
Embed a live price card for one card, with an optional 30-day chart.
A small card showing one card's art, current price, 30-day change and an optional price chart. It links to the card's full price page.
The easiest way to get the code is the embed builder: search a card, pick a look and copy. This page lists every option for writing the code yourself.
iframe
<iframe src="https://cardprices.io/embed/yugioh/card/Dark%20Magician?code=LOB-005&theme=light&chart=1"
width="340" height="260" style="border:0;border-radius:12px;display:block"
loading="lazy" title="Dark Magician price"></iframe>
<p style="margin:6px 0 0;font-size:12px">
<a href="https://cardprices.io/yugioh/card-info/Dark%20Magician">Dark Magician price</a> from Card Prices
</p>The address is https://cardprices.io/embed/{game}/card/{card name}, with the name
percent-encoded, plus these options:
| Option | Values | Default | What it does |
|---|---|---|---|
code | a card number, like LOB-005 | the most valuable printing | Which printing to show |
theme | light, dark | light | Colours |
layout | standard, compact | standard | compact is a short, wide strip |
chart | 1 | off | Adds a 30-day price line (standard layout only) |
Use these sizes so nothing is cut off:
| Layout | Width × height |
|---|---|
| Standard | 340 × 210 |
| Standard with chart | 340 × 260 |
| Compact | 380 × 132 |
Script
The same widget, sized automatically. The link inside the div becomes a caption under the widget
and still works if the script is blocked.
<div data-cardprices-card="yugioh/Dark Magician" data-code="LOB-005"
data-theme="light" data-layout="standard" data-chart>
<a href="https://cardprices.io/yugioh/card-info/Dark%20Magician">Dark Magician price</a> from Card Prices
</div>
<script async src="https://cardprices.io/embed.js"></script>data-cardprices-card is {game}/{card name}, without encoding. The other attributes match the
iframe options above. Add the script once per page, however many widgets it has.
Keep the credit link
Please keep the "from Card Prices" link under the widget. It's how the widget stays free.
FAQ
How fresh are the prices? TCGplayer Near Mint market prices, updated daily. The widget shows when its price was last updated.
Can I use it in OBS? Yes. Add a Browser source with the iframe address, at the sizes above.