Site-wide alert banners

Site-wide alerts inject a banner at the top of every page on your site. The alert is served directly from the edge, requiring no changes to your source content.

Use cases

• Failover notifications: Inform visitors when serving from a backup/static version
• Maintenance notices: Announce scheduled downtime or ongoing maintenance
• Emergency messages: Urgent security or service notifications
• Promotional banners: Time-limited offers or announcements
• Cookie consent: GDPR/privacy compliance notices

Configuration

Navigate to Alert editor in the dashboard sidebar.

Basic settings

Field	Description
Enabled	Toggle the alert on or off site-wide
Alert title	Short headline text displayed prominently
Alert body	Main message content (HTML markup supported)

The alert body accepts full HTML, allowing you to include links, formatting, and custom structure:

<strong>Notice:</strong> We are currently experiencing issues.
Check our <a href="/status">status page</a> for updates.

Custom CSS

Use the Additional CSS field to style the alert banner. The alert container uses the ID #__alert:

#__alert {
  background-color: #ff6b35;
  color: white;
  padding: 12px 20px;
  text-align: center;
  font-family: system-ui, sans-serif;
}

#__alert a {
  color: white;
  text-decoration: underline;
}

Example styles

Warning banner (amber):

#__alert {
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: white;
  padding: 10px;
  text-align: center;
  font-weight: 500;
}

Info banner (blue):

#__alert {
  background-color: #0ea5e9;
  color: white;
  padding: 12px;
  text-align: center;
  border-bottom: 2px solid #0284c7;
}

Maintenance banner (grey):

#__alert {
  background-color: #374151;
  color: #f3f4f6;
  padding: 14px;
  text-align: center;
  font-size: 14px;
}

Custom JavaScript

Use the Additional Javascript field to add interactivity:

Dismissible alert with localStorage persistence:

(function() {
  const alertId = 'maintenance-2024-01';
  const dismissed = localStorage.getItem('alert-dismissed-' + alertId);

  if (dismissed) {
    document.getElementById('__alert').style.display = 'none';
    return;
  }

  const closeBtn = document.querySelector('#__alert .close-btn');
  if (closeBtn) {
    closeBtn.addEventListener('click', function() {
      localStorage.setItem('alert-dismissed-' + alertId, 'true');
      document.getElementById('__alert').style.display = 'none';
    });
  }
})();

Pair this with an alert body containing a close button:

<span>Site maintenance scheduled for Sunday 2am-4am AEST</span>
<button class="close-btn" style="margin-left: 20px; background: none; border: none; color: inherit; cursor: pointer;">✕</button>

Auto-hide after delay:

setTimeout(function() {
  const alert = document.getElementById('__alert');
  if (alert) {
    alert.style.transition = 'opacity 0.5s';
    alert.style.opacity = '0';
    setTimeout(function() { alert.style.display = 'none'; }, 500);
  }
}, 10000); // Hide after 10 seconds

Propagation time

After saving, allow approximately 30 seconds for the alert to propagate across all edge locations.

Permissions

Only users with the Developer, Administrator, or Organization owner roles can modify alert settings. Users with the Content manager role can view alert configuration but cannot edit.

See Team management for role details.

Best practices

• Keep it brief: Alert banners should be scannable at a glance
• Use clear language: Avoid jargon, especially for public-facing notices
• Include a call-to-action: Link to more information where appropriate
• Test on mobile: Ensure your custom CSS works on smaller screens
• Change the alert ID: When using dismissible alerts with localStorage, update the ID for each new message so users see new alerts

Limitations

• Alerts are injected via edge processing; very large HTML/CSS/JS may impact page load time
• The alert appears on all pages—there’s no per-path filtering (use Page Rules for path-specific behaviour)
• Alerts are not version-controlled; consider keeping a backup of complex configurations