Website Alert Banner Widget

Warn customers about planned maintenance or an incident in plain words. The banner states the severity, shows the window in your time zone and in the visitor's own, links to your status page, and hides itself when the window ends.

Announcements & Notices Tool Runs in your browser Free · no ads

Customize your widget

Theme
Auto follows the visitor's light/dark setting.
Style
Attribution on your page
Optional and entirely your choice. The exact line is shown in the code below; it links to the tool with rel="nofollow".
More options
Starting values
Leave blank to use the widget's defaults. Visitors can still change every value.

Live preview

Exactly what your visitors will see

Embed code

<iframe src="https://a2z.tools/embed/w/website-alert-banner" title="Website Alert Banner by A2Z Tools" width="100%" height="270" 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.

Works with

How it works

Choose a severity - information, maintenance, degraded service, outage or resolved - and write a short title and message. If you give a start and end as wall-clock times in an IANA zone, the banner converts them to one instant and shows them twice: as the visitor's local time and as your business time with its abbreviation. Maintenance from 21:00 to 23:00 on Saturday 3 October 2026 in Europe/London (BST) reads "Sat 3 Oct, 16:00–18:00 your time" to someone in New York and "Sun 4 Oct, 01:30–03:30" in Kolkata, with "That is Sat 3 Oct, 21:00–23:00 BST (London time)" underneath; a window that crosses midnight repeats the end date. A pill shows Scheduled, In progress or Ended, updated every 30 seconds. Outage and degraded notices use role="alert", which screen readers announce immediately; the others use role="status", which waits politely. After the end time the banner disappears unless you choose to keep an Ended notice.

Method

  • Window instants = typed start and end in the business IANA zone, converted to UTC
  • Visitor line = the same instants formatted in the browser's own zone; business line = the zone's wall time + short zone name
  • Phase: Scheduled before start, In progress while start <= now < end, Ended (hidden by default) from end
  • role="alert" for outage and degraded service; role="status" for info, maintenance and resolved

Worked examples

Saturday maintenance seen from New York

Inputs: Severity maintenance; start 2026-10-03T21:00; end 2026-10-03T23:00; zone Europe/London; visitor in America/New_York; locale en-GB

Result: "Sat 3 Oct, 16:00–18:00 your time" and "That is Sat 3 Oct, 21:00–23:00 BST (London time)."

London is on BST (UTC+1) and New York on EDT (UTC-4), five hours apart.

Same window seen from Kolkata

Inputs: As above; visitor in Asia/Kolkata (UTC+5:30)

Result: "Sun 4 Oct, 01:30–03:30 your time"

20:00-22:00 UTC is after midnight in India, so the date moves to Sunday.

Outage without times

Inputs: Severity outage; title "Payments are down"

Result: Red banner with role="alert", the label Outage and no time lines

With no start or end the notice simply stays until you change the code.

Limitations

  • It is a manual notice: it cannot detect outages or read your monitoring tool.
  • If the page hosting it is unreachable, so is the banner - keep a separately hosted status page for real incidents.
  • With a plain fixed-height iframe the reserved space remains after the banner hides.
  • A visitor whose device clock or time zone is wrong sees the window converted wrongly.

Where publishers use it

  • An online shop announcing two hours of checkout maintenance on a Saturday night, shown on the basket and account pages
  • A SaaS dashboard login page warning of degraded API performance with a link to the public status page
  • A bank or utility's help centre posting an outage notice during an incident and switching it to Resolved afterwards
  • A university portal scheduling an overnight student-records upgrade across several campuses' time zones
  • A web agency adding the same maintenance notice to a dozen client sites from one builder link

Questions

Why show two times?

Your customers are not all in your zone. A 21:00-23:00 London window is 16:00-18:00 in New York, 22:00-00:00 in Berlin and 01:30-03:30 the next day in Kolkata. Showing the visitor's own time first avoids mental arithmetic; the business time underneath lets people match it with your emails. When the visitor is in the same zone only one line is shown.

When does it use role="alert"?

Only for Outage and Degraded service. WAI-ARIA defines alert as important, usually time-sensitive information and gives it an assertive live setting, so a screen reader interrupts to read it. Maintenance, information and resolved notices are advisory, so they use role="status", which is read when the user is idle. Overusing alert trains people to ignore it.

Does it check whether my site is actually down?

No. It shows exactly what you write. It cannot detect an outage, and if your whole site is down the banner page is down too. For an automatic check use the Website Status Badge, and keep a separately hosted status page for real incidents.

What happens after the end time?

By default the banner hides and the frame collapses; with the embed.js loader the iframe shrinks to its 80 px minimum. Set after=show to keep an "Ended" notice instead, which is useful for a short post-incident note. In the builder preview an ended banner stays visible with an explanation.

What height should I give it?

About 270 px for the default maintenance notice with title, message and two time lines at 480 px wide; about 170 px for an outage with a one-line message and no times. The loader script (data-a2z-widget="website-alert-banner") resizes it automatically.

How do I mark an incident as fixed?

Change the severity to resolved and rewrite the title, for example "Payments are working again". The banner turns green with a tick, uses role="status", and you can add the end time so it removes itself later.

Sources

  1. Accessible Rich Internet Applications (WAI-ARIA) 1.2 - alert and status roles - W3C . Defines alert as important, usually time-sensitive information (implicit aria-live assertive) and status as advisory information not important enough to justify an alert (polite). Checked 2026-10-01.
  2. Time Zone Database (tz / zoneinfo) - IANA . The zone rules used to convert the maintenance window between the business zone and the visitor's zone. 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 Website Alert Banner
https://a2z.tools/embed/website-alert-banner

Related widgets

More Announcements & Notices widgets →

  • Website Status Badge

    Website & Security SVG badge

    A live online/offline badge for any website, re-checked every five minutes.

    Get code

  • Uptime SLA Calculator

    Networking & IT Calculator New

    Allowed downtime per day, week, month, quarter and year for any availability %, and the reverse.

    Get code

  • Announcement Bar

    Announcements & Notices Tool New

    A slim top-of-page message strip with icon, link button, colour tone and optional start and end dates.

    Get code

  • Time Zone Converter

    Time & Date Converter

    Convert a date and time between any two time zones, with daylight-saving gaps and overlaps explained.

    Get code

  • Holiday Closure Notice

    Announcements & Notices Tool New

    Holiday opening hours and closure dates that hide past days and highlight today in your time zone.

    Get code

  • Free Shipping Bar

    Announcements & Notices Tool New

    A free-delivery threshold message with a progress meter showing how much more a basket needs.

    Get code

Preview

CustomizeGet code