--- title: Countdown Timer Pro — Countdown Module for HubSpot description: Configurable countdown timer module for HubSpot. Fixed-date and evergreen modes, flip clock, minimal, circular, and inline styles. Cookie-based visitor urgency, completion actions, timezone-aware. --- # Countdown Timer Pro for HubSpot A configurable countdown timer with fixed-date and evergreen modes, four display styles, completion actions, and timezone awareness. Cookie-based visitor urgency, zero jQuery, fully responsive. Demo 1 ## Flip Clock — Product Launch Dark background, bold flip-clock digits with a center seam, gold accent. Centered heading with subtitle. ## Launching Soon Something extraordinary is on the way. Be the first to experience it. 00 Days : 00 Hours : 00 Min : 00 Sec We're live! Check it out. --- Demo 2 ## Minimal Digits — Sale Countdown Warm ivory background, large bare digits with no backgrounds, Cormorant Garamond heading. Evergreen mode: 3-day timer per visitor. ## Sale Ends In 00 Days : 00 Hours : 00 Minutes : 00 Seconds Shop Now --- Demo 3 ## Circular Progress — Webinar Registration Animated progress rings with teal accent. Space Grotesk font. Clean white background with centered layout. ## Webinar Starts In Reserve your spot before time runs out. 00 Days 00 Hrs 00 Min 00 Sec This webinar has ended. Recording available soon. --- Demo 4 ## Inline Text — Compact Banner Compact single-line timer for announcement bars or inline sections. Digits and labels side by side with no backgrounds. ### Early bird pricing ends in 00 h : 00 m : 00 s --- Demo 5 ## Flip Clock Small — Course Enrollment Compact flip cards with light slate background. Indigo accent, Space Grotesk font. Smaller 32px digits compared to Demo 1's 56px. Evergreen 48-hour timer. ### Enrollment closes in Join 2,400+ students already inside. Price increases after this timer expires. 00 Days : 00 Hours : 00 Minutes : 00 Seconds Join Waitlist --- Demo 6 ## Circular Small — Limited Offer Small 90px rings on soft rose background. Pink `#db2777` accent, compact sizing. Evergreen 2-day timer with CTA on completion. #### Offer Expires In 00 Days 00 Hrs 00 Min 00 Sec Claim Your Spot --- Demo 7 ## Minimal Large — Event with Months & Weeks All six units: months, weeks, days, hours, minutes, seconds. Large 72px digits in slate. Shows the full breakdown for long countdowns. ## Doors Open In The annual design summit. September 20, 2026. Copenhagen. 00 Months : 00 Weeks : 00 Days : 00 Hours : 00 Min : 00 Sec Documentation ## Module Guide ## Features - **Fixed Date Mode** — Counts down to a specific date and time. Timezone-aware with 12 timezone options or visitor's local time. - **Evergreen Mode** — Creates a unique deadline per visitor using cookies. Each new visitor gets their own countdown (e.g., 3 days from first visit). The deadline persists across page loads and sessions for configurable cookie duration. - **Flip Clock Style** — Bold digit cards with a center seam line. Configurable background color, padding, and border radius. Cards are taller than wide by default for a premium look. - **Minimal Digits Style** — Clean bare numbers with no background. Large typography-focused display. - **Circular Progress Style** — Animated SVG progress rings around each digit group. Configurable ring size, stroke width, track color, and accent color. Progress animates smoothly as time decreases. - **Inline Text Style** — Compact horizontal layout with digits and labels side by side. Designed for announcement bars and inline sections. - **Completion Actions** — When the timer reaches zero: hide the entire section, display a custom message, redirect to a URL, or reveal a CTA button. Each action is configurable from the editor. - **Unit Visibility** — Show or hide days, hours, minutes, and seconds independently. A 12-hour flash sale can hide days; a year-long countdown can hide seconds. - **Custom Labels** — Rename every unit label. Use "Days" or "d", "Hours" or "Hrs", any language. - **Custom Separator** — Choose the character between digit groups: colon, dot, dash, or leave empty for none. ## Content Fields ### Header - **Heading** — Main text above the timer. Configurable heading tag (H1-H4). - **Subtitle** — Descriptive text beneath the heading. Auto-constrained width when centered. - **Alignment** — Left, center, or right alignment for all content. ### Timer - **Mode** — Fixed Date or Evergreen. Controls which date fields are shown. - **Target Date** — Format: YYYY-MM-DD. The date the timer counts down to. Fixed mode only. - **Target Time** — Format: HH:MM (24-hour). Fixed mode only. - **Timezone** — Visitor's local time, UTC, or one of 12 named timezones (ET, CT, MT, PT, GMT, CET, EET, JST, CST, AEST). Fixed mode only. - **Evergreen Duration** — Days, hours, and minutes for the visitor's personal countdown. Evergreen mode only. - **Cookie Duration** — How many days the visitor's deadline cookie persists. After expiry, the timer resets for that visitor. Evergreen mode only. ### Labels - **Days / Hours / Minutes / Seconds** — Custom text labels for each unit. Supports any language or abbreviation. ## Settings - **Display Style** — Flip Clock, Minimal Digits, Circular Progress, or Inline Text. - **Show Days / Hours / Minutes / Seconds** — Toggle each unit independently. - **Separator** — Character between digit groups. Common options: ":" or "." or leave empty. - **Completion Action** — What happens at zero: Hide (removes section), Message (shows custom text), Redirect (navigates to URL), or CTA (shows a button). - **Completion Message** — Text displayed when timer ends. Shown when completion action is "Message". - **Redirect URL** — URL to navigate to when timer ends. Shown when completion action is "Redirect". - **CTA Text / URL** — Button text and link shown when timer ends. Shown when completion action is "CTA". ## Style Controls (45+) ### Container (2) Max width and horizontal padding for the entire section. ### Colors (13) - **Section** — Background color with opacity control. - **Header** — Heading and subtitle colors. - **Digits** — Digit background (for flip clock) and digit text color. - **Labels & Separator** — Label text color and separator character color. - **Accent / Progress** — Used for circular progress rings, CTA buttons, and message accents. - **Ring Track** — Background ring color for circular progress style. - **Completion** — Message background, message text, CTA button background, CTA button text. ### Typography (7) - **Font Pickers** — Separate digit and label font pickers. - **Font Sizes** — Independent sizes for digits, labels, heading, and subtitle. - **Digit Weight** — Regular, Medium, Semibold, or Bold. ### Dimensions (6) - **Digit Card** — Vertical and horizontal padding, border radius. - **Layout** — Gap between digit groups. - **Circular** — Ring diameter and stroke width. ### Spacing (3) Section padding top/bottom and header-to-timer gap. ### Responsive (1) Mobile breakpoint. Digit sizes, padding, ring diameters, and gaps all scale down automatically below this breakpoint. ## Evergreen Mode Evergreen mode creates personalized urgency by giving each visitor their own countdown deadline. On first visit, a cookie is set with a timestamp calculated from the configured duration (e.g., 3 days from now). On subsequent visits, the timer reads the stored deadline from the cookie and continues counting down from where it left off. The cookie name is unique per module instance, so multiple evergreen timers on different pages won't conflict. Cookie duration controls how long the deadline persists. After the cookie expires, the next visit starts a fresh countdown. This replicates functionality from dedicated SaaS tools like Deadline Funnel ($49+/month) at zero ongoing cost. ## Accessibility - **Semantic HTML** — Section element with heading hierarchy. - **Live Region** — Timer container uses `aria-live="polite"` and `aria-atomic="true"` so screen readers announce updates without interrupting. - **Tabular Numerals** — All digit displays use `font-variant-numeric: tabular-nums` to prevent layout shift as numbers change. - **Reduced Motion** — Timer updates are number-only with no animated transitions that would trigger motion sensitivity. ## Responsive Behavior - **Desktop** — Full-size digits, padding, and ring diameters as configured. - **Mobile** — Below the configured breakpoint (default 480px): digit font sizes scale to 55%, padding scales to 60%, circular rings scale to 65%, gaps reduce to 60%. Labels scale to 85%. All values are derived from the desktop settings. ## Demo Notes - **Demo 1 (Flip Clock)** — Inter 700, dark `#1c1c1c` digit cards on `#0b0b0b` background, gold `#d4a853` separator and completion text. Fixed date mode targeting Jul 1, 2026. Cards taller than wide (32px vertical / 20px horizontal padding). - **Demo 2 (Minimal Digits)** — DM Sans 600, bare digits on `#f7f4f0` warm ivory. Brown `#8b5e3c` accent. Evergreen mode: 3-day timer per visitor with "Shop Now" CTA on completion. - **Demo 3 (Circular Progress)** — Space Grotesk 700, teal `#0d9488` progress rings on white. Fixed date mode targeting Jun 15, 2026 at 2:00 PM ET. Completion shows a message with teal background. - **Demo 4 (Inline Text)** — Inter 700, white digits on `#0f172a` dark navy. No days shown. Evergreen mode: 12-hour timer per visitor. Hides section on completion. - **Demo 5 (Flip Clock Small)** — Space Grotesk 700, compact 32px digits in light `#f1f5f9` cards. Indigo `#4f46e5` accent. Smaller sizing compared to Demo 1 to show size range. Evergreen 48-hour enrollment timer. - **Demo 6 (Circular Small)** — Inter 700, small 90px pink `#db2777` rings on soft rose `#fdf2f8` background. Compact 36px digits. Evergreen 2-day timer with CTA on completion. - **Demo 7 (Minimal Large, All Units)** — DM Sans 600, large 72px slate digits on `#f8fafc` light background. Shows all six units: months, weeks, days, hours, minutes, seconds. Fixed date mode targeting Sep 20, 2026 CET. Countdown Timer Pro by Studio Nope