Widget sematan

Put a live countdown to any pin, or the whole thread it belongs to, on your blog, newsletter archive or news site. The widget updates itself, and every one links back to the pin page, where the sources and the date's confidence are.

Quick start

• Open a pin and note its number: chronopin.com/pin/123/title is pin 123.
• Paste the snippet below where you want the widget, with your pin's number in place of the example one.

Live example, for The 13th Route du Rhum Sends Solo Skippers From Saint-Malo to Guadeloupe on 1 November:

Script snippet (recommended)

The script draws the widget and keeps it the right height. The link inside the div stays on your page as a plain text link to the pin, and is what shows if a reader has scripts turned off.

<div class="chronopin-embed" data-pin="5124">
  <a href="https://www.chronopin.com/pin/5124?utm_source=embed&utm_medium=widget">View on Chronopin</a>
</div>
<script async src="https://www.chronopin.com/embed/widget.js"></script>

Iframe snippet

For platforms that allow iframes but not scripts.

<iframe src="https://www.chronopin.com/embed/pin/5124" width="100%" height="190" style="border:0;max-width:520px" loading="lazy" title="Chronopin"></iframe>

Options

On the script snippet set them as data- attributes on the div; on the iframe, as query parameters.

• view: countdown (the default) shows days, hours, minutes and seconds to the pin's start, ticking on the reader's clock, and a note once it has started. thread lists the pin's story in order, the pin marked, up to 8 entries and a count of the rest. A pin with no thread shows the countdown.
• theme: auto, light, dark. auto follows the reader's light or dark setting.
• lang: a language code (es, ja, …) for the pin's title and the date format, when the pin is translated. The default is English.

For example, the thread in the dark theme:

<div class="chronopin-embed" data-pin="5124" data-view="thread" data-theme="dark">
  <a href="https://www.chronopin.com/pin/5124?utm_source=embed&utm_medium=widget">View on Chronopin</a>
</div>
<script async src="https://www.chronopin.com/embed/widget.js"></script>

Good to know

• The widget is at most 520 pixels wide and fills the width of its container below that. A countdown is about 190 pixels tall; a thread grows with its entries.
• Pins that are timed count down to the exact moment; all-day pins to midnight at the start of that day on the reader's clock.
• The widget sets no cookies and loads no ads or trackers. Pages are cached for a few minutes, so a corrected date shows up shortly after the pin is edited.
• If a pin is removed, the widget says so instead of showing an empty box.
• Free to use, including on commercial sites. Please leave the Chronopin link in place.