An enhanced, GDPR-compliant cookie consent library with granular controls, modern UI, and comprehensive compliance features. Built as an extension of the popular Osano Cookie Consent library.
- 🍪 Granular Cookie Controls - Let users choose specific cookie categories
- ⚡ Modern UI/UX - Beautiful, responsive design with smooth animations
- 🔒 GDPR Compliant - Built-in compliance with GDPR, CCPA, and other privacy laws
- 📊 Analytics Integration - Seamless integration with Google Analytics, GTM
- 🎨 21+ Beautiful Themes - Including Dracula, GitHub, Material, VS Code, and more
- 📍 10 Position Options - From corner popups to full-width bars and center modals
- 📱 Mobile Optimized - Perfect responsive design for all devices
- 🌙 Dark Mode Support - Automatic dark/light theme detection plus custom dark themes
- ♿ Accessibility - Full keyboard navigation and screen reader support
- 🔍 Audit Trail - Optional consent recording for compliance
<!-- CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/casjay-templates/cookieconsent@main/dist/cookieconsent.min.css">
<!-- JavaScript -->
<script src="https://cdn.jsdelivr.net/gh/casjay-templates/cookieconsent@main/dist/cookieconsent.min.js"></script><!-- CSS -->
<link rel="stylesheet" href="https://raw.githubusercontent.com/casjay-templates/cookieconsent/main/dist/cookieconsent.min.css">
<!-- JavaScript -->
<script src="https://raw.githubusercontent.com/casjay-templates/cookieconsent/main/dist/cookieconsent.min.js"></script>npm install @casjay-templates/cookieconsent// Initialize with default settings
cookieconsent.extended.init({
content: {
header: 'We use cookies',
message: 'This website uses cookies to enhance your experience.',
acceptAll: 'Accept All',
rejectAll: 'Reject All'
}
});cookieconsent.extended.init({
ui: {
position: 'center-modal',
theme: 'dracula',
showPreferences: true,
animationType: 'bounce',
backdrop: true
},
categories: {
necessary: {
enabled: true,
locked: true,
name: 'Essential Cookies',
description: 'Required for basic website functionality'
},
analytics: {
enabled: false,
locked: false,
name: 'Analytics Cookies',
description: 'Help us understand how visitors use our website'
},
marketing: {
enabled: false,
locked: false,
name: 'Marketing Cookies',
description: 'Used to deliver personalized advertisements'
}
},
analytics: {
enabled: true,
gtag: true
},
callbacks: {
onAcceptAll: function(categories) {
// Initialize all tracking
gtag('config', 'GA_MEASUREMENT_ID');
},
onCategoryToggle: function(category, enabled) {
console.log(\`\${category} cookies \${enabled ? 'enabled' : 'disabled'}\`);
}
}
});// Dracula theme with center modal
cookieconsent.extended.init({
ui: { theme: 'dracula', position: 'center-modal' }
});
// GitHub Dark theme with bottom bar
cookieconsent.extended.init({
ui: { theme: 'github-dark', position: 'bottom-bar' }
});
// Material Light theme with top-right corner
cookieconsent.extended.init({
ui: { theme: 'material-light', position: 'top-right' }
});// Check if user has consented to analytics
if (cookieconsent.extended.hasConsent('analytics')) {
// Initialize analytics
gtag('config', 'GA_MEASUREMENT_ID');
}
// Get all consented categories
const consent = cookieconsent.extended.getConsent();
console.log('Consented categories:', consent);
// Get audit trail (if enabled)
const auditTrail = cookieconsent.extended.getAuditTrail();
console.log('Consent history:', auditTrail);github-light- Clean GitHub-inspired designmaterial-light- Google Material Designtailwind-light- Tailwind CSS stylingbootstrap-light- Bootstrap framework colorsant-light- Ant Design systemchakra-light- Chakra UI thememantine-light- Mantine frameworksemantic-light- Semantic UI stylingbulma-light- Bulma CSS frameworkfoundation-light- Foundation framework
dracula- Popular Dracula color schemegithub-dark- GitHub's dark modematerial-dark- Material Design darktailwind-dark- Tailwind dark modevscode-dark- Visual Studio Code darkatom-dark- Atom editor themesublime-dark- Sublime Text colorsnord-dark- Nord color palettediscord-dark- Discord app stylingslack-dark- Slack app themenotion-dark- Notion app colors
bottom-right- Corner popup (default)bottom-left- Bottom left cornerbottom-center- Bottom centerbottom-bar- Full-width bottom bartop-right- Top right cornertop-left- Top left cornertop-center- Top centertop-bar- Full-width top barcenter- Center of screencenter-modal- Center modal with backdrop
slide- Smooth slide animation (default)fade- Fade in/out effectbounce- Bouncy entrance
// Get all available themes
const themes = cookieconsent.extended.getAvailableThemes();
// Get only light themes
const lightThemes = cookieconsent.extended.getThemesByType('light');
// Get only dark themes
const darkThemes = cookieconsent.extended.getThemesByType('dark');
// Get available positions
const positions = cookieconsent.extended.getAvailablePositions();You can override theme variables with CSS:
.cc-popup-extended.cc-theme-dracula {
--cc-primary-color: #your-custom-color;
--cc-background: #your-background;
--cc-text-primary: #your-text-color;
}# Clone the repository
git clone https://github.com/casjay-templates/cookieconsent.git
cd cookieconsent
# Install dependencies
npm install
# Build the project
npm run build
# Start development server
npm run devcookieconsent/
├── src/ # Source files
│ ├── cookieconsent-extended.js
│ └── cookieconsent-extended.css
├── dist/ # Built files
├── docs/ # Documentation and demo
├── examples/ # Usage examples
└── build/ # Build scripts
Contributions are welcome! Please feel free to submit a Pull Request. For major changes, please open an issue first to discuss what you would like to change.
- Fork the repository
- Create your feature branch (
git checkout -b feature/AmazingFeature) - Commit your changes (
git commit -m 'Add some AmazingFeature') - Push to the branch (
git push origin feature/AmazingFeature) - Open a Pull Request
This project is licensed under the MIT License - see the LICENSE file for details.
- Built upon the excellent Osano Cookie Consent library
- Inspired by modern privacy requirements and user experience best practices
Made with ❤️ by CasJay Templates