Advanced Embedding

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

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);
});

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"
    />
  );
}

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

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);
  }
}

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

// 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);
    });
  });

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'));

<div
  data-statusstack-components="your-stack"
  data-cache="true"           <!-- Enable caching -->
  data-cache-duration="300"   <!-- Cache for 5 minutes -->
></div>

<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;
  "
>

<script 
  src="https://statusstack.com/embed.js"
  integrity="sha384-..."
  crossorigin="anonymous"
></script>