Cookie Guard 🛡️

GDPR/CCPA compliance Cookies Consent Management.

• 
  Package: Cookie Guard JS


• 
  Version: v3.0.0


• 
  Copyright: 2026 JosebaMirena.com
  


• 
  License: MIT License
  


• 
  Author: Joseba Mirena (@joseba-mirena)

A GDPR/CCPA 2026 compliance, simple and customizable Cookies Management system.

MAIN FEATURES

• 
  Legal Compliance: Fully GDPR/CCPA compliant workflow (2026 standards).


• 
  Hybrid Modes: Supports both full third-party consent and "no-cookies" informational mode.


• 
  Smart Execution: Auto-activates Analytics/Marketing scripts (handles type="text/plain").


• 
  Zero Dependencies: Pure Vanilla JavaScript; no jQuery or external libraries required.


• 
  Privacy Focus: Optional persistent "Privacy" floating button to re-open settings.


• 
  Legal Terms: Optional acceptance and Legal URL smart handling.


• 
  Global Reach: Support for 22 languages (LTR & RTL) with automatic browser detection.
  
  
  
  
  • 
    Locales: en, es, ca, eu, gl, et, ar, pt, pl, vi, fr, de, it, ru, zh, ja, id, ko, tr, nl, hi, bn.
  
  
  
  
  
  



• 
  
  Performance: Ultra-lightweight architecture (~12.8 kB minified).



• 
  
  Accessibility: Implements ARIA standards for screen readers.



• 
  
  Encapsulation: Built within an IIFE to ensure no global namespace pollution.



• 
  
  UI/UX: Dynamic CSS/HTML injection with a fully responsive, mobile-first design.



• 
  
  Customization: Flexible configuration for expiration, link colors, and button border-radius.



• 
  
  Developer API: Public toggle, open, and reset methods for external control.

📦 Installation

Add the minified version before the closing </body> tag:

<script 

    src="https://opensource.josebamirena.com/cookie-guard/3.0.0/dist/cookie-guard.min.js" 

    integrity="sha384-4TomZ6aXKNjC0fGi+v+GQTBp9kmS006nQ3SriGo6U0a93lhADVwmw8toL8JQW4vB" 

    crossorigin="anonymous">

</script>

⚙️ Configuration

Cookie Guard default Initialization

<script>

    document.addEventListener('DOMContentLoaded', () => CookieGuard.init());

</script>

Initialization default variables and values

<script>

    const defaults = {

        locale: 'auto', // @string 'auto' or 2-letter ISO code.

        consent: true, // @bool true for 3rd party scripts, false for info-only banner.

        url: null, // @null|string Relative URL to your legal/cookies policy page.

        reopen: true, // @bool Renders the floating privacy button.

        radius: 12, // @int Buttons border-radius in pixels.

        delay: 800, // @int Modal entrance delay in milliseconds.

        link: "#3b82f6", // @string Primary link color.

        hover: "#10b981", // @string Link hover color.

        separator: "•", // @string Modal footer links separator

        expiration: 365, // @int Consent cookie expiration in days.

    };

</script>

Cookie Guard Customized Example

<script>

    document.addEventListener('DOMContentLoaded', () => 

        CookieGuard.init({

            locale: 'en', // fixed language

            url: "/legal", // legal relative url

            link: "#ff0000", // red links

            radius: 8, // buttoms radius

        })

    );

</script>

Cookie Guard non third party cookies mode

<script>

    document.addEventListener('DOMContentLoaded', () => 

        CookieGuard.init({

            locale: 'auto', // auto detect language

            consent: false, // no third party cookies mode

        })

    );

</script>

🛠️ Script Implementation

To let Cookie Guard manage your scripts, add the type attribute text/plain and add the data-cg-category attribute (analytics|marketing):

Test script example

<script 

    type="text/plain" 

    data-cg-category="analytics">

    console.log('Analytics script executed');

</script>

Analytics script example

<script 

    type="text/plain" 

    data-cg-category="analytics" 

    src="https://www.googletagmanager.com/gtag/js?id=UA-XXXXX-Y">

</script>

Marketing script example

<script type="text/plain" data-cg-category="marketing">

    console.log("Facebook pixel is legally enabled.");

    fbq('init', '123456789');

    fbq('track', 'PageView');

</script>

🕹️ Developer API

Toggle Modal

<a href="javascript:void(0)" onclick="CookieGuard.toggle()">Privacy</a>

Force Open

<a href="javascript:void(0)" onclick="CookieGuard.open()">Open Privacy</a>

Hard Reset:

Debug Shortcut: CTRL + SHIFT + X to reset state instantly.

<a href="javascript:void(0)" onclick="CookieGuard.reset()">Reset Privacy</a>

🎯 Live Demo

Try Cookie Guard live on my website:


👉 Cookie Guard Demo

See how it handles consent, 22 languages, and third-party script blocking in action.