Documentation

🚀 Plugin Overview

Cookie Consent Lite is a professional WordPress plugin designed to help website owners comply with GDPR and CCPA regulations. The plugin features revolutionary Nuclear Cache-Busting Technology that ensures the cookie banner works with any caching system.

✨ Key Features

📋 System Requirements

🔌 Supported Cache Systems

Cookie Consent Lite works seamlessly with all major caching systems:

• Plugins: WP Rocket, W3 Total Cache, WP Super Cache, LiteSpeed Cache, WP Fastest Cache, Autoptimize, SG Optimizer, Breeze
• Server-Level: Redis, Memcached, OPcache
• CDNs: Cloudflare, CloudFront, KeyCDN, MaxCDN
• Hosting: WP Engine, SiteGround, Kinsta, Flywheel

📦 Installation & Setup

Method 1: WordPress Admin (Recommended)

1. Log in to your WordPress admin dashboard
2. Go to Plugins → Add New
3. Search for "Cookie Consent Lite"
4. Click "Install Now" on the plugin by Opt-4
5. Click "Activate" after installation
6. Go to Settings → Cookie Consent to configure

🎯 First Setup (5 Minutes)

Follow these steps to get your cookie banner running quickly:

Step 1: Enable the Banner

1. Go to Settings → Cookie Consent
2. Ensure "Enable Banner" is turned ON
3. The default banner text is already GDPR/CCPA compliant

Step 2: Configure Buttons

1. Keep the default button labels or customize them
2. Enable "Show Reject Button" for GDPR compliance
3. Enable "Show Cookie Settings Button" for granular control

Step 3: Set Cookie Categories

1. Enable Analytics if you use Google Analytics, etc.
2. Enable Marketing if you use advertising pixels
3. Enable Preferences if you store user preferences

Step 4: Test the Banner

1. Click "Save Changes & Clear Cache"
2. Open your website in an incognito/private window
3. The banner should appear at the bottom of the page

⚙️ Configuration Guide

🎛️ General Settings

Access all settings via Settings → Cookie Consent in your WordPress admin.

Banner Display Options

🔘 Button Configuration

Customize button labels, colors, and behavior:

Accept Button

Label: "Accept All Cookies"
Background: #4a90a4
Text Color: #ffffff
Action: Accept all cookie categories

Reject Button

Label: "Reject All"
Background: #6b7280
Text Color: #ffffff
Action: Reject all non-essential cookies
GDPR Required: Yes

Settings Button

Label: "Cookie Settings"
Background: transparent
Text Color: #4a90a4
Action: Open granular consent modal

🍪 Cookie Categories

Configure which cookie types your site uses:

🎨 Styling Options

Customize the appearance to match your brand:

Color Scheme

/* Primary Colors */
--ccl-primary: #4a90a4;
--ccl-primary-hover: #3d7a8c;
--ccl-text: #333333;
--ccl-background: #ffffff;

/* Button Colors */
--ccl-accept-bg: #4a90a4;
--ccl-reject-bg: #6b7280;
--ccl-settings-bg: transparent;

Custom CSS

Add custom CSS in the Appearance tab:

/* Custom banner styling */
.ccl-banner {
    border-radius: 15px !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1) !important;
}

/* Custom button hover effects */
.ccl-accept-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(74,144,164,0.3);
}

🔧 Developer API Reference

📱 JavaScript API

Control the cookie banner programmatically:

Check Consent Status

// Check if user has given consent for a category
if (CookieConsentLite.hasConsent('analytics')) {
    // Load analytics script
    gtag('config', 'GA_MEASUREMENT_ID');
}

// Check specific cookie consent
if (CookieConsentLite.isCookieAllowed('_ga')) {
    console.log('Google Analytics allowed');
}

Show/Hide Banner

// Show the banner manually
CookieConsentLite.showBanner();

// Hide the banner
CookieConsentLite.hideBanner();

// Reset all consents (useful for testing)
CookieConsentLite.resetConsents();

Event Listeners

// Listen for consent changes
document.addEventListener('ccl-consent-changed', function(event) {
    const { category, consent } = event.detail;
    console.log(`${category} consent: ${consent}`);
    
    if (category === 'marketing' && consent) {
        // Load marketing scripts
        loadFacebookPixel();
    }
});

// Listen for banner shown/hidden
document.addEventListener('ccl-banner-shown', function() {
    console.log('Cookie banner displayed');
});

document.addEventListener('ccl-banner-hidden', function() {
    console.log('Cookie banner hidden');
});

🐘 PHP Functions

Server-side integration functions:

Check Consent in PHP