Website embed

How to add a countdown timer to Ghost

Ghost is two surfaces at once — a website and a newsletter — and they do not accept the same code. An HTML card gives you the live iframe on the published post; the emailed version of that post needs the image form, because no email client renders an iframe. tikio covers both from one design.

Create your free countdown Jump to steps

  1. Design your countdown in tikio

    Build the timer once in the editor — colors, fonts, labels and languages. The same published design serves your website and your email campaigns, so the page and the inbox never drift apart.

  2. Get the embed code

    Click Get code, choose “On a website” and copy the iframe. The width and height come from your design, so the timer lands on the page at exactly the size you drew it.

    HTML 
    <iframe src="https://cdn.tikio.io/embeds/a1b2.html" title="Offer ends soon" width="480" height="140" frameborder="0" scrolling="no" style="border:0;"></iframe>

  3. Add an HTML card to the post or page

    In the Ghost editor, type /html to insert an HTML card and paste the iframe. This is the version that appears on the published web post.

    HTML 
    <iframe src="https://cdn.tikio.io/embeds/a1b2.html" title="Offer ends soon" width="480" height="140" frameborder="0" scrolling="no" style="border:0;"></iframe>

  4. Use the image version for the newsletter

    If the post also goes out as an email, use the image form instead — email clients drop iframes. Choose “In an email” in Get code on the same link: both share the same design and deadline.

    HTML 
    <img src="https://t.tikio.io/e/a1b2.gif" alt="Offer ends soon" style="border:0;" />

The same countdown in your emails

This is the clearest case for the email-and-web parity: one link, one stored deadline, two renderings — a live iframe for the site and an animated image for the inbox.

HTML 
<img src="https://t.tikio.io/e/a1b2.gif" alt="Offer ends soon" style="border:0;" />

Setting up the campaign too? See the guide for your email platform.

FAQ

Questions, answered

Why can’t I use the iframe in the newsletter?

No email client executes iframes — it is a limitation of email, not of Ghost. The image version is rendered by tikio at the moment the email is opened, so it still shows the correct remaining time.

Can I use email-only and web-only cards?

Yes. Ghost lets you mark content as email-only or web-only, which is the tidy way to serve the image version to subscribers and the live iframe to web readers from a single post.

Does it work on a self-hosted Ghost install?

Yes. The timer is loaded from tikio by URL, so nothing depends on where Ghost itself is hosted.

Other website platforms

Your first countdown is minutes away

Free during early access — no credit card required. Design once, paste one snippet, and the timer ticks on every open.

Create your free countdown