About the Announcement Bar Widget
Zyff's announcement bar widget pins a notice to the top or bottom of every page on your site, free. Write the message, add a link, and choose a sticky bar that follows the visitor as they scroll, an inline strip that sits in the page flow, or a floating pill inset from the edge. A sticky bar adds its own height to the page rather than covering your navigation, and once a visitor closes it, it stays closed. The output is one div and one script tag that works in WordPress, Shopify, Wix, Squarespace, Webflow or a hand-written HTML page alike.
How to add an announcement bar to your website
Write the message
Keep it to one line — a sale, a delivery cut-off, a holiday closure. An optional second piece of detail sits beside it in a lighter weight.
Add a link
Either as a button beside the message, or by making the whole bar clickable. Without a link there is no button, because a button that goes nowhere is not worth rendering.
Choose how it sits
Sticky follows the visitor down the page, inline scrolls away with the content, and the floating pill reads as an overlay. Sticky bars push the page down so they never cover your header.
Copy the embed code
Paste the container div and script tag just before your closing body tag, or download the standalone HTML file. Check the 390px mobile preview before you ship it.
What the Announcement Bar Widget does
It pushes the page, not over it
A sticky bar adds its own height as padding on the document, so your fixed header moves down instead of disappearing underneath. That one behaviour is the difference between a bar that works and a bar that breaks the site it is on.
Dismissal that sticks
Once a visitor closes the bar it stays closed for the rest of their visit, or for a number of days you set. The close button cannot be switched off while a cap is in effect, so there is always a way out.
Three placements
A sticky bar at the top or bottom, an inline strip where you paste it, or a rounded floating pill inset from the edges of the window.
Phone-only or desktop-only
Target one device class and the widget checks the real viewport in the browser, so a cached page still shows the right thing to each visitor.
Appears on your schedule
Show it immediately, or after a delay so the visitor can start reading the page first.
Nothing to slow your page
The whole bar runs in the visitor's browser from the settings in your snippet, so it makes no request to Zyff when your page loads.
At a glance
| Layouts | 3 templates: sticky bar, inline strip, floating pill |
|---|---|
| Position | Top or bottom, with a 0-60px inset on the floating pill |
| Height | 32 to 96px |
| Dismissal | Every page view, once per visit, or once every 1-365 days |
| Delay | 0 to 60 seconds |
| Device targeting | All devices, mobile only, or desktop only |
| Output | One container div plus one script tag, or a downloadable HTML file |
| Price | Free to build; paid plans for saved widgets |
Frequently asked questions
How do I add an announcement bar to my website?
Write your message in Zyff's builder, pick sticky, inline or floating, then copy the generated embed code into your page — usually just before the closing body tag so it appears site-wide. The whole flow is free with no signup, and the snippet is plain HTML, so it drops into any CMS block that accepts custom code.
Will the bar cover my site's navigation?
Not if you leave "push the page down" on, which is the default. A fixed bar at the top otherwise sits on whatever your site already pins there, which on most sites is the header. With it on, the bar adds its own height to the document and your navigation moves down to make room.
Does the bar stay hidden after someone closes it?
Yes, for as long as you choose — the rest of their visit, or a set number of days. The dismissal is remembered in the visitor's own browser, so it holds as they move from page to page. Clearing their site data brings it back.
Can I remove the close button?
Only if the bar is set to show on every page view anyway. With a frequency cap in place the close button stays on, because without it the dismissal could never happen — so the bar would follow the visitor across every page of your site with no way to get rid of it.
What is the difference between this and the popup widget?
A popup interrupts: it appears on a trigger, covers the page and is dismissed. A bar persists: it is there from page load, takes a thin slice of the layout and stays until closed. Use a bar for something everyone should see and a popup for something you want them to act on.
Can I show the bar only on mobile?
Yes. Choose mobile only or desktop only, and the widget checks the real viewport width in the visitor's browser — which matters on a cached page, where a decision baked in when the page was built would show the mobile-only bar to everyone.
Can I schedule the bar to end automatically?
Not from the bar itself. The straightforward approach is to save the widget to an account, then switch it off when the promotion ends — every site embedding it stops showing it at once, with nobody editing any HTML. For a visible deadline, pair it with the countdown timer widget.
Where do I paste the announcement bar code?
Just before the closing body tag, on every page you want it on. Most site builders have a footer or custom-code field that applies site-wide. The inline template is the exception: put that container div wherever the strip should sit in your content.
Is the announcement bar widget really free?
Yes. Building it, styling it and embedding it are free with no signup, no trial and no watermark — a free embed carries a small "Announcement by Zyff" link, which is how the tool stays free. The sticky and inline layouts are both free, and so is every dismissal setting: charging for the control that stops a bar nagging people would be the wrong way round. A paid plan adds the floating pill, full colour control and removes the attribution link.