Announcement Bar Pro for HubSpot

Sticky announcement bars with countdown timers, dismissible with localStorage memory, rotating announcements, five color presets, and complete style control from the editor.

Demo 1 — E-commerce Promotion

Dark Bar with Countdown Timer

Fixed bar — stays at the top of the viewport while you scroll. Live countdown, tag icon, subtitle, pill link. Dismiss it to see the rest of the page.

Scroll up to see the bar stick to the top of this container.
Demo 2 — SaaS Product Launch

Purple Promotion Preset

Uses the built-in "promotion" color preset for a vibrant purple background. Slide-in animation, DM Sans font, no countdown. Dismissible with default styling.

Demo 3 — Rotating Announcements

Info Preset with Auto-Rotating Messages

Rotate mode cycles through three announcements with fade transitions every 5 seconds. Each entry has its own icon, text, and link. Uses the "info" blue preset.

Demo 4 — Warning / Maintenance

Maintenance Notice with Warning Preset

Uses the "warning" orange preset for scheduled maintenance notices. Not dismissible — maintenance alerts should always remain visible. No countdown, no animation.

Demo 5 — Success Confirmation

Green Success Preset with Fade Animation

Uses the "success" green preset for confirmation banners like trial activation. Fade-in animation, dismissible. Geist font for a modern SaaS look.

Demo 6 — White Card Bar

Card-Style Notification

White background with border radius and shadow. Not full-width. Subtitle text below the title. Left-aligned text, no preset. Can be used as an inline card notification.

Setup & Configuration

Announcement Bar Pro renders a full-width bar at the top or bottom of any page. Add it to your template or drag it into the page editor. Configure content, behavior, and styling entirely from the module fields — no code required.

Single vs. Rotating Mode

In single mode, the bar displays one persistent message with an optional heading, link, and countdown timer. In rotate mode, it cycles through multiple announcements with a fade transition every 5 seconds. Each announcement in the repeater gets its own text, link, and icon. Use single mode for focused promotions and rotate mode when you have several updates to share.

Content Fields

Single mode uses the top-level content fields: heading text, link text, and link URL. Rotate mode uses the announcements repeater, where each entry has its own announcement text, link text, link URL, and icon selector (none, info, star, gift, megaphone, tag, or bell). Icons render as HubSpot SVG icons inline with the text.

Countdown Timer

Enable the countdown toggle in Settings and set an end date/time (format: YYYY-MM-DD HH:MM). The timer displays days, hours, minutes, and seconds with live updates every second. Each unit label is customizable — use "d", "days", "Days", or any text you want. When the countdown expires, it replaces itself with your configured expired text (e.g., "Sale ended"). The countdown only appears in single mode.

Dismiss with localStorage Memory

When dismissible is enabled, a close button appears on the right side of the bar. Visitors can dismiss the bar, and if "remember dismiss" is on, their preference is stored in localStorage with a configurable expiration in days (1-90). After that period, the bar reappears automatically. Each module instance gets a unique storage key, so multiple bars on different pages operate independently. Disable dismissible for critical notices like maintenance alerts.

Presets vs. Custom Styling

Five preset options provide instant theming:

  • Custom — uses your manually configured colors from the Style tab
  • Info — blue background (#1e40af) for informational announcements
  • Success — green background (#166534) for confirmations and positive updates
  • Warning — orange/amber background (#92400e) for maintenance and alerts
  • Promotion — purple background (#7c3aed) for product launches and marketing

Presets override only the background color. All other style fields (text color, link styling, countdown colors, typography) still apply, giving you full control over the final look while keeping a consistent base.

Style System

Every visual property is controlled from the Style tab. Nothing is hardcoded in the CSS.

  • Container: max-width, vertical padding, horizontal padding. The background spans full-width while content is centered.
  • Colors: background, text, link, link hover, link background hover, dismiss button, dismiss hover, countdown background, countdown text, icon, icon background, border, link background, link border, subtitle color — 15 color fields with opacity controls.
  • Typography: Google Font picker, bar font size, bar font weight, link font size, link font weight, countdown font size, dismiss button font size, text alignment (left/center/right), letter spacing, subtitle font size.
  • Layout: gap between elements, link padding (horizontal + vertical), link border radius, countdown padding, countdown radius, countdown gap, dismiss button size, icon size, icon padding, icon border radius, bar shadow (none/sm/md/lg), bar border radius, z-index, position offset (distance from edges when sticky or fixed).
  • Responsive: mobile breakpoint (default 767px), mobile font size override, and an optional "stack" toggle. On mobile the bar stacks vertically with dismiss button absolute top-right.

Animation

Three entrance animation options for when the bar first appears:

  • None — bar is immediately visible
  • Slide — slides in from the top (or bottom, depending on position) with a smooth ease-out curve
  • Fade — fades in from transparent to full opacity

Animations use CSS transforms and opacity for GPU-accelerated performance. The rotate mode has its own independent fade transition between announcements.

Technical Details

  • Zero dependencies: vanilla JavaScript, no jQuery or external libraries
  • Instance isolation: all CSS scoped with announcement-bar-pro-docs, multiple bars per page with zero conflicts
  • Accessible: role="banner", aria-label on the bar, dismiss button has proper aria-label
  • z-index 9999: the bar renders above all other page content when sticky
  • Body padding: when sticky, JavaScript automatically adds matching padding to the body so content is not hidden behind the bar
  • Print-friendly: the bar is hidden in print stylesheets
  • Any template: works on website pages, landing pages, blog listings, and blog posts. No theme required.
Announcement Bar Pro by Studio Nope