🚀 Quick Start Guide

Get Extended Cookie Consent up and running in minutes with this step-by-step guide.

1Installation

Option A: CDN (Recommended)

Add these links to your HTML file:

<!-- 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>

Option B: GitHub Raw

<!-- 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>

Option C: Download

Download the files from the GitHub repository and host them yourself.

2Basic Usage

Initialize with default settings:

// Basic initialization
cookieconsent.extended.init({
  content: {
    header: 'We use cookies',
    message: 'This website uses cookies to enhance your experience.'
  }
});
💡 Tip: Place this script at the bottom of your HTML file, before the closing </body> tag.

3Choose a Theme

Select from 21 beautiful themes:

// Dark theme example
cookieconsent.extended.init({
  ui: {
    theme: 'dracula',
    position: 'bottom-right'
  },
  content: {
    header: '🧛 Cookie Notice',
    message: 'We use cookies to make your experience awesome!'
  }
});

Popular Theme Options:

🌞 Light Themes

  • github-light
  • material-light
  • tailwind-light
  • bootstrap-light
  • ant-light

🌙 Dark Themes

  • dracula
  • github-dark
  • vscode-dark
  • material-dark
  • discord-dark

4Set Position

Choose where the popup appears:

// Bottom bar across full width
cookieconsent.extended.init({
  ui: {
    position: 'bottom-bar',
    theme: 'github-dark'
  }
});

// Center modal with backdrop
cookieconsent.extended.init({
  ui: {
    position: 'center-modal',
    backdrop: true,
    theme: 'material-light'
  }
});

Position Options:

🎯 Corner Positions

  • bottom-right (default)
  • bottom-left
  • top-right
  • top-left

📏 Bar & Center Positions

  • bottom-bar (full width)
  • top-bar (full width)
  • center
  • center-modal (with backdrop)

5Enable Cookie Categories

Let users choose which cookies to accept:

cookieconsent.extended.init({
  ui: {
    showPreferences: true,
    theme: 'tailwind-dark',
    position: 'center'
  },
  
  categories: {
    necessary: {
      enabled: true,
      locked: true,
      name: 'Essential Cookies',
      description: 'Required for the website to function properly.'
    },
    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 show you relevant advertisements.'
    }
  }
});

6Check Consent Status

Use the consent status to conditionally load scripts:

// Check if analytics are allowed
if (cookieconsent.extended.hasConsent('analytics')) {
  // Load Google Analytics
  gtag('config', 'GA_MEASUREMENT_ID');
}

// Check if marketing cookies are allowed
if (cookieconsent.extended.hasConsent('marketing')) {
  // Load Facebook Pixel, etc.
  fbq('init', 'PIXEL_ID');
}

// Get all consent status
const consent = cookieconsent.extended.getConsent();
console.log('Current consent:', consent);
// Output: { necessary: true, analytics: false, marketing: true }

7Listen for Changes

React to consent changes:

// Listen for consent changes
window.addEventListener('cookieConsentChange', function(event) {
  const categories = event.detail.categories;
  
  // Update Google Analytics consent
  if (window.gtag) {
    gtag('consent', 'update', {
      'analytics_storage': categories.analytics ? 'granted' : 'denied',
      'ad_storage': categories.marketing ? 'granted' : 'denied'
    });
  }
  
  console.log('Consent updated:', categories);
});

8Complete Example

Here's a complete, production-ready example:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Website</title>
    
    <!-- Cookie Consent CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/casjay-templates/cookieconsent@main/dist/cookieconsent.min.css">
</head>
<body>
    <h1>Welcome to My Website</h1>
    <p>Your content here...</p>
    
    <!-- Google Analytics -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=GA_MEASUREMENT_ID"></script>
    <script>
        window.dataLayer = window.dataLayer || [];
        function gtag(){dataLayer.push(arguments);}
        
        // Initialize with denied consent
        gtag('consent', 'default', {
            'analytics_storage': 'denied',
            'ad_storage': 'denied'
        });
        
        gtag('js', new Date());
        gtag('config', 'GA_MEASUREMENT_ID');
    </script>
    
    <!-- Cookie Consent -->
    <script src="https://cdn.jsdelivr.net/gh/casjay-templates/cookieconsent@main/dist/cookieconsent.min.js"></script>
    <script>
        cookieconsent.extended.init({
            ui: {
                theme: 'github-dark',
                position: 'bottom-bar',
                showPreferences: true
            },
            
            content: {
                header: 'We value your privacy',
                message: 'We use cookies to enhance your browsing experience and analyze our traffic.',
                acceptAll: 'Accept All Cookies',
                rejectAll: 'Reject All',
                acceptSelected: 'Save Preferences'
            },
            
            categories: {
                necessary: {
                    enabled: true,
                    locked: true,
                    name: 'Essential',
                    description: 'Required for basic website functionality.'
                },
                analytics: {
                    enabled: false,
                    locked: false,
                    name: 'Analytics',
                    description: 'Help us improve our website.'
                },
                marketing: {
                    enabled: false,
                    locked: false,
                    name: 'Marketing',
                    description: 'Personalized advertising.'
                }
            },
            
            callbacks: {
                onAcceptAll: function(categories) {
                    // Enable all tracking
                    gtag('consent', 'update', {
                        'analytics_storage': 'granted',
                        'ad_storage': 'granted'
                    });
                },
                
                onRejectAll: function(categories) {
                    // Keep analytics denied
                    gtag('consent', 'update', {
                        'analytics_storage': 'denied',
                        'ad_storage': 'denied'
                    });
                }
            }
        });
        
        // Listen for changes
        window.addEventListener('cookieConsentChange', function(event) {
            const categories = event.detail.categories;
            
            gtag('consent', 'update', {
                'analytics_storage': categories.analytics ? 'granted' : 'denied',
                'ad_storage': categories.marketing ? 'granted' : 'denied'
            });
        });
    </script>
</body>
</html>

⚠️ Important Notes

  • Always initialize analytics with denied consent first
  • Update consent when user makes choices
  • Test your implementation thoroughly
  • Consider your local privacy laws (GDPR, CCPA, etc.)

🎯 Next Steps

🚀 You're Ready!

You now have a fully functional, GDPR-compliant cookie consent system.

View Examples API Reference