Mangainfo
Sign in

Tools for your site

Manga countdown widget

The countdown shows how many days are left until the next English volume of a series comes out. On release day it says so. Once a new date is announced it counts toward that one.

Only a date with a day counts down. A volume dated to a month shows the month.

Preview

A title or the name in a Mangainfo address, such as blue-lock.

Data from the Chainsaw Man page.

Code

HTML

The script puts the widget above the link and sets its height. Add the script once per page.

<div data-mangainfo-countdown="chainsaw-man">
  <a href="https://mangainfo.com/series/chainsaw-man">Countdown to the next English volume of Chainsaw Man</a>
</div>
<script src="https://mangainfo.com/embed.js" async></script>

iframe

For pages that allow no script.

<iframe src="https://mangainfo.com/embed/countdown/chainsaw-man" title="Countdown to the next English volume of Chainsaw Man" width="100%" height="200" loading="lazy" style="border:0"></iframe>
<p><a href="https://mangainfo.com/series/chainsaw-man">Countdown to the next English volume of Chainsaw Man</a></p>

React

export function MangaWidget() {
  return (
    <>
      <iframe src="https://mangainfo.com/embed/countdown/chainsaw-man" title="Countdown to the next English volume of Chainsaw Man" width="100%" height={200} loading="lazy" style={{ border: 0 }} />
      <a href="https://mangainfo.com/series/chainsaw-man">Countdown to the next English volume of Chainsaw Man</a>
    </>
  );
}

Vue

<template>
  <iframe src="https://mangainfo.com/embed/countdown/chainsaw-man" title="Countdown to the next English volume of Chainsaw Man" width="100%" height="200" loading="lazy" style="border:0"></iframe>
  <a href="https://mangainfo.com/series/chainsaw-man">Countdown to the next English volume of Chainsaw Man</a>
</template>

Svelte

<iframe src="https://mangainfo.com/embed/countdown/chainsaw-man" title="Countdown to the next English volume of Chainsaw Man" width="100%" height="200" loading="lazy" style="border:0"></iframe>
<a href="https://mangainfo.com/series/chainsaw-man">Countdown to the next English volume of Chainsaw Man</a>

WordPress

Paste it into a Custom HTML block.

<iframe src="https://mangainfo.com/embed/countdown/chainsaw-man" title="Countdown to the next English volume of Chainsaw Man" width="100%" height="200" loading="lazy" style="border:0"></iframe>
<p><a href="https://mangainfo.com/series/chainsaw-man">Countdown to the next English volume of Chainsaw Man</a></p>

Notion

Type /embed and paste this address.

https://mangainfo.com/embed/countdown/chainsaw-man

Addresses

AddressShows
https://mangainfo.com/embed/countdown/{series}The countdown on its own.
https://mangainfo.com/embed/series/{series}The series widget, which shows the days left beside the date.

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 add a manga release countdown to my site?

Pick the series above and copy the code. Paste it where the countdown should show.

Which time zone does the countdown use?

UTC. Publishers give a release as a date, and the count turns over at midnight UTC.

What happens after the release?

The countdown moves on to the next English volume with a date. Until one is announced it says that no date is known yet.