# 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](https://imagedelivery.net/xZXo0QFi-1_4Zimer-T0XQ/6f0807fe-30c4-468f-2aa2-3c59c1a7ce00/lg2x =2507x473)

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

### 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](/docs/uptime/working-with-status-pages/embeddable-status-badge/). 

## 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 customization.png](https://imagedelivery.net/xZXo0QFi-1_4Zimer-T0XQ/c81d96d7-2941-4991-f943-cca7e3647800/orig =2250x2497)

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:

```css
[label 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

```css
[label 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:

```css
[label 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

![Status page - Announcement Minimal.png](https://imagedelivery.net/xZXo0QFi-1_4Zimer-T0XQ/e3104ac6-ee36-4464-45b5-5b60fa3b6900/public =2882x490)

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

```css
[label 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

![Status page - Announcement Red.png](https://imagedelivery.net/xZXo0QFi-1_4Zimer-T0XQ/2c483e15-8f0c-4684-f6aa-19d5d7c81e00/md2x =2800x507)

Make sure critical incidents get noticed immediately:

```css
[label 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

![Status page - Announcement Footer.png](https://imagedelivery.net/xZXo0QFi-1_4Zimer-T0XQ/eb7797fa-63c0-4934-0f0c-bffdcc428600/public =2893x302)

Position the announcement at the bottom instead of the top:

```css
[label 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

![Status page - Announcement corner.png](https://imagedelivery.net/xZXo0QFi-1_4Zimer-T0XQ/92876a5f-e0b4-4695-117a-0aaca89a0b00/lg1x =1224x534)

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

```css
[label 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.