> ## Documentation Index
> Fetch the complete documentation index at: https://docs.statusstack.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Status Pages

> Create and customize public status pages for your Stacks

## Overview

Every Stack in StatusStack automatically gets a public status page where you can share real-time status information with customers, clients, and stakeholders.

***

## Accessing Your Status Page

Each Stack has a unique URL:

```
https://statusstack.com/status/[your-stack-slug]
```

**Example:**

```
Stack Name: Production Infrastructure
Stack Slug: production-infrastructure
Status Page: https://statusstack.com/status/production-infrastructure
```

***

## Status Page Features

<CardGroup cols={2}>
  <Card title="Real-Time Status" icon="signal">
    Live component status updates every 1-5 minutes
  </Card>

  <Card title="Incident History" icon="history">
    Display past incidents and resolution timelines
  </Card>

  <Card title="Email Subscriptions" icon="envelope">
    Let visitors subscribe to status updates
  </Card>

  <Card title="Custom Branding" icon="palette">
    Logo, colors, and custom domain (Pro/Enterprise)
  </Card>

  <Card title="Maintenance Windows" icon="wrench">
    Schedule and display planned maintenance
  </Card>

  <Card title="Uptime Statistics" icon="chart-line">
    Show 7-day, 30-day, and 90-day uptime percentages
  </Card>
</CardGroup>

***

## Customizing Your Status Page

<Steps>
  <Step title="Open Stack Settings">
    Navigate to your Stack and click **⚙️ Settings**
  </Step>

  <Step title="Go to Status Page Tab">
    Click **"Status Page"** in the settings menu
  </Step>

  <Step title="Configure Basic Settings">
    Customize page information:

    ```yaml theme={null}
    Page Title: Production Services Status
    Description: Real-time status of our production infrastructure
    Support URL: https://support.yourcompany.com
    Support Email: support@yourcompany.com
    ```
  </Step>

  <Step title="Upload Logo (Pro/Enterprise)">
    Add your company logo:

    * **Recommended size**: 200x50px (transparent PNG)
    * **Maximum size**: 2MB
    * **Formats**: PNG, SVG preferred
  </Step>

  <Step title="Choose Color Scheme">
    Set primary brand color:

    ```yaml theme={null}
    Primary Color: #FF5D5C (your brand color)
    Status Colors:
      - Operational: #10b981 (green)
      - Degraded: #f59e0b (yellow)
      - Critical: #ef4444 (red)
      - Maintenance: #3b82f6 (blue)
    ```
  </Step>

  <Step title="Configure Visibility">
    Set page visibility:

    <Tabs>
      <Tab title="Public">
        * Anyone with the link can view
        * Indexed by search engines (optional)
        * Best for customer-facing pages
      </Tab>

      <Tab title="Private">
        * Requires team login
        * Not indexed by search engines
        * Best for internal monitoring
      </Tab>

      <Tab title="Password Protected">
        * Public URL but requires password
        * Share password with authorized users
        * Best for client-specific pages (MSP)
      </Tab>
    </Tabs>
  </Step>

  <Step title="Save Changes">
    Click **"Save Status Page Settings"**
  </Step>
</Steps>

***

## Status Page Layout

### Default Layout

```
┌─────────────────────────────────────────────┐
│  [Logo]        Production Services Status   │
│                                             │
│  🟢 All Systems Operational                 │
│                                             │
├─────────────────────────────────────────────┤
│                                             │
│  📊 Current Status                          │
│                                             │
│  🟢 Production API          ↑ 99.9%         │
│  🟢 Database               ↑ 100%          │
│  🟢 CDN                    ↑ 99.8%         │
│  🟢 Payment Processing     ↑ 99.7%         │
│                                             │
├─────────────────────────────────────────────┤
│                                             │
│  📅 Scheduled Maintenance                   │
│                                             │
│  Jan 25, 2025 2:00-4:00 AM UTC             │
│  Database migration and upgrades            │
│                                             │
├─────────────────────────────────────────────┤
│                                             │
│  📜 Incident History                        │
│                                             │
│  ✅ Resolved - Jan 15, 2025                │
│     Brief API outage (15 minutes)           │
│                                             │
│  ✅ Resolved - Jan 10, 2025                │
│     Scheduled maintenance completed         │
│                                             │
├─────────────────────────────────────────────┤
│                                             │
│  ✉️  Subscribe to Updates                   │
│                                             │
│  [email@example.com] [Subscribe]            │
│                                             │
└─────────────────────────────────────────────┘
```

