Announcement Bar Widget
Put a one-line announcement at the top of any page: free delivery this week, new opening hours, a product launch. Pick an icon and a tone, add a button, and let it switch itself on and off at the dates you set in your own time zone.
Live preview
Under the widget on your page: Powered by A2Z Tools
Embed code
<iframe src="https://a2z.tools/embed/w/announcement-bar" title="Announcement Bar by A2Z Tools" width="100%" height="160" style="border:0;width:100%" loading="lazy" allow="clipboard-write"></iframe>
A plain iframe. Works everywhere, including site builders that strip scripts. Adjust height if your content needs more room.
<div data-a2z-widget="announcement-bar" data-height="160"></div> <script async src="https://a2z.tools/embed.js"></script>
Adds a small script (what it does) that sizes the widget to fit its content, loads it lazily and keeps it isolated from your page's CSS.
Works with
How it works
You type the message (wrap words in **double asterisks** for bold - no other markup is read), choose one of six drawn icons (info, sale tag, gift, delivery truck, alert, calendar) and a tone: brand gradient, neutral grey, green success, amber warning, red danger or your own #rrggbb colour, with black or white text picked by WCAG luminance. A button needs a full https, http, mailto or tel link; anything else is dropped. Start and end are wall-clock times such as 2026-11-27T00:00 in an IANA zone like America/New_York, so a Black Friday strip appears at midnight New York time for everyone, wherever they are. The start minute is included and the end minute is not. Outside that window, or after a visitor presses the close button, the strip disappears and the frame collapses. The window is re-checked every 15 seconds, and a strip that appears while the page is open is announced once to screen readers. An iframe cannot pin itself to the top of your page or float over your header, so this is a full-width strip you place first in your page body.
Method
- Start and end instants = the typed wall-clock times in the chosen IANA zone, converted to UTC (daylight saving handled by the browser's time-zone data)
- Shown when start <= now < end; a blank start or end means open-ended
- Dismiss key = hash of message + start + end + link, kept in sessionStorage, so a changed announcement shows again
- Custom colour text = white or #111827, whichever gives the higher WCAG contrast ratio
Worked examples
Black Friday strip in New York time
Inputs: Message "Black Friday: **30% off**"; start 2026-11-27T00:00; end 2026-12-01T00:00; zone America/New_York; tone danger
Result: Hidden at 04:59 UTC on 27 Nov (23:59 in New York); shown from 05:00 UTC; hidden again from 05:00 UTC on 1 Dec
The start is inclusive and the end exclusive, and New York is UTC-5 in late November.
Closable notice
Inputs: Message "Closing early today"; dismiss on; visitor presses the close button
Result: The strip hides, "Announcement dismissed." is announced, and it stays hidden in that tab; a new message "Open late tonight" shows again
The remembered key is a hash of the message, dates and link.
Limitations
- It cannot stick to the top of the screen, overlay your header or push your page down - it is a normal block wherever you paste it.
- With a plain iframe the reserved height stays when the bar is hidden; only the loader script shrinks the frame (to 80 px, the loader's minimum).
- Dismissals are per browser tab session and per device; there is no account or cross-device memory.
- Only **bold** formatting is supported; links inside the message text are not - use the button.
Where publishers use it
- A Shopify, Wix or Squarespace store announcing free UK delivery for one week, placed in a full-width custom-code section above the header image
- A WordPress blog promoting a webinar with a Register button that turns itself off when registration closes
- A restaurant site noting new winter opening hours on every page through a site-wide footer-to-top code block
- A SaaS landing page announcing a feature launch with a link to the changelog
- A charity's donation page running a Giving Tuesday match message only between 00:00 and 23:59 that day
Questions
Can the bar stick to the top of my site while visitors scroll?
No. The bar lives in an iframe, and a frame cannot position itself on your page, stay sticky or cover your content. Place the embed code as the first block in your page body. If your theme lets you make a section sticky (many Shopify and WordPress themes do), make that section sticky - the strip inside it then stays with it.
What iframe height should I use?
With the header and card hidden (title=0 and style=minimal in the builder) a one-line strip needs about 120 px, or about 100 px with compact=1; a long message that wraps on phones needs more. With the loader script, write <div data-a2z-widget="announcement-bar" data-title="0" data-style="minimal" data-v-message="..."> and the frame resizes itself to the content.
What happens outside the start and end dates?
The strip is hidden and the frame's own header, footer and padding collapse to almost nothing. With the embed.js loader the iframe shrinks to its 80 px minimum; a plain iframe keeps whatever fixed height you gave it, so for date-limited bars the loader is the better choice. In the builder preview the bar stays visible with a note, so you can still edit it.
How do start and end times work across time zones?
They are read in the zone you choose. 2026-11-27T00:00 in America/New_York is 05:00 UTC, which is 05:00 in London and 10:30 in Mumbai - every visitor sees the strip appear at the same moment. Leave the zone blank and each visitor's own midnight is used instead, which suits "Happy New Year" style messages.
How long does a dismissal last?
For the rest of that browser tab's session: the choice is kept in sessionStorage inside the A2Z frame, so a new tab or a new visit shows the bar again. If the browser blocks storage the bar still hides for the page the visitor is on. Change the message text and the bar shows again even to people who closed the old one.
Is the colour accessible?
The preset tones use the theme's tested ink colours in light and dark mode. A custom colour gets black or white text, whichever has the higher WCAG contrast ratio against it, and the meaning never depends on colour alone because the message itself carries it.
How is this different from the Sale Countdown Banner?
The sale banner is about urgency: it always shows a ticking days-hours-minutes clock to one end time. The announcement bar has no clock at all - it is a calm message with an icon and button that can be scheduled to start and stop, and visitors can close it.
Sources
- Time Zone Database (tz / zoneinfo) - IANA . The zone rules the browser uses to turn the start and end wall-clock times into one instant. Checked 2026-10-01.
Cite or recommend this tool
If you reference this tool in an article, course or documentation, these formats are ready to copy. They are optional - nothing is added to your site unless you paste it.
A2Z Tools Announcement Bar https://a2z.tools/embed/announcement-bar
<a href="https://a2z.tools/embed/announcement-bar">A2Z Tools Announcement Bar</a>
[A2Z Tools Announcement Bar](https://a2z.tools/embed/announcement-bar)
Announcement Bar by A2Z Tools - https://a2z.tools/embed/announcement-bar
Related widgets
-
A slim banner with your offer headline, a live countdown and an optional Shop now button.
-
Maintenance, degraded-service and outage notices with the time window converted to each visitor's zone.
-
A free-delivery threshold message with a progress meter showing how much more a basket needs.
-
Holiday opening hours and closure dates that hide past days and highlight today in your time zone.
-
Days, hours and minutes to the next Christmas, Easter, Thanksgiving, Black Friday or 13 other holidays.