JavaScript Client SDK Reference

The window.ConsentShield global client interface provides programmatic controls for single-page applications (React, Next.js, Vue, Svelte, Angular).

---

Step 01: TypeScript Interface Signatures

interface ConsentCategories {
  strictly_necessary: boolean;
  analytics: boolean;
  marketing: boolean;
  personalization: boolean;
}

interface ConsentShieldGlobal {
  openPreferences(): void;
  closePreferences(): void;
  getConsentState(): ConsentCategories;
  setCategoryConsent(category: keyof ConsentCategories, allowed: boolean): void;
  hasConsented(): boolean;
  on(event: 'consent_updated' | 'modal_opened' | 'modal_closed', callback: (data: any) => void): () => void;
  exportAuditHash(): string;
}

declare global {
  interface Window {
    ConsentShield: ConsentShieldGlobal;
  }
}

---

Step 02: Real-Time Event Subscriptions

Bind event listeners to trigger or suspend application modules dynamically:

// Listen for consent mutations
window.ConsentShield.on('consent_updated', (event) => {
  if (event.marketing) {
    // Dynamically mount ad networks
    initializeMarketingPixels();
  } else {
    // Suppress ad network payloads
    purgeMarketingStorage();
  }
});

---

Step 03: React & Next.js Custom Hook

Use this production hook in your React component tree:

import { useState, useEffect } from 'react';

export function useConsentShield() {
  const [consent, setConsent] = useState({
    analytics: false,
    marketing: false,
    strictly_necessary: true
  });

  useEffect(() => {
    if (typeof window !== 'undefined' && window.ConsentShield) {
      setConsent(window.ConsentShield.getConsentState());
      
      const unsubscribe = window.ConsentShield.on('consent_updated', (newState) => {
        setConsent(newState);
      });

      return () => unsubscribe();
    }
  }, []);

  return {
    consent,
    openPreferences: () => window.ConsentShield?.openPreferences(),
  };
}

---

Building Headless or Server-Side?

Directly query and record consent records with our high-throughput REST API.

View REST API →