### Grouped Components Layout

Organize components into collapsible groups:

```
┌─────────────────────────────────────────────┐
│  🟢 All Systems Operational                 │
├─────────────────────────────────────────────┤
│                                             │
│  🔧 Core Services             [Collapse ▼]  │
│    🟢 Production API          ↑ 99.9%       │
│    🟢 Database               ↑ 100%        │
│    🟢 Cache Layer            ↑ 99.8%       │
│                                             │
│  🌐 Infrastructure           [Expand ▶]     │
│                                             │
│  💳 Payment Processing       [Expand ▶]     │
│                                             │
└─────────────────────────────────────────────┘
```

***

## Component Display Options

### Showing Component Details

Configure what information to display for each component:

<AccordionGroup>
  <Accordion title="Status Indicator">
    Color-coded status badges:

    * 🟢 **Operational** - Green
    * 🟡 **Degraded** - Yellow
    * 🔴 **Critical** - Red
    * 🔵 **Maintenance** - Blue
    * ⚪ **Unknown** - Gray
  </Accordion>

  <Accordion title="Uptime Percentage">
    Show uptime stats:

    ```
    Component Name    ↑ 99.9% (7d)
    ```

    Options:

    * Last 7 days
    * Last 30 days
    * Last 90 days
    * Hide uptime
  </Accordion>

  <Accordion title="Response Time">
    Display performance metrics:

    ```
    Production API    125ms avg
    ```

    Shows:

    * Average response time
    * Updated in real-time
    * Custom monitors only
  </Accordion>

  <Accordion title="Last Updated">
    Timestamp of last check:

    ```
    Updated 2 minutes ago
    ```
  </Accordion>
</AccordionGroup>

### Component Ordering

Customize the order components appear:

1. **Manual ordering** - Drag and drop in settings
2. **Alphabetical** - A-Z by component name
3. **By status** - Critical → Degraded → Operational
4. **By importance** - Set priority weights

**Recommended:** Manual ordering with most critical first

***

## Incident Management

### Creating Incidents

Manually create incidents for transparency:

<Steps>
  <Step title="Open Stack">
    Navigate to your Stack dashboard
  </Step>

  <Step title="Click Create Incident">
    Click **"Create Incident"** button
  </Step>

  <Step title="Fill Incident Details">
    ```yaml theme={null}
    Title: API Performance Degradation
    Status: Investigating
    Impact: Degraded Performance
    Affected Components:
      - Production API
      - Database
    Message: |
      We are currently investigating reports of
      slower than normal API response times.
      Our team is actively working on this issue.
    ```
  </Step>

  <Step title="Post Incident">
    Click **"Create Incident"** - appears on status page immediately
  </Step>
</Steps>

### Incident Lifecycle

Track incidents through their lifecycle:

```
1. 🔵 Investigating
   └─ Initial detection, gathering information

2. 🟡 Identified
   └─ Root cause found, planning fix

3. 🔧 Monitoring
   └─ Fix deployed, monitoring stability

4. ✅ Resolved
   └─ Issue fully resolved, post-mortem complete
```

### Posting Incident Updates

Keep stakeholders informed:

<Steps>
  <Step title="Open Incident">
    Click on the active incident
  </Step>

  <Step title="Add Update">
    Click **"Post Update"**
  </Step>

  <Step title="Write Update">
    ```yaml theme={null}
    Status: Identified
    Message: |
      We have identified the cause as a database
      connection pool exhaustion. Our team is
      deploying a fix now. ETA: 10 minutes.
    ```
  </Step>

  <Step title="Publish">
    Update appears on status page
    Email sent to subscribers
  </Step>
</Steps>

**Best practices:**

* Update every 15-30 minutes during active incidents
* Be transparent about root cause
* Provide ETAs when possible
* Notify when resolved

***

## Email Subscriptions

Allow visitors to subscribe to updates:

### Enabling Subscriptions

<Steps>
  <Step title="Open Status Page Settings">
    Stack → Settings → Status Page
  </Step>

  <Step title="Enable Subscriptions">
    Toggle **"Allow Email Subscriptions"** to ON
  </Step>

  <Step title="Configure Options">
    ```yaml theme={null}
    Require Confirmation: Yes (recommended)
    Send Welcome Email: Yes
    Unsubscribe Link: Included in all emails
    ```
  </Step>

  <Step title="Save Settings">
    Subscription form appears on status page
  </Step>
