<script 
  async 
  src="https://userhero.co/widget.js" 
  data-key="pk_live_your_public_key">
</script>

interface UserHero {
  // Widget control
  open(widgetId?: string): void;
  close(): void;
  
  // Feedback submission
  submit(): Promise<void>;
  
  // Metadata
  setMetadata(data: object | null): boolean;
  clearMetadata(): void;
  getMetadata(): object | null;
  
  // Screenshot
  captureScreenshot(widgetId?: string): Promise<void>;
}

open(widgetId?: string): void

// Open default widget
UserHero.open();

// Open specific widget
UserHero.open('w_abc123');

close(): void

UserHero.close();

setMetadata(data: Record<string, unknown> | null): boolean

const success = UserHero.setMetadata({
  userId: 'user_123',
  plan: 'pro',
  company: 'Acme Inc',
  features: {
    beta: true,
    darkMode: true,
  },
});

if (!success) {
  console.error('Failed to set metadata');
}

clearMetadata(): void

// Clear on logout
function handleLogout() {
  UserHero.clearMetadata();
  // ... rest of logout logic
}

getMetadata(): Record<string, unknown> | null

const metadata = UserHero.getMetadata();
console.log(metadata);
// { userId: 'user_123', plan: 'pro', ... }

captureScreenshot(widgetId?: string): Promise<void>

await UserHero.captureScreenshot();

window.UserHeroConfig = {
  publicKey: 'pk_live_xxx',  // Alternative to data-key
  apiBase: 'https://userhero.co',  // Custom API endpoint
};

window.addEventListener('userhero:ready', () => {
  console.log('SDK ready');
});

window.addEventListener('userhero:open', (event) => {
  console.log('Opened widget:', event.detail.widgetId);
});

window.addEventListener('userhero:close', () => {
  console.log('Widget closed');
});

window.addEventListener('userhero:submit', (event) => {
  console.log('Submitted:', event.detail);
  analytics.track('Feedback Submitted', event.detail);
});

declare global {
  interface Window {
    UserHero?: {
      open(widgetId?: string): void;
      close(): void;
      submit(): Promise<void>;
      setMetadata(data: Record<string, unknown> | null): boolean;
      clearMetadata(): void;
      getMetadata(): Record<string, unknown> | null;
      captureScreenshot(widgetId?: string): Promise<void>;
    };
    UserHeroLoaded?: boolean;
    UserHeroConfig?: {
      publicKey?: string;
      apiBase?: string;
    };
  }
}

interface UserHeroSubmitEvent extends CustomEvent {
  detail: {
    feedbackId: string;
    category?: string;
    rating?: number;
    hasScreenshot: boolean;
  };
}

[UserHero] Missing data-key attribute on script tag
[UserHero] Custom metadata exceeds 5KB limit. Data not set.
[UserHero] setMetadata expects an object or null