GDPR/CCPA compliant cookie consent banner. No dependencies, mobile responsive, accessible.

Demo 1: Basic Cookie Banner

Simple cookie consent with accept/decline buttons.

<div data-tradecalcs-cookie-banner
     data-message="We use cookies to improve your experience."
     data-accept-text="Accept"
     data-decline-text="Decline">
</div>

Current Status:

Demo 2: With Privacy Policy Link

Include a link to your privacy policy for full compliance.

<div data-tradecalcs-cookie-banner
     data-message="We use cookies to improve your experience and analyze site traffic."
     data-accept-text="Accept All"
     data-decline-text="Reject All"
     data-policy-url="/privacy"
     data-policy-text="Privacy Policy">
</div>

Demo 3: Custom Message for Contractors

Customize the message to fit your business.

<div data-tradecalcs-cookie-banner
     data-message="This site uses cookies to remember your preferences and show you relevant project examples."
     data-accept-text="Got it"
     data-decline-text="No thanks"
     data-policy-url="/privacy"
     data-policy-text="Learn more">
</div>

📦 Installation

Step 1: Add the CSS and JavaScript files to your HTML:

<!-- Add to <head> -->
<link rel="stylesheet" href="/widgets/cookie-banner.css">

<!-- Add before closing </body> -->
<script src="/widgets/cookie-banner.js"></script>

Step 2: Add the banner to your page (typically in footer or just before </body>):

<div data-tradecalcs-cookie-banner
     data-message="We use cookies to improve your experience."
     data-accept-text="Accept"
     data-decline-text="Decline"
     data-policy-url="/privacy"
     data-policy-text="Privacy Policy">
</div>

Note: Replace d790a6cc.tradecalcs.pages.dev with tradecalcs.com once the production domain is configured.

Configuration Options

Data Attributes

data-tradecalcs-cookie-banner (required) — Main container
data-message (optional) — Cookie consent message (default: "We use cookies to improve your experience and analyze site traffic.")
data-accept-text (optional) — Accept button text (default: "Accept")
data-decline-text (optional) — Decline button text (default: "Decline")
data-policy-url (optional) — Privacy policy URL (e.g., "/privacy")
data-policy-text (optional) — Privacy policy link text (default: "Privacy Policy")

CSS Custom Properties

--tc-cookie-bg — Banner background
--tc-cookie-border — Banner border color
--tc-cookie-text — Text color
--tc-cookie-link — Policy link color
--tc-cookie-link-hover — Policy link hover color
--tc-cookie-btn-accept-bg — Accept button background
--tc-cookie-btn-accept-hover — Accept button hover
--tc-cookie-btn-decline-bg — Decline button background
--tc-cookie-btn-decline-hover — Decline button hover
--tc-cookie-padding — Banner padding
--tc-cookie-gap — Gap between message and buttons
--tc-cookie-radius — Border radius

JavaScript API

// Initialize all banners manually
TradeCalcsCookieBanner.init();

// Initialize specific banner
const element = document.querySelector('[data-tradecalcs-cookie-banner]');
TradeCalcsCookieBanner.initElement(element);

// Get consent status
const consent = TradeCalcsCookieBanner.getConsent();
// Returns: true (accepted), false (declined), null (no choice yet)

// Clear consent (for testing or user request)
TradeCalcsCookieBanner.clearConsent();

// Listen for consent response
document.addEventListener('tc-cookie-consent-changed', function(e) {
  console.log('Consent changed:', e.detail);
  // { accepted: true/false, timestamp: "2026-05-20T..." }
});

Features

✅ Pure vanilla JavaScript — no dependencies
✅ Lightweight — ~3KB total (JS + CSS)
✅ Auto-initialization — works immediately after loading
✅ localStorage persistence — remembers user choice
✅ Mobile responsive — stacks vertically on small screens
✅ Accessible — ARIA labels for screen readers
✅ Keyboard navigation — fully keyboard accessible
✅ Dark mode support — respects prefers-color-scheme
✅ Reduced motion support — respects prefers-reduced-motion
✅ Customizable — CSS variables for easy theming
✅ Privacy policy link — optional link to privacy policy
✅ Event system — listen for consent changes
✅ Self-hosted — own it forever, no recurring fees

GDPR/CCPA Compliance

This widget helps you comply with cookie consent laws:

GDPR (EU) — Requires explicit consent before setting non-essential cookies
CCPA (California) — Requires disclosure and opt-out mechanism
ePrivacy Directive — Cookie consent required for most cookies

Best Practices

✅ Show banner on first visit before setting cookies
✅ Include link to your privacy policy
✅ Explain what cookies are used for
✅ Provide clear accept/decline options
✅ Remember user choice with localStorage
✅ Don't set non-essential cookies until consent given

Implementation Example

// Check consent before loading analytics
const consent = TradeCalcsCookieBanner.getConsent();

if (consent === true) {
  // User accepted - load analytics
  loadGoogleAnalytics();
  loadFacebookPixel();
} else if (consent === false) {
  // User declined - don't load analytics
  console.log('Analytics disabled by user choice');
} else {
  // No choice yet - wait for response
  document.addEventListener('tc-cookie-consent-changed', function(e) {
    if (e.detail.accepted) {
      loadGoogleAnalytics();
      loadFacebookPixel();
    }
  });
}

Cookie Banner Widget Demo