Countdown Timer Pro for HubSpot

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.