</Steps>

### What Subscribers Receive

Subscribers get emails for:

* **Incident Created** - New outage or issue
* **Incident Updated** - Progress updates
* **Incident Resolved** - Issue fixed
* **Maintenance Scheduled** - Upcoming maintenance (optional)
* **Component Status Change** - Major status changes (optional)

**Example subscription email:**

```
Subject: [STATUS UPDATE] Production API - Investigating

StatusStack - Production Services
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

🔵 INVESTIGATING

API Performance Degradation

We are currently investigating reports of slower
than normal API response times. Our team is
actively working on this issue.

Affected Services:
- Production API
- Database

Updates will be posted as we learn more.

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

View full status page:
https://statusstack.com/status/production

Manage subscription:
https://statusstack.com/unsubscribe/token123
```

### Managing Subscribers

View and manage your subscribers:

1. Navigate to Stack → Settings → **"Subscribers"**
2. See total subscriber count
3. Export subscriber list (CSV)
4. Remove specific subscribers
5. View subscription analytics

***

## Scheduled Maintenance

Communicate planned downtime:

<Steps>
  <Step title="Open Stack">
    Navigate to your Stack
  </Step>

  <Step title="Click Schedule Maintenance">
    Click **"Schedule Maintenance"** button
  </Step>

  <Step title="Configure Maintenance">
    ```yaml theme={null}
    Title: Database Migration
    Start: January 25, 2025 at 2:00 AM UTC
    End: January 25, 2025 at 4:00 AM UTC
    Description: |
      We will be performing a database migration
      to improve performance. Services may be
      unavailable during this window.
    Affected Components:
      - Production API
      - Database
    Notify Subscribers: Yes (7 days before)
    ```
  </Step>

  <Step title="Save Maintenance">
    Appears on status page immediately
    Notification sent to subscribers
  </Step>
</Steps>

### Maintenance Display

Maintenance windows appear prominently:

```
┌─────────────────────────────────────────────┐
│  🔵 Scheduled Maintenance                   │
│                                             │
│  📅 January 25, 2025                        │
│  🕐 2:00 AM - 4:00 AM UTC                   │
│                                             │
│  Database Migration                         │
│                                             │
│  We will be performing a database migration │
│  to improve performance. Services may be    │
│  unavailable during this window.            │
│                                             │
│  Affected:                                  │
│  - Production API                           │
│  - Database                                 │
│                                             │
└─────────────────────────────────────────────┘
```

***

## Custom Domains (Pro/Enterprise)

Use your own domain for status pages:

### Setting Up Custom Domain

<Steps>
  <Step title="Choose Subdomain">
    Decide on subdomain:

    ```
    status.yourcompany.com
    health.yourcompany.com
    monitoring.yourcompany.com
    ```
  </Step>

  <Step title="Add DNS Record">
    In your DNS provider, add CNAME record:

    ```dns theme={null}
    Type: CNAME
    Name: status
    Value: custom.statusstack.com
    TTL: 3600
    ```
  </Step>

  <Step title="Configure in StatusStack">
    Stack → Settings → Status Page → **"Custom Domain"**

    ```yaml theme={null}
    Custom Domain: status.yourcompany.com
    ```

    Click **"Verify Domain"**
  </Step>

  <Step title="Wait for SSL">
    StatusStack automatically provisions SSL certificate

    Takes 5-60 minutes for DNS propagation
  </Step>

  <Step title="Verify">
    Visit `https://status.yourcompany.com`
  </Step>
</Steps>

### DNS Providers

<Tabs>
  <Tab title="Cloudflare">
    ```dns theme={null}
    Type: CNAME
    Name: status
    Target: custom.statusstack.com
    Proxy Status: DNS Only (not proxied)
    TTL: Auto
    ```
  </Tab>

  <Tab title="AWS Route 53">
    ```dns theme={null}
    Type: CNAME
    Name: status.yourcompany.com
    Value: custom.statusstack.com
    TTL: 300
    ```
  </Tab>

  <Tab title="Google Domains">
    ```dns theme={null}
    Type: CNAME
    Host: status
    Points to: custom.statusstack.com
    TTL: 1h
    ```
  </Tab>

  <Tab title="Namecheap">
    ```dns theme={null}
    Type: CNAME Record
    Host: status
    Value: custom.statusstack.com
    TTL: Automatic
    ```
  </Tab>
