Skip to main content

Customizing Your Status Page

StatiBeat includes a dedicated customization area for branding, homepage layout, hosted embeds, extensibility hooks, incident card display, and notification policies.

Customization screen in the live demo

tip

Customization in StatiBeat is not only visual. The same area also controls homepage behavior, incident-card content, email delivery, and long-running notifications. Terraform governance, domains, admin authentication, and viewer access live in their own admin areas.

This guide is based on the current implementation in application/frontend/src/pages/admin/Customization.jsx.

Main customization areas​

The current UI has six top-level tabs:

  • Homepage
  • Branding
  • Extensibility
  • Embeds
  • Incidents
  • Notifications

Branding​

The branding tab currently supports:

  • site title
  • site subtitle
  • header identity mode: Logo + Text, Logo Only, or Text Only
  • managed uploads or approved URLs for the light-mode logo
  • managed uploads or approved URLs for the dark-mode logo
  • managed favicon upload or approved favicon URL
  • light and dark brand colors
  • live header preview in light and dark themes

A few current behaviors matter:

  • Logo Only and Text Only are explicit header identity modes
  • external logo and favicon URLs must be safe public https asset URLs
  • dark logo is optional
  • the UI prevents saving if there is no visible branding at all
note

The live UI includes a light and dark preview so you can catch bad logo sizing or poor contrast before publishing changes.

Extensibility​

The extensibility tab adds bounded hosted-page hooks without opening the door to arbitrary inline code.

Current extensibility settings include:

  • custom_css
  • custom_head_script_url
  • custom_body_script_url
  • document_locale
  • datetime_locale

Important boundaries:

  • custom CSS is stored as bounded text and only applied on hosted public routes
  • imported stylesheets and style-tag markup are rejected
  • script hooks are external public https URLs only
  • script URLs must end in .js or .mjs
  • inline custom JavaScript is intentionally not supported

Localization is groundwork rather than a full translated-copy system today:

  • document_locale sets the hosted page lang attribute
  • datetime_locale controls public date and time formatting
  • future translated strings can build on the same page-local locale selection later

Embeds​

The embeds tab currently manages two hosted status surfaces:

  • Hosted Badge
  • Hosted Widget

The badge is an SVG surface intended for places like:

  • docs pages
  • changelog sidebars
  • support portals

The widget is an iframe surface intended for:

  • customer dashboards
  • help centers
  • internal launchpads

Current embed settings include:

  • enable or disable badge
  • short badge label
  • enable or disable widget
  • generated endpoint URLs and copy-paste snippets

The current UI also warns when the page is private, because hosted embeds still inherit viewer access rules.

Homepage​

The homepage tab includes layout controls, hierarchy browsing defaults, and default landing focus.

The current homepage sections are:

  • Current status and live activity
  • Component hierarchy
  • Previous activity

Admins can:

  • reorder sections
  • hide sections
  • choose the default hierarchy browsing mode

The current hierarchy display modes are:

  • Tree View
  • Basic View

Incident settings​

The incidents tab lets you control how active incident cards look on the homepage and how incident workflows behave.

The current options include:

  • primary message content
  • show affected components summary
  • show started timestamp
  • show last updated timestamp
  • show impact text in collapsed card
  • show View Details link

Primary message content currently supports:

  • description
  • latest status update
  • description then latest status update
  • latest status update then description
  • none
Why these options matter

This is one of the easiest places to tune how much detail customers see at a glance. Teams that prefer concise updates may want to lead with the latest update, while teams handling more complex incidents may want the description and latest update together.

Homepage default focus​

The application can also open the homepage focused on a selected hierarchy item by default.

The current workflow is:

  1. Enable Show component by default on fresh homepage load.
  2. Pick a hierarchy item from the selector.

The helper text in the UI notes that any level is allowed.

Incident policy controls​

The incidents tab currently includes incident guardrails such as:

  • require a resolution reason when closing incidents
  • allow reopening closed incidents

These are operational policy choices, not just cosmetic settings.

Notifications​

The notifications tab currently combines outbound email settings with long-running incident and maintenance alerts.

Email delivery​

The current email delivery UI supports:

  • Platform default
  • Custom SMTP on eligible paid plans
  • optional reply-to address

When custom SMTP is enabled, the form also supports:

  • from name
  • from address
  • SMTP host
  • SMTP port
  • SMTP username
  • SMTP password

The platform-managed sender remains available as the default and fallback path, and the UI requires a sender address when custom SMTP is selected.

Long-running incident notifications​

The notifications tab currently supports long-running incident notifications with:

  • enable or disable toggle
  • Slack notifications
  • email notifications
  • recipient list
  • no-update threshold in hours

The current validation requires at least one notification channel when this feature is enabled.

Long-running maintenance notifications​

The same tab also supports long-running maintenance notifications with:

  • enable or disable toggle
  • Slack notifications
  • email notifications
  • recipient list
  • notify-after-end threshold in hours