→ Elara
→ Cookie Preferences Banner for Websites

Cookie Preferences Banner for Websites

A non-intrusive cookie preferences banner that appears at the bottom-left corner of your website, allowing users to accept, customize, or reject cookies while maintaining GDPR compliance.

This Example is contributed by Elara, on 20-Mar-2025. It is responsive.

Cookie consent Toggle GDPR Privacy

Author Elara

Fork Fullscreen

<div id="cookie-banner" class="cookie-banner">
  <div class="cookie-content">
    <div class="cookie-header">
      <h4>Cookie Preferences</h4>
      <button id="close-cookie-banner" class="close-btn">&times;</button>
    </div>
    <p>We use cookies to enhance your browsing experience, serve personalized ads or content, and analyze our traffic. By clicking "Accept All", you consent to our use of cookies.</p>
    <div class="cookie-buttons">
      <button id="accept-all" class="cookie-btn primary-btn">Accept All</button>
      <button id="customize" class="cookie-btn secondary-btn">Customize</button>
      <button id="reject-all" class="cookie-btn tertiary-btn">Reject All</button>
    </div>
  </div>
  <div id="cookie-settings" class="cookie-settings hidden">
    <div class="cookie-option">
      <div>
        <h5>Necessary Cookies</h5>
        <p>Required for the website to function properly.</p>
      </div>
      <label class="switch">
        <input type="checkbox" checked disabled>
        <span class="slider round"></span>
      </label>
    </div>
    <div class="cookie-option">
      <div>
        <h5>Analytics Cookies</h5>
        <p>Help us improve our website by collecting anonymous information.</p>
      </div>
      <label class="switch">
        <input type="checkbox" id="analytics-cookies">
        <span class="slider round"></span>
      </label>
    </div>
    <div class="cookie-option">
      <div>
        <h5>Marketing Cookies</h5>
        <p>Used to track visitors across websites to display relevant advertisements.</p>
      </div>
      <label class="switch">
        <input type="checkbox" id="marketing-cookies">
        <span class="slider round"></span>
      </label>
    </div>
    <button id="save-preferences" class="cookie-btn primary-btn save-btn">Save Preferences</button>
  </div>
</div>

Related Examples

Cookie Consent Banner with Preference Controls
A responsive cookie policy alert that notifies users about tracking technologies while providing easy options to accept, decline, or customize cookie preferences.

Author:
Sushil shahu

1 month ago
Cookie Consent Notification Banner
A sleek, user-friendly cookie consent notification that helps websites comply with privacy regulations while maintaining a positive user experience.

Author:
Emily Thompson

1 month ago
Sticky Cookie Consent Notification
A responsive cookie consent banner that appears at the bottom of the screen to inform users about cookie usage and obtain their consent in compliance with privacy regulations.

Author:
Sushil shahu

1 month ago
User-Friendly Cookie Notification Card with Accept/Decline Controls
GDPR-compliant cookie consent modal with intuitive user controls. Perfect for websites needing to implement cookie consent in a user-friendly, non-intrusive way.

Author:
Mert Yılmaz

1 month ago
Cookie Consent Notification Bar
A lightweight cookie consent notification bar positioned at the bottom center of the screen, allowing users to accept or decline cookie usage.

Author:
Anonymous

1 month ago
Privacy Policy Page Template

Author:
Anonymous

2 months ago
Privacy Policy Component with Accordion Sections

Author:
Anonymous

1 month ago
Call to Action Section

Author:
Anonymous

2 months ago
Product Feature Showcase Cards
Clean, interactive product feature cards that highlight your product's key benefits with smooth hover animations and responsive design.

Author:
Julian Parker

1 month ago
Responsive Collapsible Sidebar Navigation
A clean, responsive sidebar navigation component with toggle functionality for modern web applications and dashboards.

Author:
Julian Parker

1 month ago
Interactive Tag Cloud with Hover Effects

Author:
Anonymous

1 month ago
Footer with App Download Buttons and Branding
A professional website footer featuring app download buttons, brand logo, sitemap links, and social media connections for enhanced user engagement.

Author:
Janna Pineda

1 month ago

Didn't find component you were looking for?

Search from 500+ components