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

# Advanced Embedding

> Advanced features for StatusStack embeddable widgets

## Overview

Advanced embedding features include real-time updates, event handling, programmatic control, and integration with single-page applications.

***

## Real-Time Updates

Widgets automatically poll for updates:

```html theme={null}
<div
  data-statusstack-components="your-stack"
  data-realtime="true"          <!-- Enable real-time -->
  data-poll-interval="60"       <!-- Seconds between updates -->
></div>
```

**Default:** 60 seconds

**Recommendations:**

* Critical services: 30-60 seconds
* Standard monitoring: 60-120 seconds
* Low-priority: 300 seconds (5 minutes)

***

## Event Handling

Subscribe to widget events:

```javascript theme={null}
document.addEventListener('statusstack:loaded', (event) => {
  console.log('Widget loaded', event.detail);
});

document.addEventListener('statusstack:status-changed', (event) => {
  const { component, previousStatus, currentStatus } = event.detail;
  
  // Show notification
  if (currentStatus === 'critical') {
    showAlert(`${component.name} is down!`);
  }
});

document.addEventListener('statusstack:error', (event) => {
  console.error('Widget error', event.detail);
});
```

**Available Events:**

* `statusstack:loaded` - Widget initialized
* `statusstack:status-changed` - Component status changed
* `statusstack:refreshed` - Widget data refreshed
* `statusstack:error` - Error occurred

***

## SPA Integration

### React

```jsx theme={null}
import { useEffect, useRef } from 'react';

function StatusWidget({ stack }) {
  const widgetRef = useRef(null);
  
  useEffect(() => {
    // Load script
    const script = document.createElement('script');
    script.src = 'https://statusstack.com/embed.js';
    script.async = true;
    document.body.appendChild(script);
    
    return () => {
      // Cleanup
      document.body.removeChild(script);
    };
  }, [stack]);
  
  return (
    <div
      ref={widgetRef}
      data-statusstack-components={stack}
      data-theme="light"
    />
  );
}
```

### Vue

```vue theme={null}
<template>
  <div 
    ref="statusWidget"
    :data-statusstack-components="stack"
    data-theme="light"
  />
</template>

<script>
export default {
  props: ['stack'],
  mounted() {
    const script = document.createElement('script');
    script.src = 'https://statusstack.com/embed.js';
    document.head.appendChild(script);
  }
}
</script>
```

### Angular

```typescript theme={null}
import { Component, OnInit, ElementRef, ViewChild } from '@angular/core';

@Component({
  selector: 'app-status-widget',
  template: `
    <div 
      #statusWidget
      [attr.data-statusstack-components]="stack"
      data-theme="light"
    ></div>
  `
})
export class StatusWidgetComponent implements OnInit {
  @ViewChild('statusWidget') widgetRef: ElementRef;
  stack = 'your-stack';
  
  ngOnInit() {
    const script = document.createElement('script');
    script.src = 'https://statusstack.com/embed.js';
    document.head.appendChild(script);
  }
}
```

***

## Programmatic API

Control widgets via JavaScript:

```javascript theme={null}
// Initialize widget
const widget = new StatusStack.Widget({
  stack: 'production',
  element: '#status-widget',
  theme: 'dark',
  realtime: true,
  pollInterval: 60,
  
  // Callbacks
  onLoaded: () => console.log('Loaded'),
  onStatusChange: (component, status) => {
    console.log(`${component.name}: ${status}`);
  },
  onError: (error) => console.error(error)
});

// Methods
widget.refresh();        // Manual refresh
widget.destroy();        // Remove widget
widget.setTheme('dark'); // Change theme
widget.getData();        // Get current data
```

***

## Custom Rendering

Build your own UI with StatusStack data:

```javascript theme={null}
// Fetch data from StatusStack API
fetch('https://statusstack.com/api/public/stacks/your-stack')
  .then(res => res.json())
  .then(data => {
    // Render custom UI
    const container = document.getElementById('custom-status');
    
    data.components.forEach(component => {
      const el = document.createElement('div');
      el.className = `status-${component.status}`;
      el.textContent = `${component.name}: ${component.status}`;
      container.appendChild(el);
    });
  });
```

***

## Performance Optimization

### Lazy Loading

Load widget only when visible:

```javascript theme={null}
const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      // Load widget script
      const script = document.createElement('script');
      script.src = 'https://statusstack.com/embed.js';
      document.head.appendChild(script);
      
      observer.unobserve(entry.target);
    }
  });
});

observer.observe(document.querySelector('.status-widget'));
```

### Caching

Cache widget data:

```html theme={null}
<div
  data-statusstack-components="your-stack"
  data-cache="true"           <!-- Enable caching -->
  data-cache-duration="300"   <!-- Cache for 5 minutes -->
></div>
```

***

## Security

### Content Security Policy

Allow StatusStack in your CSP:

```html theme={null}
<meta http-equiv="Content-Security-Policy" 
  content="
    script-src 'self' https://statusstack.com;
    connect-src 'self' https://statusstack.com;
    img-src 'self' https://assets.statusstack.com;
  "
>
```

### Subresource Integrity

Verify widget script integrity:

```html theme={null}
<script 
  src="https://statusstack.com/embed.js"
  integrity="sha384-..."
  crossorigin="anonymous"
></script>
```

***

## Next Steps

<CardGroup cols={2}>
  <Card title="Widget Customization" icon="palette" href="/guides/embed-customization">
    Customize widget appearance
  </Card>
</CardGroup>