Skip to main content

​
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: 
<div
  data-statusstack-components="your-stack"
  data-theme="light"  <!-- or "dark" -->
></div>

​
Colors

Override default colors: 
<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: 
<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: 
<script src="https://statusstack.com/embed.js"></script>
<div data-statusstack-badge="your-stack"></div>
Displays: 🟢 All Systems Operational

​
Component List

Full component listing: 
<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: 
<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: 
<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: 
// 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: 
<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

Customize colors to match your brand:
  • Use your primary brand color
  • Match font family
  • Consistent border radius
  • Appropriate spacing
Optimize widget loading:
  • Lazy load below the fold
  • Limit components shown (5-10)
  • Cache widget script
  • Use CDN for faster delivery
Ensure widget is accessible:
  • Sufficient color contrast
  • Keyboard navigation support
  • Screen reader friendly
  • ARIA labels included

​
Examples

​
Minimal Badge

<!-- Inline status badge -->
<p>
  Service Status: 
  <span data-statusstack-badge="production"></span>
</p>

<!-- 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>

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

​
Next Steps

Advanced Embedding

Advanced widget features

Status Pages

Full status page setup