Cookie Guard: The GDPR/CCPA Consent Manager (No Dependencies, 12.8 kB, 22 Languages)

Published: 1 month ago (March 29, 2026 at 01:30 AM EDT)

3 min read

Source: Dev.to

Source: Dev.to

Overview

Cookie Guard 🛡️ is a lightweight, dependency‑free GDPR/CCPA consent manager. It provides a simple, customizable solution for handling cookie consent across 22 languages with a fully responsive, mobile‑first UI.

Features

Legal Compliance – Fully GDPR/CCPA compliant workflow (2026 standards).
Hybrid Modes – Supports full third‑party consent and an informational “no‑cookies” mode.
Smart Execution – Auto‑activates analytics/marketing scripts (handles type="text/plain").
Zero Dependencies – Pure vanilla JavaScript; no jQuery or external libraries required.
Privacy Button – Optional persistent floating button to reopen settings.
Legal Terms – Optional acceptance and legal URL handling.
Global Reach – 22 languages (LTR & RTL) with automatic browser detection.
Performance – Ultra‑lightweight (~12.8 kB minified).
Accessibility – Implements ARIA standards for screen readers.
Encapsulation – Built within an IIFE to avoid global namespace pollution.
Customization – Flexible configuration for expiration, link colors, button border‑radius, etc.
Developer API – Public toggle, open, and reset methods for external control.

Installation

Add the minified script before the closing </body> tag and initialise it:

<script src="cookie-guard.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', () => CookieGuard.init());
</script>

Configuration Options

Property	Type	Default	Description
`locale`	string	`auto`	`'auto'` or a 2‑letter ISO language code.
`consent`	boolean	`true`	`true` for third‑party scripts, `false` for info‑only banner.
`url`	string	`null`	Relative URL to your legal/cookies policy page.
`reopen`	boolean	`true`	Renders the floating privacy button.
`radius`	integer	`12`	Buttons border‑radius in pixels.
`delay`	integer	`800`	Modal entrance delay in milliseconds.
`link`	string	`#3b82f6`	Primary link color.
`hover`	string	`#10b981`	Link hover color.
`separator`	string	`•`	Modal footer links separator.
`expiration`	integer	`365`	Consent cookie expiration in days.

Default Settings (JavaScript)

const defaults = {
    locale: 'auto',
    consent: true,
    url: null,
    reopen: true,
    radius: 12,
    delay: 800,
    link: "#3b82f6",
    hover: "#10b981",
    separator: "•",
    expiration: 365,
};

Usage Examples

Basic Initialization (English, custom colors)

document.addEventListener('DOMContentLoaded', () => 
    CookieGuard.init({
        locale: 'en',
        url: "/legal",
        link: "#ff0000",   // red links
        radius: 8,         // button radius
    })
);

Info‑Only Mode (auto‑detect language, no third‑party cookies)

document.addEventListener('DOMContentLoaded', () => 
    CookieGuard.init({
        locale: 'auto',
        consent: false,
    })
);

Managing Scripts

To let Cookie Guard control a script, set type="text/plain" and add data-cg-category (analytics | marketing).

<script type="text/plain" data-cg-category="analytics">
    console.log('Analytics script executed');
</script>

<script type="text/plain" data-cg-category="marketing">
    console.log("Facebook pixel is legally enabled.");
    fbq('init', '123456789');
    fbq('track', 'PageView');
</script>

API Methods

Toggle – Open/close the consent modal:

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

Open – Directly open the modal:

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

Reset – Reset consent state (shortcut: CTRL + SHIFT + X):

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

Live Demo

Try Cookie Guard in action: Cookie Guard Demo – see consent handling, language support, and third‑party script blocking.

Made with ❤️ by Joseba Mirena