You need to announce a flash sale on your HubSpot site. Or a scheduled maintenance window. Or a product launch happening in 72 hours. Your options are not great: edit the theme header code and risk breaking your navigation, paste a raw HTML banner into every single page and pray you remember to remove it later, or install a third-party script that loads from an external domain and adds 200ms to your page load. None of these are good. All of them waste time you do not have.
This is the exact problem Announcement Bar Pro solves. It is a native HubSpot module that drops into any drag-and-drop page, blog post, or listing template. You configure it once in the page editor, and it handles everything: countdown timers, dismiss behavior, rotating messages, preset styles, and responsive layout. No code editing. No external scripts. One module, 60+ style controls, and a $7.99 price tag on the HubSpot Marketplace.
The single most effective way to increase conversion on a time-sensitive offer is a visible countdown. Announcement Bar Pro includes a live countdown timer that ticks down to any date and time you set. You configure the target date in the page editor, and the module renders days, hours, minutes, and seconds in real time. No page refresh required.
Each time unit label is configurable. You can display "Days" or "D" or "Dias" or whatever your audience expects. This matters if your site serves visitors in multiple languages or if you simply prefer a compact format. The labels are plain text fields in the module settings, so changing them takes about 3 seconds.
When the countdown reaches zero, the module does not just sit there showing 00:00:00:00. You configure an expired state: hide the entire bar, swap the message text, or display a fallback CTA. A promotion that ended 4 days ago but still shows a countdown timer at zero damages trust. Announcement Bar Pro handles expiration automatically so you do not have to set a calendar reminder to go delete the module.
A notification bar that reappears on every page load is not a notification bar. It is an annoyance. Announcement Bar Pro uses localStorage to remember when a visitor dismisses the bar. Once they click the close button, the bar stays hidden for a duration you control.
You set the dismiss duration in hours. 24 hours is a common choice for daily promotions. 168 hours (7 days) works for longer campaigns. 0 hours means the bar reappears on the next page load, which is appropriate for critical service alerts that visitors need to see repeatedly.
Each module instance generates a unique storage key. If you have one announcement bar promoting a Black Friday sale and another announcing a new blog series, dismissing one does not dismiss the other. The storage keys are deterministic and tied to the module instance, so they persist correctly across sessions without any configuration on your part.
Sometimes one message is not enough. You are running a site-wide sale, you just published a new case study, and your webinar is next Tuesday. Announcement Bar Pro supports up to 10 rotating announcements in a single bar instance.
Each announcement gets its own text, link URL, link text, and optional icon. The rotation is automatic with a configurable interval. You can set messages to rotate every 4 seconds, every 8 seconds, or any duration that gives visitors enough time to read the content. The transition between messages is a smooth crossfade, not an abrupt swap.
This is different from stacking 3 separate announcement bars on the page. Stacking creates a wall of banners that pushes your hero section below the fold. Rotating keeps the vertical footprint to a single bar height while delivering up to 10 distinct messages. On a 1440px wide monitor, the bar occupies roughly 44 pixels of vertical space regardless of how many messages are in the rotation.
Every announcement bar has a purpose, and that purpose should be visually obvious within the first 200 milliseconds of a visitor seeing it. Announcement Bar Pro ships with 5 style presets that map to the most common notification types.
Info uses a neutral blue tone. It works for general announcements: new features, updated hours, team changes. Success uses green tones and fits confirmations or positive news like award wins or milestone announcements. Warning uses amber and yellow, appropriate for maintenance windows, service disruptions, or deadline reminders.
Promotion is the one most teams reach for first. It uses bold, high-contrast colors designed to draw attention to sales, discount codes, and limited-time offers. Pair it with the countdown timer and you have a complete urgency-driven banner in under 2 minutes of setup time.
Custom gives you full control. Every color, font size, spacing value, and border property is exposed in the module settings. If your brand guidelines require a specific hex value for notification backgrounds, Custom mode is where you set it. The other 4 presets are starting points. Custom is a blank canvas.
Where the bar sits on the page matters as much as what it says. Announcement Bar Pro offers 4 positioning modes, each suited to a different layout pattern.
Static places the bar in the normal document flow. It sits wherever you drop the module in the page editor. This is the right choice when you want the bar above your navigation but do not need it to follow the visitor as they scroll.
Sticky keeps the bar visible as the visitor scrolls past its original position. It sticks to the top of the viewport and unsticks when the visitor scrolls back up. This is the most popular option for promotional campaigns because it keeps the offer visible without permanently covering content.
Fixed pins the bar to the top or bottom of the viewport at all times. It never moves, regardless of scroll position. Use this for critical alerts that must remain visible: service outages, compliance notices, or time-sensitive deadlines.
Floating card mode is the most visually distinct option. Instead of a full-width bar, the announcement renders as a rounded card with configurable border radius. It hovers in a corner of the viewport and works well for secondary promotions or newsletter signup nudges that should not dominate the page layout.
The module exposes over 60 individual style controls in the HubSpot page editor. That number is not arbitrary padding. Each control maps to a specific design decision that teams actually need to make.
For colors, you control the bar background, text color, link color, link hover color, close button color, countdown digit color, countdown label color, and countdown separator color independently. That is 8 color controls for the bar alone, before accounting for presets and responsive overrides.
For typography, you set the font family, font size, font weight, line height, and letter spacing for both the announcement text and the countdown timer separately. The module inherits your theme fonts by default, but every value is overridable at the module level. If your theme uses Inter for body text but you want the announcement bar to use your heading font for emphasis, you change one dropdown.
For layout, you control padding (top, right, bottom, left individually), max-width, content alignment, gap between elements, and the close button size and position. On mobile, a separate set of controls lets you adjust font sizes and padding for screens below 768px. A bar that looks balanced at 1440px wide often needs smaller text and tighter padding at 375px. The responsive controls let you handle this without writing a single media query.
For the countdown timer specifically, you control the digit box background, border radius, box padding, gap between units, and whether to show or hide individual time units. If your promotion is 3 hours away, showing the "days" unit with a zero value adds visual noise. You hide it with a toggle.
Announcement Bar Pro costs $7.99 on the HubSpot Marketplace. That is a one-time purchase, not a subscription. It works with any HubSpot CMS theme, any drag-and-drop template, and any content type that supports modules: site pages, landing pages, blog posts, and blog listing pages.
Installation takes under 60 seconds. You purchase the module, it appears in your HubSpot design manager, and you drag it into any page. No developer handoff. No code deployment. No external JavaScript dependencies.
For the full breakdown of every feature, setting, and use case, read the Announcement Bar Pro deep dive on our site. To install it now, grab it from the HubSpot Marketplace listing.