Cookie Consent Demo

Complete cookie consent with left-side settings panel, multi-tier management, and conditional script loading.

Features

• Left-side slide-in panel for detailed settings (opens from banner or footer button)
• Fixed bottom banner for first-time visitors
• Static button in footer for easy access to preferences
• Simplified categories with clear descriptions
• LocalStorage persistence with 365-day expiry
• Conditional script loading based on consent
• Full WCAG AA accessibility with keyboard navigation and screen reader support

Try It

• Click "Cookie Preferences" in the footer below to open the settings panel
• Use Tab to navigate between options, Shift+Tab to go backwards
• Press Space or Enter to toggle categories
• Press Escape or click the overlay to close the panel
• Reload the page to see preferences persist
• Enable debug mode to see console logs: cookieConsent.updateConfig({ debug: true })

Customization

All interface text and settings are centralized in the CONFIG object at the top of the JavaScript. To customize:

• Debug mode: Set CONFIG.debug = true to enable console logging
• Banner text: Edit CONFIG.banner.*
• Panel heading: Edit CONFIG.panel.heading
• Category names/descriptions: Edit CONFIG.categories.*
• Button labels: Edit CONFIG.banner.buttons.* or CONFIG.panel.buttons.*
• Storage duration: Edit CONFIG.expiryDays
• Status labels: Edit CONFIG.statusLabels.*

Try it now: Open the browser console and run:

// Enable debug logging
cookieConsent.updateConfig({ debug: true });

// Change the banner heading
cookieConsent.updateConfig({
  banner: { heading: 'Your custom heading!' }
});

// Change panel title
cookieConsent.updateConfig({
  panel: { heading: 'Cookie Settings' }
});

// View current config
cookieConsentConfig;