</Tabs>

***

## Embedding Status Widgets

Embed live status on your website:

### Option 1: Status Badge

Inline status indicator:

```html theme={null}
<script src="https://statusstack.com/embed.js"></script>
<div data-statusstack-badge="production-infrastructure"></div>
```

**Displays:**

```
🟢 All Systems Operational
```

### Option 2: Component List

Show all components:

```html theme={null}
<script src="https://statusstack.com/embed.js"></script>
<div
  data-statusstack-components="production-infrastructure"
  data-theme="light"
></div>
```

**Displays:**

```
Current Status
🟢 Production API       99.9%
🟢 Database            100%
🟢 CDN                 99.8%
```

### Option 3: Incident Feed

Show recent incidents:

```html theme={null}
<script src="https://statusstack.com/embed.js"></script>
<div
  data-statusstack-incidents="production-infrastructure"
  data-limit="5"
></div>
```

### Customization Options

```html theme={null}
<div
  data-statusstack-components="your-stack-slug"
  data-theme="dark"              <!-- light|dark -->
  data-show-uptime="true"        <!-- true|false -->
  data-show-history="false"      <!-- true|false -->
  data-max-height="400px"
></div>
```

See [Embed Guide](/guides/embed-customization) for full documentation.

***

## Status Page Analytics

Track status page usage (Enterprise):

<CardGroup cols={2}>
  <Card title="Pageviews">
    Daily/weekly/monthly traffic to status page
  </Card>

  <Card title="Subscriber Growth">
    New subscribers over time
  </Card>

  <Card title="Incident Engagement">
    How many people viewed each incident
  </Card>

  <Card title="Traffic Sources">
    Referrers to your status page
  </Card>
</CardGroup>

***

## Best Practices

<AccordionGroup>
  <Accordion title="Keep It Simple">
    **Don't overwhelm visitors**

    ✅ Show 5-10 critical services
    ✅ Group related components
    ✅ Hide internal services

    ❌ List every microservice
    ❌ Show development environments
    ❌ Include redundant components
  </Accordion>

  <Accordion title="Be Transparent During Incidents">
    **Communicate openly**

    ✅ Post incident within 5 minutes
    ✅ Update every 15-30 minutes
    ✅ Explain root cause
    ✅ Provide ETAs when possible

    ❌ Hide incidents
    ❌ Go silent during outages
    ❌ Be vague about issues
  </Accordion>

  <Accordion title="Maintain Regularly">
    **Keep status page current**

    Monthly:

    * Review component list
    * Update descriptions
    * Check branding
    * Verify contact information

    Quarterly:

    * Review incident response process
    * Update maintenance schedules
    * Audit subscriber list
  </Accordion>

  <Accordion title="Use Custom Domain">
    **Build trust with branded URL**

    ❌ `statusstack.com/status/company-123`
    ✅ `status.yourcompany.com`

    Benefits:

    * Professional appearance
    * Easier to remember
    * Better for marketing
    * SEO benefits
  </Accordion>
</AccordionGroup>

***

## Troubleshooting

### Custom Domain Not Working

**Check:**

1. DNS CNAME record is correct
2. DNS has propagated (use `dig` or `nslookup`)
3. Not using Cloudflare proxy (should be DNS only)
4. Waited 5-60 minutes for SSL provisioning

### Subscribers Not Receiving Emails

**Verify:**

1. Email subscriptions are enabled
2. Emails not in spam folder
3. Subscriber confirmed email address
4. Notification events are configured

### Status Page Showing as Private

**Check:**

1. Stack visibility setting is "Public"
2. No password protection enabled
3. Stack is not archived

***

## Next Steps

<CardGroup cols={2}>
  <Card title="Embed Status Widgets" icon="code" href="/guides/embed-customization">
    Add status widgets to your website
  </Card>

  <Card title="Incident Response" icon="siren" href="/guides/status-monitoring">
    Learn best practices for incident management
  </Card>

  <Card title="Custom Branding" icon="palette" href="/guides/msp-branding">
    Advanced branding options (MSP)
  </Card>

  <Card title="Email Integrations" icon="envelope" href="/integrations/email">
    Configure email delivery settings
  </Card>
</CardGroup>