Overview
Add custom CSS, JavaScript, or HTML to your status dashboard.
Custom code extends your status dashboard with CSS, JavaScript, or replacement header and footer HTML. Use these tools when branding controls alone are not enough for your layout or analytics needs.
Configure custom code per dashboard in Dashboards on the Custom Code tab.
In this section
The Custom Code tab holds four independent fields: CSS, JavaScript, header HTML, and footer HTML. CSS and JavaScript apply across eligible public pages; header and footer HTML replace the native platform chrome when set.
| Topic | What you configure |
|---|---|
| CSS | Styles injected into a <style> tag to override defaults and match your brand |
| JS | JavaScript injected as a <script> tag and executed once per page load |
| Header | HTML that replaces the native status dashboard header |
| Footer | HTML that replaces the native status dashboard footer |
Where custom code applies
Custom code applies to standard public status dashboard pages: home, Subscribe, Support, API, event detail, help articles, and similar routes that share the site header and footer.
It does not apply to digital sign displays (/sign/...) or the SSO callback route (/auth/callback).
Each field is independent. You can add CSS and JS without replacing the native header or footer, or set header HTML only and leave the other fields empty.
Limits and saving
Each field accepts up to 50,000 characters. Save all four fields together from the Custom Code tab. For visitors who already have the dashboard open, changes usually appear within about 30 seconds when status data refreshes in the background, or immediately on the next full page load.
Pass empty strings for individual fields you want to clear. When all four fields are empty, custom code is removed from the dashboard.
If the Custom Code plan feature is disabled, your saved settings remain stored but are not delivered to public visitors until the feature is enabled again.
Light and dark mode
Every eligible page includes a light/dark toggle in the platform action bar. When a visitor switches modes, StatusDashboard adds or removes a dark class on <html>. Built-in page content responds to that class. Custom header and footer HTML does not unless you add theme-aware rules in CSS.
See Header, Footer, and CSS for examples using .dark selectors.