@warnthyfriends/compliance-widgets

Enterprise-grade ADA accessibility, GDPR/CCPA cookie consent, and AI assistant widgets for any website. Includes white-label branding, automatic theme detection, preset themes, and a reseller license program.

Features

• ADA Accessibility Widget — Full WCAG 2.1 / Section 508 compliance (font scaling, high contrast, zoom, line spacing, screen reader support)
• GDPR Cookie Consent — Customizable cookie consent banner with granular preference controls
• CCPA Notice — California Consumer Privacy Act "Do Not Sell" notice
• AI Assistant — Optional AI chat assistant (OpenAI-powered or rule-based fallback)
• ComplianceProvider — Single wrapper that initializes all widgets with unified config
• One-click Color Import — Automatically detects host site's CSS variables and applies them
• Preset Themes — Light, Dark, Corporate Blue, Minimal, Emerald, Purple
• White-label Branding — Replace all WTF branding with your own logo, company name, and colors
• Embeddable Script — Single <script> tag integration for non-React sites
• Subscription Validation — API key verification with 7-day grace period
• Reseller License Program — Bulk license tiers for agencies and consultants

Installation

npm install @warnthyfriends/compliance-widgets

Quick Start — React (with server-side validation)

License validation runs server-side only — the browser bundle makes zero network calls. Call validateSubscription from your Node.js backend and pass the result to the widget via subscriptionInfo.

1. Server-side validation (Node.js / Express / Next.js API route)

import { validateSubscription } from '@warnthyfriends/compliance-widgets/server';

// Call from your server — never from the browser
const subscriptionInfo = await validateSubscription(
  process.env.WTF_API_KEY,
  process.env.WTF_SITE_ID,
  'https://warnthyfriends.wtf/api/compliance/validate'
);

// Forward subscriptionInfo to your frontend (e.g. via getServerSideProps, API route, or SSR)

2. Pass to the widget

import { ComplianceProvider } from '@warnthyfriends/compliance-widgets';

function App({ subscriptionInfo }) {
  return (
    <ComplianceProvider
      subscriptionInfo={subscriptionInfo}
      enableAccessibility={true}
      enableCookieConsent={true}
      enableCCPA={false}
      enableAIAssistant={false}
    >
      <YourApp />
    </ComplianceProvider>
  );
}

When subscriptionInfo is not provided, isValid is false (safe degraded state — subscription-gated context consumers will see an invalid subscription).

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | subscriptionInfo | SubscriptionInfo | undefined | Result of server-side validateSubscription(). Required for gated features. | | apiKey | string | undefined | API key forwarded to child widgets (e.g. TTS proxy auth) | | siteId | string | undefined | Site identifier forwarded to child widgets | | theme | string \| ThemeConfig | 'light' | Preset name or custom theme object | | autoDetectColors | boolean | false | Auto-detect CSS variables from host site | | branding | BrandingConfig | {} | White-label branding options | | position | PositionConfig | {} | Widget positioning | | enableAccessibility | boolean | true | Show accessibility widget | | enableCookieConsent | boolean | true | Show cookie consent banner | | enableCCPA | boolean | false | Show CCPA "Do Not Sell" notice | | enableAIAssistant | boolean | false | Show AI chat assistant |

Preset Themes

<ComplianceProvider theme="dark" ...>
<ComplianceProvider theme="corporateBlue" ...>
<ComplianceProvider theme="minimal" ...>
<ComplianceProvider theme="emerald" ...>
<ComplianceProvider theme="purple" ...>

White-label Branding

<ComplianceProvider
  branding={{
    companyName: "Acme Corp",
    logoUrl: "https://acme.com/logo.png",
    hidePoweredBy: true,
    poweredByText: "Powered by Acme Compliance",
    accentColors: {
      primary: "#FF6B35",
      secondary: "#004E89",
      accent: "#1A936F",
    },
  }}
  ...
/>

Embeddable Script (non-React)

Coming Soon — CDN hosted script for non-React sites is not yet available. Subscribe at warnthyfriends.wtf/compliance-widgets for updates.

<!-- CDN coming soon — use npm package in the meantime -->
<!-- <script src="https://cdn.warnthyfriends.com/compliance-widgets/loader.js"></script> -->

License

SEE LICENSE IN LICENSE

© WarnThyFriends — warnthyfriends.com