XeroWP
Notice Bar Block – Sticky Announcement Banner & Notification Bar

Notice Bar Block – Sticky Announcement Banner & Notification Bar

5/5 (1 ratings) 10 active installs Updated Nov 4, 2026
announcement barbannernotice barnotification barsticky bar
Download v1.0.2

Notice Bar Block is a Gutenberg block for creating sticky notification bars, announcement banners, and promotional messages on WordPress websites.

Use it to display important announcements, limited-time offers, coupon codes, free shipping messages, event updates, maintenance alerts, and call-to-action buttons. Create and customize your notice bar directly in the WordPress Block Editor without a separate settings page or shortcode.

Choose between top and bottom placement, customize the design, configure when the bar appears, and control how visitors interact with it.

Why Notice Bar Block?

  • Native Block Editor Experience: Edit everything visually in Gutenberg using native block controls for colors, gradients, typography, margins, padding, and borders.
  • Push Page Content Down: Automatically pushes site headers and navigation menus down dynamically so your sticky notice bar never covers your logo or navbar.
  • Boost Sales & Urgency: Includes a live countdown timer and 1-click copy coupon code badge to drive instant conversions.
  • Blazing Fast Performance: Frontend script is ~1 KB of vanilla JavaScript with no jQuery and no dependencies. Loads only on pages where the block is used.
  • 11 Ready-to-Use Designer Presets: Get started in seconds with pre-built styles for flash sales, Black Friday, coupons, webinars, hiring, and announcements.

Features

  • Top or bottom placement: Stick notice bars to the top or bottom of the screen with adjustable z-index and offset.
  • Push page content down: Dynamically calculates bar height and offsets your page content, navigation bar, and sticky headers so nothing is obscured.
  • Live countdown timer: Add urgency to your promotions with a ticking countdown clock (Days : Hours : Mins : Secs) and customizable end message.
  • Click-to-copy coupon badge: Offer discount codes with instant 1-click clipboard copy and animated “Copied!” feedback.
  • Display triggers: Show notice bars immediately on page load, after a time delay (seconds), or when visitors scroll down a percentage (%) of the page.
  • 11 Starter presets: One-click presets for Announcement, Flash Sale with Countdown, Black Friday Neon, Coupon Discount, Free Shipping, Minimalist SaaS, Halloween Special, Live Webinar, Maintenance Alert, We’re Hiring, and Bottom CTA bars.
  • Call-to-action button: Add a prominent CTA button with URL, target option (_blank), custom colors, padding, border radius, and typography.
  • Dismiss & close button: Optional close button with session storage (until browser tab closes) or local storage (device level) memory so closed bars stay hidden.
  • Rich content editing: Use native Gutenberg blocks (Paragraphs, Headings, Links, Bold, Italic, Emoji) inside the notice bar.
  • Design & styling controls: Customize background colors, gradients, text color, typography, borders, shadows, padding, gap, and content max-width.
  • Responsive visibility: Choose to display or hide the notice bar specifically on desktop, tablet, or mobile devices.
  • Smooth entrance animations: Choose between subtle fade or slide-in entrance animations.
  • Respects WordPress admin bar: Automatically offsets top notice bars when the WordPress admin toolbar is present for logged-in users.

Sticky Top and Bottom Notification Bars

Choose where your announcement bar appears on the website.

  • Top position
  • Bottom position
  • Adjustable z-index
  • Custom offset

The Push Page Content Down option dynamically calculates the notice bar height and adjusts website content and sticky headers to help keep important page elements visible.

Countdown Timer and Coupon Code Badge

Add promotional elements directly inside your announcement bar.

Countdown Timer

  • Set a target date and time.
  • Display days, hours, minutes, and seconds.
  • Customize the expired message.
  • Use it for sales, product launches, and event announcements.

Click-to-Copy Coupon Badge

  • Display a custom coupon code.
  • Allow visitors to copy the code with one click.
  • Show visual feedback after the code is copied.

11 Ready-to-Use Notice Bar Presets

Get started with pre-designed styles for common announcement and promotional needs.

Available presets include:

  • Announcement
  • Flash Sale with Countdown
  • Black Friday Neon
  • Coupon Discount
  • Free Shipping
  • Minimalist SaaS
  • Halloween Special
  • Live Webinar
  • Maintenance Alert
  • We’re Hiring
  • Bottom CTA

Customize the content and design to match your website.

Lightweight & Fast by Design

  • Pure Vanilla JavaScript: The frontend script is approximately 1 KB and handles the close button, countdown timer, coupon copy, and content push-down with zero jQuery.
  • Conditional Asset Loading: CSS and JavaScript are enqueued ONLY on pages that contain a Notice Bar block.
  • No Database Overhead: No custom database tables, no tracking scripts, no bloatware, and no slow AJAX or external API calls.

Accessible (a11y)

  • Uses semantic HTML and accessible ARIA attributes (role="region" with accessible labels).
  • Keyboard accessible: press Escape while focused inside the bar to dismiss it.
  • Close button is hidden if JavaScript is disabled, preventing broken interactions.
  • Respects users’ prefers-reduced-motion operating system preferences by automatically disabling animations.

Development

Public source code repository:
https://github.com/wpbranddigital/noticebar-sticky-banner-block

Build Instructions:

  1. npm install
  2. npm run build
  3. npm run start (development)

Notice Bar Block is built using @wordpress/scripts.