How to Add an Announcement Bar to Your Website (2026)

To put an announcement bar on your site, install the WiserNotify pixel once and pick an announcement template. Then write your message and button, and choose the pages and dates it shows on.

No theme code is needed, and it works on any site that accepts a script.

Below are the exact steps from the WiserNotify dashboard, three live examples, and the settings that keep a bar useful instead of annoying.

Types of Announcement Bars

An announcement bar is a thin strip at the top or bottom of a page that shares one short message. The right type depends on what you want visitors to do.

• Promotional: a sale, launch, or coupon, often with a countdown and a “Shop now” button.
• Lead capture: a discount or download in exchange for an email.
• Informational: shipping cut-offs, holiday hours, or a new returns policy.
• Feature update: a new feature, with a link to learn more.
• Alert: outages, login problems, or urgent policy changes, usually in yellow or red.

How to Add an Announcement Bar to Your Website

WiserNotify adds the bar through one script, so it works on WordPress, Shopify, Wix, Webflow, Squarespace, custom HTML, and most other builders. Start a 7-day free trial, then follow the steps below or watch the walkthrough.

Step 1: Copy Your Pixel Code

1. Sign up for WiserNotify, or log in to your dashboard.
2. Open the pixel page, “Let's add WiserNotify to your website.”
3. Click Copy code.
4. Paste the code into the <head> section of every page, or your site's header settings.

Step 2: Verify the Pixel

1. Go back to the pixel page.
2. Click Verify pixel installation.
3. Wait for “Your pixel code has been detected successfully.”
4. Click Create notification.

Platform apps for Shopify, WordPress, and others install the pixel for you. The getting started docs cover each one.

Step 3: Pick an Announcement Template

1. Go to Widgets and click Add notification.
2. Open the Announcements tab.
3. Choose a template, such as Discount, Offer, Free Shipping, Black Friday, Reminder, or Welcome, and click Add.
4. Name the widget and enter your website.
5. Click Create & Customize.

Step 4: Design the Bar

1. In Text editor, write your message.
2. In Click actions, add a button, like “Shop now” or a promo code, and set it to open a URL or copy the code.
3. In Position & animation, place the bar at the top or bottom for desktop and mobile.
4. In Style, match the colors and size to your brand.
5. In Timing control, set start and expiry dates and choose when it appears: on load, after a delay, after a scroll percentage, or on exit intent.
6. Click Save, then Next.

Step 5: Choose Pages and Publish

1. Keep All pages, or pick Pages when URL condition matches to target specific pages.
2. Add more domains under Display notifications on multiple websites if needed.
3. Use Advanced targeting to show the bar by country, UTM source, visitor type, cookie, or referrer.
4. Click Publish.
5. Visit your site and refresh the page once or twice to see the bar.

Announcement Bar Not Showing Up?

• Pixel not detected: run Verify pixel installation again and check the code sits in the <head>.
• Cached page: open the page in a private window or clear your site cache.
• Wrong pages: check your URL conditions match the page you're viewing.
• Outside the dates: make sure today falls between the start and expiry dates.
• Already seen: if “skip seen” is on, the bar hides for visitors who saw it, including you.

Still stuck? Use the troubleshoot option in the dashboard or the live chat.

When and Where to Show an Announcement Bar

The timing and targeting settings decide whether a bar helps or interrupts.

• On page load: store-wide news like free shipping or holiday hours.
• After a short delay: first-visit offers, so the page loads before the bar appears.
• After a scroll percentage: offers for visitors who are reading, not bouncing.
• On exit intent: a last-chance discount when someone moves to leave.
• By country: different shipping or currency messages for each region.
• On set days: weekend sales or weekday-only offers.

Announcement Bar Examples

Three stores using the bar in different ways, as their sites show it today. For more, see these announcement bar examples.

1. Wise Ape Tea

Wise Ape Tea runs one line across the top: “$65 free shipping all orders.” It answers the shipping question before a shopper adds anything to the cart.

2. Brooklinen

Brooklinen's bar rotates between messages, with arrows to click through. During its Surprise Sale, the bar and a banner below it repeat the same 15% off offer.

3. Crown & Paw

Crown & Paw stacks two bars: a 25% off offer on top and a live countdown under the menu. The timer gives the sale a real deadline.

Best Practices for Announcement Bars

• One message per bar: one offer and one button. Rotate messages instead of cramming them in.
• Test the copy: run two or three versions with A/B testing and keep the one with more clicks.
• Tag every button: add UTM parameters in Click actions, like utm_source=announcement_bar, so the clicks show up in Google Analytics.
• Use real deadlines: set the expiry date to the actual end of the sale, so the bar disappears when the offer does.
• Check mobile: keep the text short enough to fit one line on a phone.

Common Mistakes to Avoid

• Same bar on every page: a free-shipping message on the contact page is noise. Use URL conditions to show it on product and cart pages.
• Showing it again after signup: turn on “skip seen” so people who already acted don't keep seeing it.
• Timers that reset: a countdown that restarts on every visit breaks trust. Tie it to a fixed end date.
• Covering the menu: check on mobile that the bar doesn't hide navigation or the add to cart button.
• No tracking: without UTMs or analytics, you can't tell whether the bar earned its space.

How to Measure Impact

• Clicks and conversions: check each widget in WiserNotify analytics.
• Revenue from the bar: filter Google Analytics by your UTM source.
• Before and after: compare conversion rate on targeted pages for the weeks before and after launch.

Announcement Bar Guides by Platform

• Add an announcement bar to Shopify
• Add an announcement bar to WordPress
• Add an announcement bar to WooCommerce
• Add an announcement bar to Wix
• Add an announcement bar to Squarespace
• Add an announcement bar to Webflow
• Add an announcement bar to Elementor
• Add an announcement bar to Divi
• Add an announcement bar with HTML

Wrap Up

A good announcement bar says one useful thing at the right moment. Install the pixel once, then change the message whenever your offer or news changes.

Keep it short, give it a real end date, and check the clicks to see what your visitors respond to.