Cookie Consent Solution for
GDPR, LGPD & PIPEDA Compliance

Deploy a custom cookie banner, manage script blocking and record user consent across every XMS Ai project — without writing a single line of code. 

$ npm install @xms-ai/real-cookies
Real Cookies consent banner preview

Live Demo

Try it right here

Test the Real Cookies banner in different modes. Each button resets stored consent and launches a fresh banner.

🌍

Auto-detect

Detects your country via IP and shows the correct compliance banner.

🇪🇺

GDPR Mode

Full GDPR banner with Reject All, granular toggles, and compliance badge.

🇧🇷

LGPD Mode

LGPD-compliant controls for Brazilian users.

🌙

Dark Popup

Dark-themed popup positioned at the center-bottom of the screen.

🎨

Custom Brand

Orange brand color, top position, with a custom company name.

Current Consent Status

No consent recorded yet
Compliance Coverage
GDPR (EU / EEA)
UK GDPR
LGPD (Brazil)
PIPEDA (Canada)
Basic (Rest of World)

Why Real Cookies

Everything you need.
Nothing you don't.

A minimal, production-ready cookie consent solution that works in any JavaScript project without a build step.

Auto-detect jurisdiction

IP geolocation automatically selects the correct compliance mode — GDPR for EU, LGPD for Brazil, PIPEDA for Canada, or a basic notice everywhere else.

Granular category control

Toggle Necessary, Functional, Analytics, and Marketing cookies individually. Users can customize their exact preferences.

Zero dependencies

Pure vanilla JavaScript. No jQuery, React, or heavy frameworks. The minified bundle is under 30 KB.

localStorage fallback

Works perfectly without any backend. Consent is stored locally and syncs to Supabase when configured.

Google Consent Mode v2

Automatically calls gtag('consent', 'update', …) when the user makes a choice, compatible with Google's consent framework.

Fully accessible

ARIA roles, keyboard navigation, focus-visible ring styles, and semantic HTML throughout the banner.

Setup

Up and running in 3 steps

No build pipeline required. Works as an ES module, a script tag, or an npm package.

1

Install

Add the package via npm or include the CDN script tag before your closing </body>.

2

Initialize

Call CookieConsent.init() with your brand color and privacy policy URL.

3

Done

Real Cookies auto-detects the user's country and shows the right consent UI. Preferences are stored instantly.

4

React to consent

Listen for the vc:consent window event or call hasConsent('analytics') before loading tracking scripts.

Documentation

Quick Start

Copy-paste ready snippets for the most common setups.

// 1. Install
// npm install @xms-ai/real-cookies

import CookieConsent from '@xms-ai/real-cookies';

await CookieConsent.init({
  companyName:  'Acme Corp',
  primaryColor: '#1863dc',
  privacyUrl:   '/privacy',
});

// React to user decision
window.addEventListener('vc:consent', (e) => {
  if (e.detail.categories.analytics) loadGoogleAnalytics();
});
<!-- Add before </body> -->
<script src="https://cdn.jsdelivr.net/npm/@xms-ai/real-cookies/dist/cookie-consent.min.js"></script>
<script>
  CookieConsent.init({
    companyName:  'Acme Corp',
    primaryColor: '#1863dc',
    privacyUrl:   '/privacy',
  });
</script>
CookieConsent.init({
  // Branding
  companyName:     'Acme Corp',     // shown in the banner
  companyLogo:     '/logo.svg',     // replaces cookie icon
  primaryColor:    '#1863dc',      // buttons, toggles, accent bar
  theme:           'light',         // 'light' | 'dark'
  position:        'bottom',        // 'bottom' | 'top' | 'popup'

  // Legal
  privacyUrl:      '/privacy',
  cookiePolicyUrl: '/cookies',

  // Behaviour
  autoShow:        true,
  cookieExpiry:    365,            // days
  forceMode:       null,           // 'GDPR' | 'UK_GDPR' | 'LGPD' | 'PIPEDA' | 'BASIC'
});

JavaScript API

Method / Event Returns Description
CookieConsent.init(options) Promise Initialize the plugin. Must be called once.
CookieConsent.hasConsent('analytics') boolean Check if the user consented to a specific category.
CookieConsent.getConsent() object | null Returns the full consent record or null if none.
CookieConsent.openSettings() void Programmatically open the preferences panel.
CookieConsent.resetConsent() void Clear stored consent and show the banner again.
window event: 'vc:consent' — Fired after any consent action. event.detail = full record.
window event: 'vc:consent:analytics' — Per-category events. Replace analytics with any key.

Ready to add cookie consent
to your XMS Ai project?

Drop one line into any project and you're compliant — GDPR, LGPD, PIPEDA, automatically.

npm install @xms-ai/real-cookies