Dashboard Customization

Dashboard customization allows you to create professional, branded status displays that align with your organization’s visual identity and communication needs.

URL and Domain Configuration

Default Dashboard URLs

Every dashboard starts with a unique, randomly generated URL:

# Example
https://a1b2c3d4-e5f6-7890-abcd-ef1234567890.checkly-dashboards.com

You can also use a custom subdomain to make your dashboard more recognizable.

Custom subdomains must be unique across all Checkly users. Choose something specific to your organization to avoid conflicts.

Full Custom Domain Configuration

Use your own domain for maximum branding control and professional appearance:

Domain Configuration

Add your custom domain in the dashboard settings

DNS Setup

Create the required DNS records at your domain provider

Domain Verification

Complete domain verification if required by Checkly

SSL Certificate

Automatic SSL certificate provisioning and renewal

Go Live

Dashboard becomes accessible at your custom domain

Required DNS Records

# CNAME Record (required)
Type: CNAME
Name: status (or your chosen subdomain)
Value: checkly-dashboards.com
TTL: 3600 (or your domain provider's default)

# TXT Record (if domain verification required)
Type: TXT
Name: _checkly-domain-verification.status
Value: [Verification code provided by Checkly]
TTL: 3600 (or your domain provider's default)

DNS changes can take up to 24-48 hours to propagate globally. Plan custom domain setup accordingly if you have time-sensitive launch requirements.

Look and Feel

Logo

Upload your brand logo to personalize the dashboard header. The logo image supports PNG, JPG, and SVG formats with a maximum size of 1024px×1024px.

Logo Link

Add a clickable destination URL for your logo. When visitors click the logo, they’ll be redirected to your specified website (typically your company homepage).

Favicon

Set a custom favicon for browser tabs and bookmarks. The favicon should be 64px×64px and in PNG, ICO, or SVG format for optimal display across browsers.

Auto Paginate

Automatically switch between dashboard pages when you have multiple pages of checks. Configure the timing interval (1 minute default) and number of checks displayed per page (15 default).

Auto Refresh

Set automatic dashboard refresh intervals to keep status information current. Choose from 1 minute, 5 minutes, or 10 minutes based on your monitoring needs.

Show Header

Control whether the dashboard displays the header section containing your title, description, and logo. Useful for clean, minimal status displays.

Show Check Run Links

Enable or disable clickable links on check results that allow viewers to see detailed check run information and logs.

Metrics

Display performance metrics on your dashboard:

Show p99: Display 99th percentile response time metrics
Show p95: Display 95th percentile response time metrics

Advanced CSS Customization

CSS Editor and Tools

For Team and Enterprise plans, unlock complete design control:

Access CSS Editor

Navigate to the Look & Feel section and open the CSS editor

Edit Styles

Modify CSS in the editor to achieve desired appearance

Save and Test

Save changes and reload dashboard to preview styling

CSS Classes

The following table lists the CSS classes available for customizing your dashboard appearance:

Name	Description	Class Name
Dashboard header	Main header container with logo and title	`.header`
Logo	Company logo display area	`.logo`
Status summary	Overall status overview section	`.status-summary`
Status passing	Green status indicator styling	`.status-summary--passing`
Status failing	Red status indicator styling	`.status-summary--failing`
Main content	Primary dashboard content area	`.main`
Incidents summary	Incident overview section	`.incidents-summary`
Check	Individual check card container	`.check`
Check result	Check status result display	`.check__result`
Passing check	Green check status styling	`.check__result--passing`
Failing check	Red check status styling	`.check__result--failure`
Degraded check	Yellow/orange degraded status styling	`.check__result--degraded`
Check metrics	Performance metrics display area	`.check__metrics`
Check list	Container for all check cards	`.check-list`
Empty check list	Styling for when no checks are present	`.check-list--empty`
Time range	Time period selector container	`.period`
Active time range	Currently selected time period	`.period--active`
Time range selector	Time period dropdown/selector	`.period-selector`
Pagination	Page navigation controls	`.pagination`
Incident	Individual incident display	`.incident`
Incidents page	Full incidents listing page	`.incidents-page`
Incidents detail page	Detailed incident information page	`.incidents-detail-page`
Incident list	Container for incident listings	`.incident-list`
Incident list date	Date headers in incident lists	`.incident-list__date`
Active incident list	Currently active incidents container	`.active-incident-list`
Active incident card	Individual active incident display	`.active-incident`
Major incident	High priority incident styling	`.active-incident--major`
Minor incident	Low priority incident styling	`.active-incident--minor`
Incident header	Incident title and metadata area	`.active-incident__header`
Metric	Performance metric display	`.metric`
Metric improved	Positive metric change styling	`.metric--improved`
Metric worsened	Negative metric change styling	`.metric--worsened`
Metric badge	Metric value indicator	`.metric__badge`
Dashboard footer	Footer area with links and branding	`.footer`
Error 500	Server error page styling	`.error-500`
Error 400	Client error page styling	`.error-400`
Login background	Login page background area	`.login-background`
Login box	Login form container	`.login-box`
Login input	Login form input fields	`.login-input`
Login button	Primary login button	`.login-button`
Login social button	Social login option buttons	`.login-social-button`
Logout button	User logout button	`.logout-button`
Logout icon	Logout button icon	`.logout-button__icon`

Responsive Design Considerations

Ensure your dashboard works well across different screen sizes and devices:

/* Responsive design example */
/* Mobile optimization */
@media (max-width: 768px) {
  .dashboard-header {
    padding: 1rem;
    text-align: center;
  }
  
  .check-card {
    margin-bottom: 0.5rem;
    padding: 1rem;
  }
  
  .dashboard-main {
    padding: 1rem;
  }
}

/* Tablet optimization */
@media (min-width: 769px) and (max-width: 1024px) {
  .check-card {
    flex: 1 1 calc(50% - 1rem);
  }
}

/* Desktop optimization */
@media (min-width: 1025px) {
  .check-card {
    flex: 1 1 calc(33.333% - 1rem);
  }
}

/* Large display optimization */
@media (min-width: 1440px) {
  .dashboard-container {
    max-width: 1400px;
    margin: 0 auto;
  }
}

Extensive CSS customization can sometimes interfere with dashboard functionality. Test thoroughly after making styling changes, especially for interactive elements and responsive behavior.

Custom Theme Examples

Professional Corporate Theme

Clean, corporate styling for business environments:

/* Corporate theme example */
.dashboard-header {
  background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
  color: white;
  padding: 2rem;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.dashboard-main {
  background: #f8fafc;
  padding: 2rem;
}

.check-card {
  background: white;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  margin-bottom: 1rem;
  padding: 1.5rem;
  transition: all 0.3s ease;
}

.check-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}

.status-operational {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  color: white;
  border-radius: 6px;
  padding: 0.5rem 1rem;
}

Modern Dark Theme

Sleek, modern styling for technology-focused organizations:

/* Modern dark theme example */
.dashboard-container {
  background: #0f172a;
  color: #f1f5f9;
  font-family: 'Inter', system-ui, sans-serif;
}

.dashboard-header {
  background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
  border-bottom: 1px solid #334155;
  padding: 2rem;
}

.check-card {
  background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
  border: 1px solid #475569;
  border-radius: 12px;
  padding: 1.5rem;
  margin-bottom: 1rem;
  transition: all 0.3s ease;
}

.check-card:hover {
  border-color: #64748b;
  transform: scale(1.02);
}

.status-operational {
  background: linear-gradient(135deg, #059669 0%, #047857 100%);
  box-shadow: 0 0 20px rgba(5, 150, 105, 0.3);
}

.status-failing {
  background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
  box-shadow: 0 0 20px rgba(220, 38, 38, 0.3);
}

Start with the CSS boilerplate generator to understand the dashboard’s structure, then gradually customize elements to match your brand. Test changes frequently to ensure responsive behavior.

Getting Started

Detect

Communicate

Resolve

Integrations

Dashboard Customization

URL and Domain Configuration

Default Dashboard URLs

Full Custom Domain Configuration

Required DNS Records

Look and Feel

Logo

Logo Link

Favicon

Auto Paginate

Auto Refresh

Show Header

Show Check Run Links

Metrics

Advanced CSS Customization

CSS Editor and Tools

CSS Classes

Responsive Design Considerations

Custom Theme Examples

Professional Corporate Theme

Modern Dark Theme

Getting Started

Detect

Communicate

Resolve

Integrations

​URL and Domain Configuration

​Default Dashboard URLs

​Full Custom Domain Configuration

​Required DNS Records

​Look and Feel

​Logo

​Logo Link

​Favicon

​Auto Paginate

​Auto Refresh

​Show Header

​Show Check Run Links

​Metrics

​Advanced CSS Customization

​CSS Editor and Tools

​CSS Classes

​Responsive Design Considerations

​Custom Theme Examples

​Professional Corporate Theme

​Modern Dark Theme

URL and Domain Configuration

Default Dashboard URLs

Full Custom Domain Configuration

Required DNS Records

Look and Feel

Logo

Logo Link

Favicon

Auto Paginate

Auto Refresh

Show Header

Show Check Run Links

Metrics

Advanced CSS Customization

CSS Editor and Tools

CSS Classes

Responsive Design Considerations

Custom Theme Examples

Professional Corporate Theme

Modern Dark Theme