Explore documentation
  1. Welcome to Uptime 👋
  2. Frequently Asked Questions
  3. On-call scheduling and alerting
    1. Get started
    2. Slack and other integrations ↗
    3. Connecting external calendars
    4. Advanced guide
  4. Incidents
    1. Get started
    2. Advanced guide
    3. Reporting ↗
  5. Monitoring
    1. Get started
    2. Working with monitors
    3. Customizing monitors
    4. Monitor types
  6. Status pages
    1. Get started
    2. Advanced guide
      1. Custom subdomain: status.yourdomain.com
      2. Embeddable status badge
      3. Subscribing to status pages
      4. Status page updates
      5. Status announcement
      6. Password, IP allowlist, and SSO protection
      7. Widget types
  7. Uptime API
    1. Getting an API token
    2. Monitors
    3. Heartbeats
    4. On-call & incidents
    5. Status pages
    6. Metadata
    7. Integrations

Status announcement

Share important updates manually using the system status announcement. This displays a persistent message on your status page regardless of incident status.

  1. Go to Status pages → select your status page → Settings → Advanced settings.
  2. Navigate to Share significant news and enter your announcement.
  3. Check Notify your subscribers about the update to send notifications.
  4. Click Save changes.

Remove the announcement by clearing the text field and saving.

Status page announcement.png

The system status announcement does not update automatically based on service status. Update it manually in Share significant news when needed.

When to use system announcements

Use system status announcements for:

  • Scheduled maintenance - Inform users about upcoming planned downtime
  • Major updates - Share news about significant feature releases
  • Service changes - Announce changes to service availability or features
  • General notices - Communicate important information not tied to incidents

System announcements appear on your status page until you manually remove them. For automatic incident-based notifications, use the embeddable status badge instead.

Embed the announcement on your site

Embed real-time status announcements directly on your website. The announcement stays hidden and only appears when you publish a status page announcement, keeping your users informed.

  1. Go to Status pages → select your status page → Advanced settings.
  2. Navigate to Embed the announcement into your site.
  3. Copy the provided <script> tag.
  4. Add the script before the closing </body> tag on your site.
  5. Click Save changes.

The embedded announcement remains hidden by default and does not affect your site's performance. It automatically appears when incidents occur and disappears when they're resolved.

Set a target URL

Direct users to your full status page or incident details:

  1. In Embed the announcement into your site, find Target URL.
  2. Enter the URL where users should go when clicking the announcement.
  3. Click Save changes.

Leave this empty to make the announcement non-clickable.

Customize the announcement design

Status page announcement settings.png

Tailor the announcement's appearance to match your brand using custom CSS.

  1. In Embed the announcement into your site, find Custom CSS.
  2. Add your CSS rules to override the default styles.
  3. Click Save changes.

The announcement updates immediately with your custom styles.

Quick customization with CSS variables

The easiest way to customize the announcement is using CSS variables:

Simple color and spacing customization
.betteruptime-announcement {
  --betteruptime-announcement-bg: #3b82f6;
  --betteruptime-announcement-color: #ffffff;
  --betteruptime-announcement-padding-y: 20px;
}

This changes the background to blue, text to white, and increases vertical padding.

Moving announcement to bottom

Move announcement to bottom
.betteruptime-announcement {
  top: unset;
  bottom: 0;
  background: white;
}

.betteruptime-announcement__message {
  color: black;
}

CSS customization examples

Default styling reference

The embedded announcement uses these default styles and CSS variables:

Default announcement styles
.betteruptime-announcement {
  --betteruptime-announcement-bg: #1F1F20;
  --betteruptime-announcement-color: #FFFFFF;
  --betteruptime-announcement-font-family: SF Pro Display, -apple-system, BlinkMacSystemFont, sans-serif;
  --betteruptime-announcement-font-size: 14px;
  --betteruptime-announcement-line-height: 1.5;
  --betteruptime-announcement-padding-x: 16px;
  --betteruptime-announcement-padding-y: 14px;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 999999;
  background: var(--betteruptime-announcement-bg);
  color: var(--betteruptime-announcement-color);
  padding: var(--betteruptime-announcement-padding-y) var(--betteruptime-announcement-padding-x);
  font-family: var(--betteruptime-announcement-font-family);
  font-size: var(--betteruptime-announcement-font-size);
  line-height: var(--betteruptime-announcement-line-height);
}

