{"_id":"@codevera-ai/js-cookie-consent","_rev":"3-bd1cdfea84615758ed8aff946d07b3aa","name":"@codevera-ai/js-cookie-consent","dist-tags":{"latest":"1.0.1"},"versions":{"1.0.0":{"name":"@codevera-ai/js-cookie-consent","version":"1.0.0","keywords":["cookie","consent","gdpr","ccpa","privacy","cookies","vanilla-js","javascript","banner","cookie-banner","cookie-consent","cookie-notice"],"author":{"url":"https://billymedia.co.uk","name":"Billy Patel","email":"billy@billymedia.co.uk"},"license":"MIT","_id":"@codevera-ai/js-cookie-consent@1.0.0","maintainers":[{"name":"codevera","email":"info@codevera.ai"}],"homepage":"https://github.com/codevera-ai/js-cookie-consent#readme","bugs":{"url":"https://github.com/codevera-ai/js-cookie-consent/issues"},"dist":{"shasum":"fb06ab3541bc7f6389f7042e52b5e1290954d6f8","tarball":"https://registry.npmjs.org/@codevera-ai/js-cookie-consent/-/js-cookie-consent-1.0.0.tgz","fileCount":21,"integrity":"sha512-SgrqtLmb6xQ4umjmJxBXODEENSBrxTVp6e5UtsHzS1IS1kjzU1O11XoQqHM7BymXKZxgwWaf+IOey0Ct2LUPyw==","signatures":[{"sig":"MEUCIQCFhoxId/rXeAAgXWVKaG1uYxCzw98yFku5tu7ojj/E7gIgLZOxRCS6fsvbiC1GlCaF8oXv43+m+5qzblQoNA13Wsc=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":84366},"main":"src/cookie-consent.js","style":"src/cookie-consent.css","gitHead":"98c9c65990544e4d09237ba3c9a40e7b56c8320b","scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"node build.js"},"_npmUser":{"name":"codevera","email":"info@codevera.ai"},"repository":{"url":"git+https://github.com/codevera-ai/js-cookie-consent.git","type":"git"},"_npmVersion":"10.9.0","description":"A lightweight, customisable vanilla JavaScript library for managing cookie consent","directories":{},"_nodeVersion":"23.3.0","_hasShrinkwrap":false,"devDependencies":{"terser":"^5.44.1","clean-css-cli":"^5.6.3"},"_npmOperationalInternal":{"tmp":"tmp/js-cookie-consent_1.0.0_1763141754976_0.02047726426206098","host":"s3://npm-registry-packages-npm-production"},"deprecated":"This package has been renamed to @codevera-ai/cookie-consent-manager. Please update your dependencies."},"1.0.1":{"name":"@codevera-ai/js-cookie-consent","version":"1.0.1","keywords":["cookie","consent","gdpr","ccpa","privacy","cookies","vanilla-js","javascript","banner","cookie-banner","cookie-consent","cookie-notice"],"author":{"url":"https://billymedia.co.uk","name":"Billy Patel","email":"billy@billymedia.co.uk"},"license":"MIT","_id":"@codevera-ai/js-cookie-consent@1.0.1","maintainers":[{"name":"codevera","email":"info@codevera.ai"}],"homepage":"https://github.com/codevera-ai/js-cookie-consent#readme","bugs":{"url":"https://github.com/codevera-ai/js-cookie-consent/issues"},"dist":{"shasum":"6ad92ce1c7af4ac815e1e26ce78939e95d97f167","tarball":"https://registry.npmjs.org/@codevera-ai/js-cookie-consent/-/js-cookie-consent-1.0.1.tgz","fileCount":21,"integrity":"sha512-9f2ZMLzodlSbxQYDIUR6flkpdRzHHY69tFjT0bLJ9SpW22/L8cC/2dCJG3RCy4rUwKzFOpybDb0JM979aQwDeg==","signatures":[{"sig":"MEUCIFXxw8+9kci33GjysRdMJ5AfhGjA98um52KO8qRQDLH/AiEA9VOgKbxe1UCpajAqzbXTpjz8BqWCHe3FU12oHOuKmsY=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":94466},"main":"src/cookie-consent.js","style":"src/cookie-consent.css","gitHead":"d57235d9aae3f701afc37e056ad245ea751726d7","scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"node build.js"},"_npmUser":{"name":"codevera","email":"info@codevera.ai"},"repository":{"url":"git+https://github.com/codevera-ai/js-cookie-consent.git","type":"git"},"_npmVersion":"10.9.0","description":"A lightweight, customisable vanilla JavaScript library for managing cookie consent","directories":{},"_nodeVersion":"23.3.0","_hasShrinkwrap":false,"devDependencies":{"terser":"^5.44.1","clean-css-cli":"^5.6.3"},"_npmOperationalInternal":{"tmp":"tmp/js-cookie-consent_1.0.1_1763142275059_0.46971710512261855","host":"s3://npm-registry-packages-npm-production"},"deprecated":"This package has been renamed to @codevera-ai/cookie-consent-manager. Please update your dependencies."}},"time":{"created":"2025-11-14T17:35:54.821Z","modified":"2025-11-14T18:34:23.115Z","1.0.0":"2025-11-14T17:35:55.188Z","1.0.1":"2025-11-14T17:44:35.269Z"},"bugs":{"url":"https://github.com/codevera-ai/js-cookie-consent/issues"},"author":{"url":"https://billymedia.co.uk","name":"Billy Patel","email":"billy@billymedia.co.uk"},"license":"MIT","homepage":"https://github.com/codevera-ai/js-cookie-consent#readme","keywords":["cookie","consent","gdpr","ccpa","privacy","cookies","vanilla-js","javascript","banner","cookie-banner","cookie-consent","cookie-notice"],"repository":{"url":"git+https://github.com/codevera-ai/js-cookie-consent.git","type":"git"},"description":"A lightweight, customisable vanilla JavaScript library for managing cookie consent","maintainers":[{"name":"codevera","email":"info@codevera.ai"}],"readme":"# Cookie Consent Library\n\nA lightweight, customisable vanilla JavaScript library for managing cookie consent. This library handles all the consent logic whilst giving you complete control over the design and appearance of your cookie banner.\n\n## Why this library is different\n\nUnlike other cookie consent libraries that force you into a specific design, this library gives you **100% control over the appearance** of your cookie banner. We only provide the functionality - you design the interface.\n\n**What this library does:**\n- Manages cookie consent state\n- Handles user accept/reject actions\n- Stores consent preferences\n- Provides event-driven architecture\n- Shows/hides your banner based on consent status\n- Displays cookies when requested\n\n**What this library doesn't do:**\n- Force any specific design or styling on you\n- Include pre-built CSS themes (though we provide examples)\n- Limit your creative freedom\n\nYou build your banner exactly how you want it to look. We handle everything else.\n\n## Features\n\n- Fully customisable design and styling\n- Flexible positioning options (top, bottom, centre, left, right)\n- Multiple animation styles (slide, fade, scale)\n- Support for cookie categories (necessary, analytics, marketing, etc.)\n- No dependencies\n- Lightweight (11.9KB minified, ~4.5KB gzipped)\n- Event-driven architecture\n- Responsive and mobile-friendly\n- Built with GDPR and CCPA compliance in mind\n\n## Installation\n\n### Via npm\n\n```bash\nnpm install @codevera-ai/js-cookie-consent\n```\n\n### Via CDN\n\n**Minified (recommended for production):**\n```html\n<link rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/npm/@codevera-ai/js-cookie-consent@1.0.0/dist/cookie-consent.min.css\">\n<script src=\"https://cdn.jsdelivr.net/npm/@codevera-ai/js-cookie-consent@1.0.0/dist/cookie-consent.min.js\"></script>\n```\n\n**Unminified (for development):**\n```html\n<link rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/npm/@codevera-ai/js-cookie-consent/src/cookie-consent.css\">\n<script src=\"https://cdn.jsdelivr.net/npm/@codevera-ai/js-cookie-consent/src/cookie-consent.js\"></script>\n```\n\n### Manual installation\n\nDownload or clone the repository and include the files in your HTML:\n\n```html\n<link rel=\"stylesheet\" href=\"path/to/cookie-consent.css\">\n<script src=\"path/to/cookie-consent.js\"></script>\n```\n\n## Quick start\n\nCreate your cookie consent banner HTML with the required data attributes and classes:\n\n```html\n<div data-cookie-consent data-position=\"bottom-center\" data-animation=\"slide\" data-width=\"full\">\n    <div>\n        <h2>We use cookies</h2>\n        <p>We use cookies to improve your experience on our site.</p>\n    </div>\n\n    <div>\n        <button class=\"js-cookie-accept\">Accept all</button>\n        <button class=\"js-cookie-reject\">Reject all</button>\n    </div>\n</div>\n```\n\nThe library will automatically initialise when the page loads if it finds an element with the `data-cookie-consent` attribute.\n\n## Configuration\n\n### Data attributes\n\nConfigure your cookie banner using data attributes on the container element:\n\n#### `data-cookie-consent` (required)\n\nIdentifies the container as a cookie consent banner.\n\n```html\n<div data-cookie-consent>\n    <!-- Your banner content -->\n</div>\n```\n\n#### `data-position`\n\nControls where the banner appears on the screen.\n\n**Options:**\n- `top-left`\n- `top-center`\n- `top-right`\n- `bottom-left`\n- `bottom-center` (default)\n- `bottom-right`\n- `center`\n\n```html\n<div data-cookie-consent data-position=\"bottom-right\">\n    <!-- Your banner content -->\n</div>\n```\n\n#### `data-animation`\n\nControls how the banner appears and disappears.\n\n**Options:**\n- `slide` (default)\n- `fade`\n- `scale`\n\n```html\n<div data-cookie-consent data-animation=\"fade\">\n    <!-- Your banner content -->\n</div>\n```\n\n#### `data-width`\n\nControls the width of the banner.\n\n**Options:**\n- `full` (default) - 100% width\n- `half` - 50% width\n- `third` - 33.333% width\n- `quarter` - 25% width\n- `auto` - Content-based width\n\n```html\n<div data-cookie-consent data-width=\"half\">\n    <!-- Your banner content -->\n</div>\n```\n\n### Button classes\n\nAdd these classes to buttons within your banner to handle user actions:\n\n#### `js-cookie-accept`\n\nAccepts cookies and saves consent.\n\n```html\n<button class=\"js-cookie-accept\">Accept all cookies</button>\n```\n\n#### `js-cookie-reject`\n\nRejects optional cookies (keeps only necessary cookies).\n\n```html\n<button class=\"js-cookie-reject\">Reject optional cookies</button>\n```\n\n#### `js-cookie-close`\n\nSimply closes the banner without saving consent.\n\n```html\n<button class=\"js-cookie-close\">Close</button>\n```\n\n#### `js-cookie-show-settings`\n\nShows the cookie banner again (use anywhere on your page).\n\n```html\n<button class=\"js-cookie-show-settings\">Cookie settings</button>\n```\n\n#### `js-cookie-view-cookies`\n\nView all cookies currently set on the site. Shows a default modal with all cookies, and also triggers an event with cookie data for custom implementations.\n\n```html\n<button class=\"js-cookie-view-cookies\">View cookies</button>\n```\n\n#### `js-cookies-inline`\n\nDisplay cookies inline on the page. Place this class on any container element and it will automatically populate with all cookies on page load.\n\n```html\n<div class=\"js-cookies-inline\"></div>\n```\n\nThe library includes default styling for the inline display, but you can override it with your own CSS by targeting these classes:\n- `.cookie-consent-inline` - Container\n- `.cookie-consent-inline-list` - List element\n- `.cookie-consent-inline-item` - Each cookie item\n- `.cookie-consent-inline-name` - Cookie name\n- `.cookie-consent-inline-value` - Cookie value\n- `.cookie-consent-inline-empty` - Empty state message\n\n### Category checkboxes\n\nAllow users to choose specific cookie categories by adding checkboxes with the `js-cookie-category` class:\n\n```html\n<div>\n    <input type=\"checkbox\" id=\"necessary\" class=\"js-cookie-category\" value=\"necessary\" checked disabled>\n    <label for=\"necessary\">Necessary cookies</label>\n</div>\n\n<div>\n    <input type=\"checkbox\" id=\"analytics\" class=\"js-cookie-category\" value=\"analytics\">\n    <label for=\"analytics\">Analytics cookies</label>\n</div>\n\n<div>\n    <input type=\"checkbox\" id=\"marketing\" class=\"js-cookie-category\" value=\"marketing\">\n    <label for=\"marketing\">Marketing cookies</label>\n</div>\n```\n\n## JavaScript API\n\n### Initialisation\n\nThe library automatically initialises, but you can manually initialise or re-initialise with custom options:\n\n```javascript\nCookieConsent.init({\n    cookieName: 'cookie_consent',        // Cookie name (default: 'cookie_consent')\n    cookieExpiry: 365,                   // Cookie expiry in days (default: 365)\n    containerSelector: '[data-cookie-consent]',  // Container selector\n    acceptClass: 'js-cookie-accept',     // Accept button class\n    rejectClass: 'js-cookie-reject',     // Reject button class\n    closeClass: 'js-cookie-close',       // Close button class\n    showSettingsClass: 'js-cookie-show-settings',  // Show settings button class\n    categoryCheckboxClass: 'js-cookie-category'    // Category checkbox class\n});\n```\n\n### Methods\n\n#### `CookieConsent.getConsent()`\n\nReturns the current consent status as an object:\n\n```javascript\nconst consent = CookieConsent.getConsent();\nconsole.log(consent);\n// Returns: { accepted: true, categories: ['necessary', 'analytics'], timestamp: '2024-01-15T10:30:00.000Z' }\n```\n\n#### `CookieConsent.hasConsent(category)`\n\nCheck if consent has been given for a specific category:\n\n```javascript\nif (CookieConsent.hasConsent('analytics')) {\n    // Load analytics scripts\n}\n```\n\n#### `CookieConsent.revoke()`\n\nRevoke consent and show the banner again:\n\n```javascript\nCookieConsent.revoke();\n```\n\n#### `CookieConsent.viewCookies()`\n\nGet all cookies currently set on the site. This method displays a default modal showing all cookies and returns the cookie data:\n\n```javascript\nconst cookies = CookieConsent.viewCookies();\nconsole.log(cookies);\n// Returns: [{ name: 'cookie_name', value: 'cookie_value' }, ...]\n```\n\nThe default modal is automatically displayed, but you can still listen to the event to implement your own custom display (see events section below).\n\n#### `CookieConsent.show()`\n\nManually show the banner:\n\n```javascript\nCookieConsent.show();\n```\n\n#### `CookieConsent.hide()`\n\nManually hide the banner:\n\n```javascript\nCookieConsent.hide();\n```\n\n### Events\n\nThe library dispatches custom events that you can listen for:\n\n#### `cookieConsent:consent-given`\n\nFired when user accepts cookies:\n\n```javascript\ndocument.addEventListener('cookieConsent:consent-given', function(event) {\n    console.log('Consent given:', event.detail);\n    // Load tracking scripts, analytics, etc.\n});\n```\n\n#### `cookieConsent:consent-rejected`\n\nFired when user rejects optional cookies:\n\n```javascript\ndocument.addEventListener('cookieConsent:consent-rejected', function(event) {\n    console.log('Consent rejected:', event.detail);\n    // Remove tracking scripts\n});\n```\n\n#### `cookieConsent:consent-revoked`\n\nFired when consent is revoked:\n\n```javascript\ndocument.addEventListener('cookieConsent:consent-revoked', function() {\n    console.log('Consent revoked');\n    // Clean up cookies and tracking\n});\n```\n\n#### `cookieConsent:banner-shown`\n\nFired when the banner is displayed:\n\n```javascript\ndocument.addEventListener('cookieConsent:banner-shown', function() {\n    console.log('Banner shown');\n});\n```\n\n#### `cookieConsent:banner-hidden`\n\nFired when the banner is hidden:\n\n```javascript\ndocument.addEventListener('cookieConsent:banner-hidden', function() {\n    console.log('Banner hidden');\n});\n```\n\n#### `cookieConsent:cookies-viewed`\n\nFired when the view cookies button is clicked. The library displays a default modal automatically, but you can listen to this event to implement your own custom display:\n\n```javascript\ndocument.addEventListener('cookieConsent:cookies-viewed', function(event) {\n    console.log('All cookies:', event.detail.cookies);\n    // Optionally implement your own custom cookie display\n    // The default modal will still be shown unless you prevent it\n});\n```\n\n## Examples\n\nThis library includes six examples that you can use as-is or customise:\n\n### 1. Skeleton (bare bones)\n\nLocated in `examples/skeleton/` - provides the basic HTML structure with no styling. Perfect as a starting point for custom designs.\n\n### 2. Professional\n\nLocated in `examples/professional/` - clean, modern, minimal design suitable for most websites.\n\n### 3. Corporate\n\nLocated in `examples/corporate/` - formal, trustworthy, traditional design for corporate websites.\n\n### 4. Friendly\n\nLocated in `examples/friendly/` - warm, approachable, playful design for creative brands.\n\n### 5. Dark mode\n\nLocated in `examples/dark/` - sleek modern dark theme.\n\n### 6. Minimal\n\nLocated in `examples/minimal/` - ultra-minimal, no-frills design for maximum simplicity.\n\nEach example includes a complete HTML file and CSS stylesheet. View the `examples/` directory for full code.\n\n## Responsive design\n\nAll examples are fully responsive and mobile-friendly. The library automatically handles touch events and adapts layouts for smaller screens.\n\n## Browser support\n\n- Chrome (latest)\n- Firefox (latest)\n- Safari (latest)\n- Edge (latest)\n- Opera (latest)\n- Mobile browsers (iOS Safari, Chrome Android)\n\n## Best practices\n\n### Loading scripts conditionally\n\nUse the consent events to load third-party scripts only after consent is given:\n\n```javascript\ndocument.addEventListener('cookieConsent:consent-given', function(event) {\n    const consent = event.detail;\n\n    if (consent.categories.includes('analytics')) {\n        // Load Google Analytics\n        (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){\n        (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),\n        m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)\n        })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');\n\n        ga('create', 'UA-XXXXX-Y', 'auto');\n        ga('send', 'pageview');\n    }\n\n    if (consent.categories.includes('marketing')) {\n        // Load marketing pixels\n    }\n});\n```\n\n### Checking consent on page load\n\nCheck existing consent when the page loads:\n\n```javascript\nwindow.addEventListener('DOMContentLoaded', function() {\n    const consent = CookieConsent.getConsent();\n\n    if (consent && consent.accepted) {\n        // User has already consented\n        if (consent.categories.includes('analytics')) {\n            // Load analytics\n        }\n    }\n});\n```\n\n### Providing a settings link\n\nAlways provide a way for users to change their consent preferences:\n\n```html\n<footer>\n    <button class=\"js-cookie-show-settings\">Cookie preferences</button>\n</footer>\n```\n\n## Customisation\n\n### Custom styling\n\nThe library only applies positioning and animation styles. All visual styling is up to you. Create your own CSS file:\n\n```css\n[data-cookie-consent] {\n    background: #ffffff;\n    border: 1px solid #e5e7eb;\n    padding: 2rem;\n    border-radius: 0.5rem;\n    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);\n}\n\n/* Style your buttons */\n.js-cookie-accept {\n    background: #3b82f6;\n    color: #ffffff;\n    padding: 0.5rem 1rem;\n    border: none;\n    border-radius: 0.25rem;\n    cursor: pointer;\n}\n```\n\n### Custom animations\n\nOverride the default animations in your CSS:\n\n```css\n[data-cookie-consent][data-animation=\"custom\"] {\n    opacity: 0;\n    transform: rotate(0deg);\n    transition: all 0.5s ease;\n}\n\n[data-cookie-consent][data-animation=\"custom\"].is-visible {\n    opacity: 1;\n    transform: rotate(360deg);\n}\n```\n\nThen use it in your HTML:\n\n```html\n<div data-cookie-consent data-animation=\"custom\">\n    <!-- Your banner content -->\n</div>\n```\n\n## Accessibility\n\nThe library is built with accessibility in mind:\n\n- All interactive elements are keyboard accessible\n- Proper ARIA attributes should be added to your HTML\n- Focus management is handled automatically\n- Screen reader friendly\n\n### Recommended ARIA attributes\n\n```html\n<div data-cookie-consent role=\"dialog\" aria-labelledby=\"cookie-title\" aria-describedby=\"cookie-description\">\n    <h2 id=\"cookie-title\">Cookie preferences</h2>\n    <p id=\"cookie-description\">We use cookies to improve your experience.</p>\n\n    <button class=\"js-cookie-accept\" aria-label=\"Accept all cookies\">Accept all</button>\n    <button class=\"js-cookie-reject\" aria-label=\"Reject optional cookies\">Reject</button>\n</div>\n```\n\n## GDPR compliance\n\nThis library helps you comply with GDPR and other privacy regulations:\n\n- Cookie consent is obtained before setting non-necessary cookies\n- Users can accept, reject, or customise their cookie preferences\n- Consent choices are stored and can be retrieved\n- Users can revoke consent at any time\n- Clear information about cookie categories\n\nRemember: this library handles the technical implementation, but you are responsible for:\n\n- Writing clear, accurate cookie policy information\n- Only loading tracking scripts after consent is obtained\n- Respecting user choices\n- Providing accessible privacy information\n\n## Licence\n\nMIT Licence\n\nCopyright (c) 2024\n\nPermission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the \"Software\"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicence, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.\n\n## Support\n\nFor issues, questions, or contributions, please visit the GitHub repository.\n\n## Contributing\n\nContributions are welcome. Please follow these guidelines:\n\n1. Fork the repository\n2. Create a feature branch\n3. Make your changes\n4. Write or update tests if applicable\n5. Submit a pull request\n\n## Changelog\n\n### Version 1.0.0\n\n- Initial release\n- Core consent management functionality\n- Flexible positioning and animations\n- Cookie category support\n- Event-driven architecture\n- Six example implementations\n- Comprehensive documentation\n","readmeFilename":"README.md"}