Card Links
Link every card in a post to its price page, with a hover preview of its art and price.
Add one script to your site, then write card names in double brackets. Each name becomes a link to the card's price page on Card Prices. Readers who hover it see the card's art and price.
On WordPress, use the plugin instead. It does the same without pasting anything and writes the links into your HTML.
Setup
Paste this once, before the closing </body> tag of your site or theme:
<script async src="https://cardprices.io/tooltips.js" data-game="yugioh"></script>Set data-game to the game you write about most (see game ids).
Writing card names
| You write | You get |
|---|---|
[[Dark Magician]] | A link to Dark Magician in your data-game game |
[[pokemon:Charizard ex]] | A link to a card from another game |
[[Number 39: Utopia]] | A link to Number 39: Utopia. Only a real game id counts as a prefix. |
- Names are not case sensitive:
[[dark magician]]works. - The link shows the name as you wrote it.
- Text inside links,
<code>,<pre>, form fields and editable areas is left alone, so you can still write about the syntax itself. - The script doesn't check names. A typo still becomes a link, to a "card not found" page. Check your links before publishing.
Hover previews on links you already have
Any link to a Card Prices card page gets the preview, including ones you wrote by hand:
<a href="https://cardprices.io/yugioh/card-info/Dark%20Magician">Dark Magician</a>Card pages live at https://cardprices.io/{game}/card-info/{card name}, with the name
percent-encoded. To use only the previews, add data-links="off".
The preview shows the card's art, the lowest and highest prices across its printings, and how many printings it has. It only appears on devices with a mouse or trackpad. On phones, tapping the link opens the card page.
Options
All options go on the script tag.
| Attribute | Values | Default | What it does |
|---|---|---|---|
data-game | a game id | yugioh | Game for [[Card Name]] without a prefix |
data-theme | auto, light, dark | auto | Preview colours. auto follows the reader's system setting. |
data-scope | a CSS selector, like .post-content | the whole page | Only convert [[…]] inside these elements |
data-links | on, off | on | off keeps the hover previews but leaves [[…]] text alone |
Example for a blog whose posts sit in <article> and uses a dark theme:
<script async src="https://cardprices.io/tooltips.js"
data-game="onepiece" data-theme="dark" data-scope="article"></script>Search engines
Links the script creates appear in the browser after the page loads. Search engines may not count them the way they count links written in your HTML. If that matters to you, write the links yourself (as above) or use the WordPress plugin, which writes them into the page for you.
FAQ
Is it free? Yes, with no account, key or usage limit.
Does it slow my page down? The script is about 4 KB gzipped and loads asynchronously. A card's preview is only fetched when someone hovers its link.
Does it track my readers? No. It sets no cookies and loads nothing until a reader hovers a card link.
Where do the prices come from? TCGplayer Near Mint market prices, updated daily.