Add a Countdown Timer to Framer
Put a launch date, registration cutoff or offer deadline on your Framer page. Create the timer in CountdownShare, then display its hosted website embed through Framer’s Embed component. Customize the countdown in its builder and keep the surrounding layout in Framer.
Create your website countdownInstall the timer with Framer’s Embed component
- Create a CountdownShare timer with the campaign deadline and timezone. Choose a design that fits the section where it will appear.
- In Pro, publish the countdown and open its website embed options. Get the embed URL from the generated iframe code—the address in its
srcattribute. - In Framer, open Insert, find Embed and place the component on your page. Enter the website embed URL in its URL field.
- Give the component enough width and height for the digits and labels. Check your desktop and mobile layouts separately.
- Publish the Framer page, open it outside the editor and verify the countdown, its destination link and the deadline.
The URL method follows Framer’s official Embed instructions. Use the website embed URL, rather than an email image URL or an authenticated builder link.
Fix a blank, cropped or mismatched timer
- Blank embed
- Open the embed URL in another browser tab. Confirm the countdown is published and the address displays a public timer. Then test the published Framer page, not only the editor canvas.
- Digits cut off on mobile
- Increase the Embed component height and check the containing section for clipping. An iframe can fit the column width while still needing more vertical space.
- Framer fonts or colors do not change the timer
- Change the timer design in CountdownShare. The Framer page styles its surrounding section; the hosted countdown has its own design. Pro includes custom CSS for the timer.
Keep the embed for your next launch
Pro removes the watermark and includes unlimited views and editable timers. Update the existing countdown, publish its settings and reload the Framer page to check the result. Keeping the same timer URL avoids replacing the component for every edit.
Plan the page after the deadline too. A countdown does not automatically open your product, close a signup form or change an offer. Make those changes in the system that controls access and keep the page button consistent with them.