Website Visitor Popups
Announcement Bar
Generate a fixed, non-intrusive announcement bar that sticks to the top of your page with a dismissible close button.
Place before closing </body> tag
Generate a fixed, non-intrusive announcement bar that sticks to the top of your page with a dismissible close button.
The Announcement Bar generator creates a self-contained HTML/CSS/JS snippet that adds a fixed notification bar to any website. It is non-intrusive and includes a close button for visitors to dismiss it.
An announcement bar is a slim, full-width strip fixed to the top or bottom of a webpage. It delivers a brief message or promotion without blocking content, making it ideal for time-sensitive notices, sales, or important updates.
Enter your message, optional link text and URL, choose colors and position, then click "Generate Code". Copy the resulting snippet and paste it before the closing </body> tag of your website.
Yes. The generated code is pure HTML, CSS, and vanilla JavaScript with no dependencies on frameworks, libraries, or CDNs. It works on any website that allows custom code in its HTML, including WordPress (via theme footer or a code snippet plugin), Shopify (via theme.liquid), Webflow, Squarespace with code injection, Wix with the custom code element, and plain HTML websites. Paste the snippet before the closing </body> tag. The bar appears immediately on page load and does not conflict with other scripts because it uses no global variables or external requests.
The generated code is extremely lightweight — typically under two kilobytes — and uses inline styles with a small JavaScript block and no external network requests. It has negligible impact on page load speed and Core Web Vitals scores. From an SEO perspective, Google's guidelines flag interstitials that block content on mobile as a negative ranking signal. An announcement bar is not classified as a disruptive interstitial because it does not overlay and block page content — it is a fixed strip that sits alongside content rather than obscuring it, so it is safe to use without SEO concern on mobile and desktop alike.
The dismiss button removes the bar from view for the current page load. For persistent dismissal that survives page refreshes, modify the generated code to write a flag to localStorage when the close button is clicked, and check that flag on page load before inserting the bar element. To restrict the bar to specific pages, paste the snippet only into those page templates rather than a global layout, or add a conditional check comparing window.location.pathname against your target path before creating the bar. The generated vanilla JavaScript code is straightforward to extend with standard DOM and storage APIs.