> ## 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.

# Widget Customization

> Customize StatusStack embeddable widgets to match your brand

## Overview

StatusStack widgets can be fully customized to match your website's design, including colors, fonts, layout, and behavior.

***

## Customization Options

### Theme

Choose light or dark theme:

```html theme={null}
<div
  data-statusstack-components="your-stack"
  data-theme="light"  <!-- or "dark" -->
></div>
```

### Colors

Override default colors:

```html theme={null}
<div
  data-statusstack-components="your-stack"
  data-primary-color="#FF5D5C"
  data-operational-color="#10b981"
  data-degraded-color="#f59e0b"
  data-critical-color="#ef4444"
></div>
```

### Size and Layout

Control widget dimensions:

```html theme={null}
<div
  data-statusstack-components="your-stack"
  data-max-height="400px"
  data-compact="true"         <!-- Condensed layout -->
  data-show-uptime="true"     <!-- Show uptime % -->
  data-show-description="false" <!-- Hide descriptions -->
></div>
```

***

## Widget Types

### Badge Widget

Minimal inline status indicator:

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

**Displays:** `🟢 All Systems Operational`

### Component List

Full component listing:

```html theme={null}
<div
  data-statusstack-components="your-stack"
  data-limit="10"             <!-- Max components to show -->
  data-sort="status"          <!-- Sort by: status, name, uptime -->
></div>
```

### Incident Feed

Recent incidents:

```html theme={null}
<div
  data-statusstack-incidents="your-stack"
  data-limit="5"              <!-- Number of incidents -->
  data-show-resolved="true"   <!-- Include resolved -->
></div>
```

***

## Advanced Customization

### Custom CSS

Override widget styles:

```html theme={null}
<style>
.statusstack-widget {
  font-family: 'Your Font', sans-serif;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.statusstack-component {
  padding: 12px;
  border-left: 3px solid var(--status-color);
}
</style>
```

### JavaScript API

Programmatic control:

```javascript theme={null}
// Initialize widget
const widget = StatusStack.init({
  stack: 'your-stack',
  element: '#status-widget',
  theme: 'light',
  onStatusChange: (component, status) => {
    console.log(`${component.name} is now ${status}`);
  }
});

// Refresh widget
widget.refresh();

// Destroy widget
widget.destroy();
```

***

## Responsive Design

Widgets automatically adapt to screen size:

```html theme={null}
<div
  data-statusstack-components="your-stack"
  data-responsive="true"      <!-- Enable responsive -->
  data-mobile-compact="true"  <!-- Compact on mobile -->
></div>
```

**Breakpoints:**

* Desktop: Full layout
* Tablet (\< 768px): Condensed
* Mobile (\< 480px): Compact list

***

## Best Practices

<AccordionGroup>
  <Accordion title="Match Your Site Design">
    Customize colors to match your brand:

    * Use your primary brand color
    * Match font family
    * Consistent border radius
    * Appropriate spacing
  </Accordion>

  <Accordion title="Performance">
    Optimize widget loading:

    * Lazy load below the fold
    * Limit components shown (5-10)
    * Cache widget script
    * Use CDN for faster delivery
  </Accordion>

  <Accordion title="Accessibility">
    Ensure widget is accessible:

    * Sufficient color contrast
    * Keyboard navigation support
    * Screen reader friendly
    * ARIA labels included
  </Accordion>
</AccordionGroup>

***

## Examples

### Minimal Badge

```html theme={null}
<!-- Inline status badge -->
<p>
  Service Status: 
  <span data-statusstack-badge="production"></span>
</p>
```

### Sidebar Widget

```html theme={null}
<!-- Full component list in sidebar -->
<aside class="sidebar">
  <h3>System Status</h3>
  <div
    data-statusstack-components="production"
    data-compact="true"
    data-max-height="300px"
  ></div>
</aside>
```

### Footer Status

```html theme={null}
<!-- Status in footer -->
<footer>
  <div data-statusstack-badge="production"></div>
  <a href="https://status.yoursite.com">View Details</a>
</footer>
```

***

## Next Steps

<CardGroup cols={2}>
  <Card title="Advanced Embedding" icon="code" href="/guides/embed-advanced">
    Advanced widget features
  </Card>

  <Card title="Status Pages" icon="browser" href="/guides/status-pages">
    Full status page setup
  </Card>
</CardGroup>