How to Add a Countdown Timer to Webflow

Why add a countdown timer to Webflow

A countdown creates a clear deadline, and deadlines move people. Whether you are running a product launch, a seasonal sale, a webinar sign-up or an early-bird price that expires, a visible timer turns "I'll come back later" into "I should sort this now". Webflow gives you full control over layout and design, but it has no native countdown component. That is where an embeddable timer fills the gap.

Rija.io lets you build a countdown timer for Webflow, style it to match your brand, and drop it onto any page with a single snippet. No plugins, no wrestling with JavaScript of your own.

What you'll need

• A Webflow project on a paid Site plan (the Embed element and custom-code publishing are limited on free accounts - more on that below).
• A free Rija.io account to build and publish your timer.
• A few minutes in the Webflow Designer.

Step 1: Build your timer in Rija

Sign in at app.rija.io and create a new timer. Set your target date and time, then style it: pick from 1000+ Google Fonts, set digit & label colours, choose a solid or gradient background, and add a digit animation such as flip, slide, fade or pulse. You can also set a custom pixel size so the timer fits your layout. Rija renders the time correctly for each visitor's own timezone, so you don't have to think about it.

When you are happy, publish the timer. Rija gives you an embed snippet - a single async <script> (with an iframe option if you prefer) - and a hosted timer URL. For embedding in Webflow, copy the script snippet.

Step 2: Add a countdown timer to Webflow with the Embed element

Open your project in the Webflow Designer and go to the page where you want the timer.

1. Open the Add panel and find the Embed element (also called the HTML Embed or Code Embed component).
2. Drag the Embed element onto the canvas, into the section or div where the timer should sit.
3. The code editor opens. Paste the Rija embed snippet into it.
4. Save & Close the editor.

Because the Embed sits inside your normal layout, it inherits the width and responsiveness of its parent container. Place it inside a centred section, a hero, or a two-column div and it will behave like any other element around it.

Step 3: Publish to see it live

This part trips people up. Custom code often does not run inside the Webflow Designer or the Designer preview - you will frequently see a blank space where the timer should be. That is expected. Publish the site (to your webflow.io staging domain or your custom domain) and open the published page. The timer runs there. If you only ever check the preview, you may wrongly conclude it is broken.

Placement tips inside sections

Treat the Embed like a content block. Drop it into a container with a set max-width if you want to constrain the timer, or let it fill a full-width section for a bold banner. Add padding on the parent element rather than inside the snippet, so your spacing stays consistent with the rest of the site. If you want the timer centred, centre its parent div - the Embed will follow.

Styling and matching your brand

Most of the visual work happens in Rija, not Webflow, which keeps your Webflow project clean. Set the fonts, colours, background and animation in the Rija editor, then re-copy the snippet if you make changes. Because the script is a single line, updating the design in Rija updates the live timer without you touching Webflow again in most cases. For the fine points that apply to any platform, our guide on how to add a countdown timer to a website covers the general embed workflow.

Troubleshooting

The timer doesn't show in the Designer

As above, this is normal. Save & Close, publish, and check the live page before assuming there is a problem.

Plan or custom-code limits

The Embed element and the ability to publish custom code are tied to paid Site plans. Free Webflow accounts have a cap on how much custom code they can publish, so if the snippet won't publish, check your plan first.

The time looks wrong

Rija shows the countdown in each visitor's local timezone automatically, so what you see may differ from a colleague in another region - that is intended, not a bug. Double-check that the target date and time you set in Rija are correct for the timezone you had in mind.

Free vs Pro

On the free plan you get unlimited timers and views, gradient backgrounds, custom pixel sizing and all the core animations - with a small Rija watermark on the timer. Pro ($7/mo or $59/yr) removes the watermark and unlocks image & video backgrounds, logo upload, CTA buttons and analytics. For a first launch on Webflow, the free plan is usually enough to get a polished Webflow countdown timer live; upgrade when you want the watermark gone or need the Pro extras.