Component Doc
Quick start tutorial
How To Install TheUrgency Timer Component
The Urgency Timer is a premium circular countdown timer designed to create urgency and drive conversions. Perfect for landing pages, upsell pages, flash sales, and limited-time promotions. This guide covers installation, configuration, and troubleshooting for all timer features including auto-restart, redirect functionality, and blinking alerts.
Quick Start
Insert Urgency Timer component onto your Framer canvas
Set the Duration (seconds) to your desired countdown time (1-3600 seconds)
Choose your urgency strategy: enable "Restart After Complete" for continuous campaigns, or disable it to use redirect functionality
Configure the redirect settings if using redirect mode: set the Redirect URL and Redirect Delay
Customize the visual appearance: adjust Background, Text Color, Progress Color, and Markers Color to match your brand
Enable "Show Numbers" if you want to display numbers on the main markers
Set the blinking threshold: configure "Blink When Seconds Left" to activate the urgency alert
Test the timer in preview mode (note: redirects only work on live sites, not in Framer preview)
Use Cases
Landing Pages: Create urgency for limited-time offers, early bird pricing, or registration deadlines. The timer encourages visitors to take immediate action before time expires.
Upsell Pages: Place the timer on upsell offers to create scarcity. When time runs out, redirect users to checkout to capture the conversion, or redirect to a "missed out" page to reinforce urgency.
Flash Sales: Use auto-restart mode to maintain continuous urgency throughout your sale. The blinking alert draws attention as time runs low, maximizing conversion opportunities.
Prerequisites
// IMPORTANT: Redirect functionality limitation
// Redirects will NOT work in Framer preview mode
// They will show a 404 error in preview
// Redirects only function correctly on live/published sites
Properties
Property | Description |
|---|---|
Duration (seconds) | Total countdown time in seconds (1-3600) |
Restart After Complete | Automatically restart the timer when it reaches zero |
Redirect on Complete | Enable redirect functionality when timer completes (only visible when Restart is disabled) |
Redirect URL | URL to redirect to when timer completes (internal routes, hash links, or external URLs) |
Redirect Delay | Delay in milliseconds before redirect occurs (500-10000ms) |
Progress Width | Width of the circular progress ring in pixels (4-20px) |
Show Numbers | Display numbers on the main markers (every 5 seconds) |
Border | Border styling for the timer container |
Background | Background color of the timer |
Text Color | Color of the countdown time display |
Progress Color | Color of the circular progress ring |
Markers Color | Color of the second markers around the timer |
Timer Font | Font styling for the countdown time display |
Blink When Seconds Left | Number of seconds remaining when blinking alert activates (1-60) |
Blink Background Color | Background color used during the blinking alert |
Completed Text | Message displayed when timer reaches zero (only visible when Restart is disabled) |
Completed Color | Text color for the completion message |
Completed Text Font | Font styling for the completion message |
Troubleshooting
Issue: Timer not counting down
The timer may appear frozen in Framer's static renderer mode. This is normal behavior. The timer will function correctly in preview mode and on live sites.
Issue: Redirect shows 404 in preview
Redirects do not work in Framer preview mode. This is expected behavior. Test redirects on your live/published site where they will function correctly.
Issue: Blinking alert not appearing
Check that "Blink When Seconds Left" is set to a value that the timer will reach. The blinking only activates when the remaining seconds are less than or equal to this threshold.
Issue: Timer not restarting automatically
Ensure "Restart After Complete" is enabled. If it's disabled, the timer will show the completion message and redirect instead of restarting.
Issue: Hash link redirect not scrolling
Hash links (starting with #) will scroll to the target element if it exists on the page. If the element isn't found, it will fall back to navigation. Make sure the target element has the correct ID matching your hash link.
Issue: Timer shows incorrect duration
The timer validates the duration to be between 1-3600 seconds. Values outside this range are automatically clamped. Check that your Duration value is within the valid range.
Issue: Redirect delay not working
The Redirect Delay must be between 500-10000 milliseconds. Values outside this range are automatically adjusted. Ensure your delay setting is within the valid range.