.betteruptime-announcement__message {
  max-width: 970px;
  margin: 0 auto;
  text-align: center;
  padding-left: 32px;
  padding-right: 32px;
}

.betteruptime-announcement__close {
  position: absolute;
  top: 0;
  right: 0;
  padding: var(--betteruptime-announcement-padding-y) var(--betteruptime-announcement-padding-x);
  color: var(--betteruptime-announcement-color);
}

You can override these styles or use CSS variables for easier customization.

Minimal and elegant

Minimal Design.png

A clean, understated design that doesn't distract from your content:

Minimal announcement style
.betteruptime-announcement {
  --betteruptime-announcement-bg: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  --betteruptime-announcement-color: #ffffff;
  --betteruptime-announcement-font-size: 15px;
  --betteruptime-announcement-padding-y: 16px;
  --betteruptime-announcement-padding-x: 24px;
  font-weight: 500;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.betteruptime-announcement__message a {
  color: #ffffff;
  text-decoration: none;
  border-bottom: 2px solid rgba(255, 255, 255, 0.5);
  transition: border-color 0.2s ease;
}

.betteruptime-announcement__message a:hover {
  border-bottom-color: #ffffff;
}

Bold and attention-grabbing

Bold Design.png

Make sure critical incidents get noticed immediately:

High-visibility announcement style
.betteruptime-announcement {
  --betteruptime-announcement-bg: linear-gradient(90deg, #ff0844 0%, #ff6b6b 100%);
  --betteruptime-announcement-color: #ffffff;
  --betteruptime-announcement-font-size: 16px;
  --betteruptime-announcement-padding-y: 20px;
  --betteruptime-announcement-padding-x: 32px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  box-shadow: 0 8px 16px rgba(255, 8, 68, 0.3);
  animation: slideDown 0.3s ease-out;
}

@keyframes slideDown {
  from {
    transform: translateY(-100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.betteruptime-announcement__message a {
  color: #ffffff;
  text-decoration: none;
  padding: 8px 16px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 4px;
  margin-left: 12px;
  transition: background 0.2s ease;
}

.betteruptime-announcement__message a:hover {
  background: rgba(255, 255, 255, 0.3);
}

Bottom notification bar

Bottom Design.png

Position the announcement at the bottom instead of the top:

Bottom-positioned announcement
.betteruptime-announcement {
  --betteruptime-announcement-bg: #1f2937;
  --betteruptime-announcement-color: #f3f4f6;
  --betteruptime-announcement-padding-y: 16px;
  --betteruptime-announcement-padding-x: 24px;
  top: unset;
  bottom: 0;
  border-top: 3px solid #3b82f6;
  box-shadow: 0 -4px 6px rgba(0, 0, 0, 0.1);
}

.betteruptime-announcement__message a {
  color: #60a5fa;
  text-decoration: none;
  font-weight: 600;
}

.betteruptime-announcement__message a:hover {
  color: #93c5fd;
  text-decoration: underline;
}

Rounded corner badge

Rounded Corner Badge.png

A modern, card-like appearance positioned in the corner:

Corner badge style
.betteruptime-announcement {
  --betteruptime-announcement-bg: #ffffff;
  --betteruptime-announcement-color: #1f2937;
  --betteruptime-announcement-padding-y: 20px;
  --betteruptime-announcement-padding-x: 24px;
  top: 20px;
  right: 20px;
  left: auto;
  width: 400px;
  max-width: calc(100vw - 40px);
  border-left: 4px solid #ef4444;
  border-radius: 8px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}

.betteruptime-announcement__message {
  text-align: left;
  padding-left: 0;
  padding-right: 0;
}

.betteruptime-announcement__message a {
  color: #ef4444;
  text-decoration: none;
  font-weight: 600;
  display: inline-block;
  margin-top: 8px;
}

.betteruptime-announcement__message a:hover {
  text-decoration: underline;
}

CSS customization tips

  • Match your brand - Use your brand colors and typography
  • Ensure readability - Maintain sufficient contrast between text and background
  • Test responsiveness - Verify the announcement works on mobile devices
  • Avoid blocking content - Position carefully to avoid covering critical UI elements
  • Use animations sparingly - Subtle transitions are better than distracting effects
  • Consider accessibility - Ensure sufficient color contrast and font sizes.

Previous article

Status page updates

Next article

Password, IP allowlist, and SSO protection