The Free Easy Consent Banner

Lightweight, zero-dependency, and fully compliant with Google Consent Mode v2 and DataLayer. Give your users clarity with service-based consent.

Get Started View on Codeberg

👇 Try the live demo running on this page

Why Keksly?

Built for performance, compliance, and developer happiness.

🚀

Zero Dependencies

Pure Vanilla JS. No React, Vue, or jQuery required. Just drop it in and it works.

🛡️

Google Consent Mode v2

Built-in support for Advanced Mode. Automatically maps services to GCM signals like ad_storage.

🔧

Service-Based

Users consent to specific services (e.g., "Google Analytics") rather than vague categories.

🎨

Fully Customizable

Configure colors, fonts, texts, and positions to match your brand identity perfectly.

🚫

Script Blocking

Easily block third-party scripts until consent is granted with a simple attribute change.

📱

Responsive

Designed to look and work great on all devices, from mobile phones to large desktops.

Installation

Get up and running in seconds.

Option 1: CDN (Recommended)

Add this to your <head> tag:

<script src="https://cdn.keksly.eu/1.1.0/keksly.min.js"></script>

Option 2: Self-Hosted

Download and host it yourself:

<script src="/path/to/keksly.js"></script>

Configuration

Set up window.KekslyConfig before loading the script. Define your services, design, and Google Consent Mode (GCM) mapping in one place.

Full example

<script>
  // 1) Define config before keksly.js
  window.KekslyConfig = {
    services: [
      {
        id: 'google_analytics',
        name: 'Google Analytics',
        description: 'Tracks website usage and performance.',
        required: false,
        enabled: false,
        category: ['analytics_storage']
      },
      {
        id: 'google_ads',
        name: 'Google Ads',
        description: 'Personalized advertising.',
        required: false,
        enabled: false,
        category: ['ad_storage', 'ad_user_data', 'ad_personalization']
      }
    ],
    design: {
      primaryColor: '#3b82f6',
      backgroundColor: '#ffffff',
      textColor: '#1f2937',
      fontFamily: 'system-ui, sans-serif',
      position: 'bottom', // 'bottom' or 'center'
      buttons: [
        { type: 'accept', label: 'Accept All', variant: 'primary' },
        { type: 'reject', label: 'Reject All', variant: 'secondary' },
        { type: 'settings', label: 'Customize', variant: 'text' }
      ]
    },
    gcm: {
      enabled: true
    }
  };

  // 2) Load Keksly afterwards
</script>
<script src="keksly.js"></script>

Services

Each service represents a vendor/technology a user can allow. Required services are always stored as true and cannot be toggled off.

Property	Type	Description
`id`	string	Unique identifier (e.g., `google_analytics`)
`name`	string	Display name shown to the user
`description`	string	Short explanation of what the service does
`required`	boolean	If `true`, user cannot disable this service
`enabled`	boolean	Default state (use `false` for GDPR compliance)
`category`	string[]	Google Consent Mode mapping (see supported categories below)

Supported GCM categories

ad_storage
ad_user_data
ad_personalization
analytics_storage
functionality_storage
personalization_storage
security_storage

Design

Control the look & feel. position: 'center' adds a backdrop; 'bottom' is a slim bar. The buttons array controls order and variants.

design: {
  primaryColor: '#3b82f6',      // Button & toggle color
  backgroundColor: '#ffffff',   // Banner background
  textColor: '#1f2937',         // Text color
  fontFamily: 'Inter, system-ui, -apple-system, sans-serif',
  position: 'center',           // 'bottom' | 'center'
  buttons: [
    { type: 'accept', label: 'Accept all', variant: 'primary' },
    { type: 'reject', label: 'Reject all', variant: 'secondary' },
    { type: 'settings', label: 'Customize', variant: 'text' }
  ]
}

Script blocking

To delay a script until its service is consented, change the type and add data-service. Keksly will swap it back to a normal script when allowed.

<script type="text/plain" data-service="google_analytics" src="https://www.googletagmanager.com/gtag/js?id=GA_MEASUREMENT_ID"></script>
<script type="text/plain" data-service="google_analytics">
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'GA_MEASUREMENT_ID');
</script>

Buttons reference

Define the order and style of buttons via design.buttons. Variants: primary, secondary, text.

Property	Type	Description
`type`	string	Action: `accept`, `reject`, or `settings`
`label`	string	Text to display on the button
`variant`	string	Style: `primary`, `secondary`, or `text`