How to add a countdown timer to Framer

Framer’s Embed component takes raw HTML, which makes a countdown a design-time element rather than a code exercise. Because the tikio embed carries its own fixed dimensions, it drops into a layout predictably and does not fight your breakpoints.

  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. Publish and copy the embed code

    Hit Publish, switch the snippet type to the website embed 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.

    <iframe src="https://tikio.io/e/a1b2.html?target=2026-08-01T20:00" title="Offer ends soon" width="480" height="140" frameborder="0" scrolling="no" style="border:0;"></iframe>

  3. Insert an Embed component

    Add an Embed component to the canvas, switch it to HTML and paste the iframe. Set the component’s size to match the snippet’s width and height so the timer is not cropped, then publish.

    <iframe src="https://tikio.io/e/a1b2.html?target=2026-08-01T20:00" title="Offer ends soon" width="480" height="140" frameborder="0" scrolling="no" style="border:0;"></iframe>

The same countdown in your emails

Driving traffic to the page by email? Swap .html for .gif and paste that URL as an image in your ESP — the landing page and the campaign then share one deadline.

<img src="https://tikio.io/e/a1b2.gif?target=2026-08-01T20:00" alt="Offer ends soon" style="border:0;" />

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

FAQ

Will it render on the canvas?

Embeds render in Preview and on the published site. On the canvas you will normally see a placeholder.

How do I handle mobile breakpoints?

Either scale the embed with a CSS transform inside a container, or publish a second, narrower design in tikio and swap the embed URL at the mobile breakpoint.

Does it affect page performance?

The countdown loads in its own iframe, so it does not add JavaScript to your Framer bundle or block the page from rendering.

Your first countdown is minutes away

Free during early access — no credit card required.

Create your free countdown
Other platforms