Zest 🍋

A lightweight cookie consent toolkit for GDPR/CCPA compliance.

• Lightweight - ~9KB gzipped (single language) / ~14KB (all 12 languages)
• Zero dependencies - Vanilla JavaScript
• Shadow DOM - Styles isolated from your site
• Modern browsers - No IE11 polyfills needed
• Privacy-first - Respects Do Not Track / Global Privacy Control

Quick Start

<!-- unpkg -->
<script src="https://unpkg.com/@freshjuice/zest"></script>

<!-- jsdelivr -->
<script src="https://cdn.jsdelivr.net/npm/@freshjuice/zest"></script>

Or with configuration:

<script>
  window.ZestConfig = {
    position: 'bottom-right',
    theme: 'auto',
    accentColor: '#0071e3',
    policyUrl: '/privacy-policy'
  };
</script>
<script src="https://unpkg.com/@freshjuice/zest"></script>

Configuration

Via window.ZestConfig

window.ZestConfig = {
  // Position: 'bottom' | 'bottom-left' | 'bottom-right' | 'top'
  position: 'bottom',

  // Theme: 'light' | 'dark' | 'auto' (default: 'auto' follows system)
  theme: 'auto',

  // Accent color for buttons
  accentColor: '#0071e3',

  // Link to privacy policy
  policyUrl: '/privacy',

  // Show floating widget after consent
  showWidget: true,

  // Consent expiration in days
  expiration: 365,

  // Callbacks
  callbacks: {
    onAccept: (consent) => {},
    onReject: () => {},
    onChange: (consent) => {},
    onReady: (consent) => {}
  }
};

Via data attributes

<script
  src="zest.min.js"
  data-position="bottom-left"
  data-theme="dark"
  data-accent="#0071e3"
  data-policy-url="/privacy"
></script>

API

// Show/hide UI
Zest.show()           // Show banner
Zest.hide()           // Hide banner
Zest.showSettings()   // Show settings modal
Zest.reset()          // Clear consent, show banner

// Consent management
Zest.getConsent()     // Get current consent state
Zest.hasConsent('analytics')  // Check specific category
Zest.acceptAll()      // Accept all categories
Zest.rejectAll()      // Reject all (except essential)

Do Not Track (DNT) / Global Privacy Control (GPC)

Zest respects browser privacy signals by default:

window.ZestConfig = {
  respectDNT: true,    // Respect DNT/GPC signals (default: true)
  dntBehavior: 'reject' // What to do when DNT is enabled
};

| Behavior | Description | |----------|-------------| | reject | Auto-reject all non-essential cookies, don't show banner (default) | | preselect | Show banner with non-essential options unchecked | | ignore | Ignore DNT/GPC signals completely |

API methods:

Zest.isDoNotTrackEnabled()  // Returns true if DNT or GPC is enabled
Zest.getDNTDetails()        // Returns { enabled: boolean, source: 'dnt' | 'gpc' | null }

Blocking Modes

Control how aggressively scripts are blocked:

window.ZestConfig = {
  mode: 'safe' // 'manual' | 'safe' | 'strict' | 'doomsday'
};

| Mode | Description | |------|-------------| | manual | Only blocks scripts with data-consent-category attribute | | safe | Manual + known major trackers (Google Analytics, Facebook, etc.) | | strict | Safe + extended tracker list (Hotjar, Mixpanel, Segment, etc.) | | doomsday | Block ALL third-party scripts |

Custom Blocked Domains

Add your own domains to block:

window.ZestConfig = {
  mode: 'safe',
  blockedDomains: [
    'custom-tracker.com',
    { domain: 'another-tracker.com', category: 'analytics' }
  ]
};

Manual Script Tagging

For any mode, you can explicitly tag scripts:

<script data-consent-category="analytics" src="https://..."></script>
<script data-consent-category="marketing">
  // Inline scripts also supported
</script>

Allow Specific Scripts

Prevent a script from being blocked (useful in strict/doomsday modes):

<script data-zest-allow src="https://cdn.example.com/library.js"></script>

Events

document.addEventListener('zest:consent', (e) => {
  console.log('User accepted:', e.detail.consent);
});

document.addEventListener('zest:reject', (e) => {
  console.log('User rejected');
});

document.addEventListener('zest:change', (e) => {
  console.log('Consent changed:', e.detail);
});

document.addEventListener('zest:ready', (e) => {
  console.log('Zest initialized:', e.detail.consent);
});

Localization

Zest has built-in translations with auto-detection.

Supported languages: en, de, es, fr, it, pt, nl, pl, uk, ru, ja, zh

Bundle Options

| Bundle | Size (gzip) | Description | |--------|-------------|-------------| | zest.min.js | ~14KB | All 12 languages, auto-detects | | zest.{lang}.min.js | ~9KB | Single language (e.g., zest.de.min.js) |

<!-- Full bundle - auto-detects language -->
<script src="https://unpkg.com/@freshjuice/zest"></script>

<!-- Single language bundle - smaller size -->
<script src="https://unpkg.com/@freshjuice/zest/dist/zest.de.min.js"></script>

Language Detection

window.ZestConfig = {
  lang: 'auto' // Auto-detect (default)
};

Detection priority:

1. lang config option (if not 'auto')
2. <html lang="de"> attribute
3. Browser language (navigator.language)
4. Fallback to English

Force Specific Language

window.ZestConfig = {
  lang: 'de' // Force German
};

Override Labels

window.ZestConfig = {
  lang: 'de', // Use German as base
  labels: {
    banner: {
      title: 'Custom German Title' // Override just this
    }
  }
};

Standalone JSON translation files also available in /locales/ for external loading.

Custom Styling

Override default styles by passing custom CSS:

window.ZestConfig = {
  customStyles: `
    .zest-banner {
      max-width: 600px;
    }
    .zest-btn--primary {
      border-radius: 20px;
    }
    .zest-modal {
      max-width: 600px;
    }
  `
};

Available CSS custom properties (can also be set via parent CSS):

zest-banner, zest-modal, zest-widget {
  --zest-accent: #0071e3;
  --zest-bg: #ffffff;
  --zest-bg-secondary: #f3f4f6;
  --zest-text: #1f2937;
  --zest-text-secondary: #6b7280;
  --zest-border: #e5e7eb;
  --zest-radius: 12px;
  --zest-radius-sm: 8px;
}

Categories

| Category | ID | Default | Description | |----------|-----|---------|-------------| | Essential | essential | ON | Required cookies (cannot be disabled) | | Functional | functional | OFF | Personalization features | | Analytics | analytics | OFF | Usage tracking | | Marketing | marketing | OFF | Advertising cookies |

Config Schema

JSON Schema available for IDE autocompletion: zest.config.schema.json

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

Credits

Built by Alex Zappa at FreshJuice

License

MIT