Explore documentation
  1. Welcome to Incidents 👋
  2. Frequently Asked Questions
  3. On-call scheduling and alerting
    1. Get started
    2. Slack and other integrations ↗
    3. Tag on-call in Slack
    4. Mobile apps ↗
    5. Connecting external calendars
    6. Advanced guide
  4. Incident management
    1. Get started
    2. Post mortems
    3. Metadata & Catalog
    4. Screening alerts
    5. 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. Customize status page with CSS and JavaScript
      3. Password, IP allowlist, and SSO protection
      4. Status page updates
      5. Manually tracked item
      6. Third party services
      7. Status announcement
      8. Embeddable status badge
      9. Widget types
      10. Translations
      11. Status page subscriptions
  7. Incidents API
    1. Getting an API token
    2. Pagination
    3. Monitors
    4. Heartbeats
    5. On-call & incidents
    6. Status pages
    7. Metadata
    8. Integrations
    9. Team members
    10. Organization roles
    11. Usage
    12. Reporting

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 status page subscribers about the change to send notifications.
  4. Click Save changes.

Remove the announcement by clearing the text field and saving.

Status page with an announcement above the monitors

The announcement doesn't follow your service status

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 → Settings → 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.

Embedded announcement at the top of a website

Set a target URL

Send clicks somewhere other than your status page, like an incident post:

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

Leave it empty to open your status page.

Customize the announcement design

Embed the announcement into your site settings with custom CSS

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

  1. In Embed the announcement into your site, find Custom CSS when the announcement is visible.
  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.

Move the announcement to the bottom

Set bottom instead of top to show the announcement at the bottom of the page:

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

.betteruptime-announcement__message {
  color: black;
}

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.

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 one-line announcement

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

Minimal announcement style
.betteruptime-announcement {
  --betteruptime-announcement-bg: #4f46e5;
  --betteruptime-announcement-color: #ffffff;
  --betteruptime-announcement-font-size: 15px;
  --betteruptime-announcement-padding-y: 12px;
  --betteruptime-announcement-padding-x: 24px;
  font-weight: 500;
}

.betteruptime-announcement__message a {
  color: #ffffff;
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.6);
}

Bold and attention-grabbing

High-visibility red announcement

Make sure critical incidents get noticed immediately:

High-visibility announcement style
.betteruptime-announcement {
  --betteruptime-announcement-bg: #dc2626;
  --betteruptime-announcement-color: #ffffff;
  --betteruptime-announcement-font-size: 16px;
  --betteruptime-announcement-padding-y: 20px;
  --betteruptime-announcement-padding-x: 32px;
  font-weight: 600;
  letter-spacing: 0.5px;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.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;
}

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

Bottom notification bar

Announcement bar at the bottom of a website

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;
  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

Announcement as a card in the top-right corner

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-radius: 8px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}

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

.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;
}

Previous article

Third party services on status pages

Next article

Embeddable status badge