Footer

Footer HTML replaces the native status dashboard footer with markup you provide. Add copyright lines, legal links, or feedback widgets that match your site chrome.

Common uses

When Footer HTML is set it replaces the native StatusDashboard footer entirely. The default "Powered by" bar is removed and your HTML is rendered full-width at the very bottom of every eligible public page. If the field is empty, the native footer is shown as normal (unless Whitelabel removed it).

• Full branded footer that matches your own website
• Copyright line, legal links, or social profiles
• Static footer markup (links, text, embedded iframes where allowed)

For chat widgets, analytics, or other executable script, use Custom JS. <script> tags in footer HTML are not executed when injected this way.

Example — full branded footer

The example below uses fixed dark styling. It looks the same in both light and dark mode. For a footer that adapts to the theme toggle, see Light and dark mode below.

<footer style="background:#0f172a;color:#94a3b8;padding:32px 24px;text-align:center;font-size:13px;">
  <p>© 2026 Acme, Inc. —
    <a href="https://acme.com/privacy" style="color:#64748b;">Privacy</a> ·
    <a href="https://acme.com/terms" style="color:#64748b;">Terms</a> ·
    <a href="https://acme.com/support" style="color:#64748b;">Support</a>
  </p>
</footer>

Whitelabel and custom footer

The Whitelabel toggle only removes the default "Powered by StatusDashboard" footer when Footer HTML is empty. Custom Footer HTML and Whitelabel are independent. You can use a custom footer without enabling Whitelabel, and vice versa.

When Footer HTML is set, it replaces the native footer regardless of the Whitelabel setting.

Behavior

• When set, the native footer is hidden and replaced by your HTML. When empty, the native footer is shown (or omitted when Whitelabel is enabled).
• Your HTML renders full-width at the bottom of the page layout, outside the 1024px content constraint. Page content above uses that width cap.
• Standard HTML and inline styles are supported. <style> tags in your HTML are inserted into the page and apply like ordinary stylesheets (prefer the CSS tab for site-wide rules). <script> tags are not executed; use Custom JS instead.
• Your footer is pushed to the bottom of the page regardless of content length on that route.
• Maximum length: 50,000 characters.
• Changes take effect when updated custom code arrives from the status API: on the next full page load, or within about 30 seconds for visitors who already have the page open (status data polls in the background).

Light and dark mode

Custom footer HTML behaves the same way as custom header HTML: it renders exactly as written. The native footer uses platform styles that respond to the theme toggle; your replacement footer does not unless you add theme-aware CSS.

If your footer uses fixed colors, visitors who switch to the opposite mode may see a light footer on a dark page (or the reverse). Link colors and copyright text can also lose contrast.

Use the same pattern as the header: give the footer root a class or id, define light styles as the default in Custom CSS, and add .dark rules for dark mode.

Example — theme-aware footer

Footer HTML (Custom Code → Footer):

<footer class="sd-custom-footer">
  <p>
    © 2026 Acme, Inc. —
    <a href="https://acme.com/privacy">Privacy</a> ·
    <a href="https://acme.com/terms">Terms</a> ·
    <a href="https://acme.com/support">Support</a>
  </p>
</footer>

Custom CSS (Custom Code → CSS):

.sd-custom-footer {
  padding: 32px 24px;
  text-align: center;
  font-size: 13px;
  background: #ffffff;
  color: #64748b;
}

.sd-custom-footer a {
  color: #475569;
  text-decoration: none;
}

.dark .sd-custom-footer {
  background: #0f172a;
  color: #94a3b8;
}

.dark .sd-custom-footer a {
  color: #64748b;
}

Theme rules in Custom CSS apply across all eligible public pages, so you only need to define them once.