Tools for your site
Manga collection progress badge
Put the number of volumes you own in the address. The badge shows it against the volumes out in English and fills a bar.
Mangainfo stores nothing. The number lives only in your link. Change it when you buy the next volume.
Preview
Data from the Chainsaw Man page.
Code
HTML
<a href="https://mangainfo.com/series/chainsaw-man"><img src="https://mangainfo.com/badge/progress/chainsaw-man.svg?owned=3" alt="Chainsaw Man: volumes I own" height="20"></a>Markdown
For a GitHub README, an issue, a wiki or a Markdown blog.
[](https://mangainfo.com/series/chainsaw-man)BBCode
For forums that use BBCode.
[url=https://mangainfo.com/series/chainsaw-man][img]https://mangainfo.com/badge/progress/chainsaw-man.svg?owned=3[/img][/url]React
<a href="https://mangainfo.com/series/chainsaw-man">
<img src="https://mangainfo.com/badge/progress/chainsaw-man.svg?owned=3" alt="Chainsaw Man: volumes I own" height={20} />
</a>Vue
<template>
<a href="https://mangainfo.com/series/chainsaw-man"><img src="https://mangainfo.com/badge/progress/chainsaw-man.svg?owned=3" alt="Chainsaw Man: volumes I own" height="20"></a>
</template>Svelte
<a href="https://mangainfo.com/series/chainsaw-man"><img src="https://mangainfo.com/badge/progress/chainsaw-man.svg?owned=3" alt="Chainsaw Man: volumes I own" height="20"></a>WordPress
Paste it into a Custom HTML block. An Image block with "Insert from URL" takes the image address alone.
<a href="https://mangainfo.com/series/chainsaw-man"><img src="https://mangainfo.com/badge/progress/chainsaw-man.svg?owned=3" alt="Chainsaw Man: volumes I own" height="20"></a>Notion
Type /image, choose Embed link and paste this address.
https://mangainfo.com/badge/progress/chainsaw-man.svg?owned=3Addresses
| Address | Shows |
|---|---|
https://mangainfo.com/badge/progress/{series}.svg?owned={number} | The volumes you own of the volumes out in English. |
The name of a series is the last part of its address on Mangainfo: mangainfo.com/series/blue-lock is blue-lock.
Questions
How do I change my count?
Change the number after owned= in the address.
Does the total change by itself?
Yes. When a new volume comes out in English the total grows. Your bar shows the gap until you change your number.
Can I show my whole collection?
Use one badge per series. A reader with an account can track every volume on the Collection page of Mangainfo.