Learn more about Status Pages in the Status Pages overview.
Use public Status Pages to show the uptime of your services through organized cards. Status pages help communicate service availability to your users and stakeholders. 
import { StatusPage, StatusPageService } from "checkly/constructs"

const apiService = new StatusPageService("api-service", {
  name: "API Service",
})

new StatusPage("company-status", {
  name: "Company Status",
  url: "company-status",
  cards: [
    {
      name: "Core Services",
      services: [apiService],
    },
  ],
})

​
Configuration

ParameterTypeRequiredDefaultDescription
namestring✅-Name of the status page
cardsStatusPageCardProps[]✅-Array of card objects containing services
urlstring✅-Subdomain under checkly-status-page.com (unique across all accounts)
customDomainstring❌-Custom domain (e.g., status.example.com)
logostring❌-URL to logo image for the header
redirectTostring❌-URL to redirect when logo is clicked
faviconstring❌-URL to favicon image
defaultThemestring❌'AUTO'Theme: 'DARK' | 'LIGHT' | 'AUTO'

​
StatusPage Options

​
name
string
required
Name of the status page displayed in the header and browser title.Usage:
new StatusPage("company-status", {
  name: "Company Status Page",
  /* More options... */
})
Use cases: Brand visibility, service identification, regional status pages, internal team pages.
​
cards
array
required
Array of card objects that organize services into logical groups on the status page.Usage:
new StatusPage("company-status", {
  name: "Company Status",
  cards: [
    {
      name: "Core Services",
      services: [apiService, webService],
    },
  ],
  /* More options... */
})
Parameters:
ParameterTypeRequiredDescription
namestring✅Display name for the card
servicesStatusPageService[]✅Array of services to display on this card
Examples:
const webAppService = new StatusPageService("web-app", { name: "Web Application" })
const mobileApiService = new StatusPageService("mobile-api", { name: "Mobile API" })
const databaseService = new StatusPageService("database", { name: "Database" })

new StatusPage("functional-status", {
  name: "Functional Status",
  url: "functional-status",
  cards: [
    {
      name: "User-Facing Services", // Customer impact grouped together
      services: [webApp, mobileApi],
    },
    {
      name: "Infrastructure", // Backend services grouped
      services: [database],
    },
  ],
})
Use cases: Service organization, user experience optimization, incident communication, operational clarity.
​
url
string
required
Subdomain under checkly-status-page.com that must be unique across all Checkly accounts.Usage:
new StatusPage("company-status", {
  name: "Company Status",
  url: "company-status", // Creates company-status.checkly-status-page.com
  /* More options... */
})
Use cases: Public status pages, team-specific status pages, service-specific monitoring, temporary status pages.
​
customDomain
string
Custom domain for your status page (e.g., status.example.com). Requires DNS configuration and domain verification.Usage:
new StatusPage("company-status", {
  name: "Company Status",
  url: "status.example.com",
  customDomain: "status.example.com",
  /* More options... */
})
Use cases: Brand consistency, SEO benefits, professional appearance, domain ownership.
URL to logo image displayed in the status page header. Must be publicly accessible.Usage:
new StatusPage("company-status", {
  name: "Company Status",
  logo: "https://company.com/logo.png",
  /* More options... */
})
Use cases: Brand recognition, visual consistency, professional presentation, team identification.
​
redirectTo
string
URL to redirect users when they click the logo. Typically your main website or service.Usage:
new StatusPage("company-status", {
  name: "Company Status",
  logo: "https://company.com/logo.png",
  redirectTo: "https://company.com", // Redirect to main site on logo click
  /* More options... */
})
Use cases: Navigation flow, user engagement, brand consistency, service discovery.
​
favicon
string
URL to favicon image displayed in browser tabs. Must be publicly accessible.Usage:
new StatusPage("company-status", {
  name: "Company Status",
  favicon: "https://company.com/favicon.ico",
  /* More options... */
})
Use cases: Browser tab identification, brand consistency, visual organization, professional appearance.
​
defaultTheme
string
Default color theme for the status page. Options: ‘LIGHT’, ‘DARK’, or ‘AUTO’ (follows system preference).Usage:
new StatusPage("company-status", {
  name: "Company Status",
  defaultTheme: "DARK", // Dark theme by default
  /* More options... */
})
Use cases: User preference accommodation, brand consistency, accessibility, professional appearance.

​
Examples

import { ApiCheck, StatusPage, StatusPageService } from "checkly/constructs"

// Define status page services
const webAppService = new StatusPageService("web-app", {
  name: "Web Application",
})

// Include service status on status page
new StatusPage("saas-company-status", {
  name: "SaaS Company Service Status",
  url: "saas-company-status",
  customDomain: "status.saascompany.com",
  logo: "https://saascompany.com/assets/logo.png",
  redirectTo: "https://saascompany.com",
  favicon: "https://saascompany.com/favicon.ico",
  defaultTheme: "AUTO",
  cards: [
    {
      name: "Core Platform",
      services: [webAppService],
    },
  ],
})

new ApiCheck("web-api-check", {
  name: "Web API Check",
  request: {
    url: "app.example.com/api/status",
    method: "GET",
  },
  // Trigger service incidents from your checks and monitors
  triggerIncident: {
    service: webAppService,
    name: "Web API Outage",
    description: "Web API is down",
    severity: "MAJOR",
    notifySubscribers: true,
  },
})
Service Reuse: A single StatusPageService can be used across multiple status pages and cards, making it easy to maintain consistent service definitions.