How to Build a Responsive and Modern Cookie Consent in 2025

Apr

How to Build a Responsive and Modern Cookie Consent in 2025

04/30/2025 12:00 AM by Admin in Html

In 2025, website privacy and user consent remain critical due to evolving regulations like GDPR, CCPA, and emerging global privacy laws. A cookie consent popup is no longer just a legal checkbox—it’s an integral part of user experience (UX). A modern cookie consent must be responsive, visually appealing, compliant, and easy to implement.

This comprehensive guide will walk you through building a responsive and modern cookie consent bar for 2025. We’ll cover design principles, legal requirements, step-by-step coding with HTML, CSS, and JavaScript, and free AI tools to streamline the process. Plus, we’ll include a live preview and links to resources to ensure your implementation is both functional and future-proof.

Why Cookie Consent Matters in 2025

Cookies are essential for tracking user behavior, personalizing content, and running analytics. However, privacy laws require websites to obtain explicit user consent before setting non-essential cookies. Non-compliance can lead to hefty fines (e.g., GDPR penalties up to €20 million or 4% of annual revenue).

A modern cookie consent bar should:

Be responsive for mobile and desktop devices.
Use clear language to explain cookie usage.
Be visually appealing to align with your website’s design.
Store user preferences securely and respect their choices.

Step-by-Step Guide to Building a Cookie Consent Bar

Step 1: Understand Legal Requirements

Before coding, familiarize yourself with key regulations:

GDPR (EU): Requires explicit consent for non-essential cookies and a clear privacy policy.
CCPA (California): Mandates an opt-out option for data sales.
ePrivacy Directive: Governs cookie usage in the EU, requiring informed consent.

Tip: Use free AI tools like Termly’s Consent Management Platform to generate compliant cookie policies tailored to your region.

Step 2: Design Principles for a Modern Cookie Consent

A modern cookie consent bar should follow these UX principles:

Minimalist Design: Avoid clutter; use clean fonts and neutral colors.
Mobile-Friendly: Ensure the bar scales well on small screens.
Accessibility: Support screen readers and keyboard navigation (WCAG 2.1 compliance).
Non-Intrusive: Use a slim bar that doesn’t obstruct the main content.

Example Preview: Here’s what a modern cookie consent bar might look like:

Step 3: Build the Cookie Consent Bar

Below is a complete example using HTML, CSS, and JavaScript to create a responsive, modern cookie consent bar.

HTML Structure

Here’s the HTML for the cookie consent bar. You’ll add this <div> to your webpage later.

<div id="cookie-consent" class="cookie-consent hidden">
<div class="cookie-content">

<p>We use cookies to enhance your experience. By continuing to visit this site you agree to our use of cookies. <a href="/privacy-policy" target="_blank">More Info</a></p>

<button id="accept-cookies">Got It!</button>
</div>
</div>

CSS Styling

Style the bar to be slim, responsive, and modern, with a dark background and an orange button.

/* styles.css */

/* Main container for the cookie consent bar */
.cookie-consent {
position: fixed; /* Fixes the bar at the bottom of the screen */
bottom: 0;
left: 0;
right: 0;
background: #212121; /* Dark background color */
color: #fff; /* White text color */
padding: 10px 20px; /* Padding for spacing */
z-index: 1000; /* Ensures the bar appears above other content */
font-family: 'Arial', sans-serif; /* Font for readability */
box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.2); /* Subtle shadow for depth */
}

/* Inner container to align content */
.cookie-content {
display: flex; /* Flexbox for layout */
justify-content: space-between; /* Space between text and button */
align-items: center; /* Center items vertically */
max-width: 1200px; /* Max width for larger screens */
margin: 0 auto; /* Center the content */
}

/* Styling for the paragraph text */
.cookie-content p {
margin: 0; /* Remove default margin */
font-size: 0.9rem; /* Slightly smaller text */
}

/* Styling for the "More Info" link */
.cookie-content a {
color: #fff; /* White link color */
text-decoration: underline; /* Underline for visibility */
margin-left: 5px; /* Space after the text */
}

/* Hover effect for the link */
.cookie-content a:hover {
color: #ddd; /* Slightly lighter on hover */
}

/* Styling for the "Got It!" button */
button#accept-cookies {
background: #FF5733; /* Orange background */
color: #fff; /* White text */
border: none; /* No border */
border-radius: 5px; /* Rounded corners */
padding: 8px 20px; /* Padding for size */
font-size: 0.8rem; /* Smaller font size */
cursor: pointer; /* Pointer cursor on hover */
transition: background 0.3s; /* Smooth background color transition */
}

/* Hover effect for the button */
button#accept-cookies:hover {
background: #e64a19; /* Darker orange on hover */
}

/* Class to hide the bar after acceptance */
.hidden {
display: none; /* Hides the element */
}

/* Responsive design for smaller screens */
@media (max-width: 600px) {
.cookie-content {
flex-direction: column; /* Stack items vertically */
gap: 10px; /* Space between items */
text-align: center; /* Center text */
}

.cookie-content p {
font-size: 0.85rem; /* Even smaller text on mobile */
}

button#accept-cookies {
padding: 6px 15px; /* Smaller padding on mobile */
font-size: 0.85rem; /* Slightly larger font for readability */
}
}

/* Code By SeoToolAudit.Com */

JavaScript Logic

Add functionality to show/hide the bar and store user consent.

// script.js

// Wait for the page to fully load before running the script
document.addEventListener('DOMContentLoaded', () => {
// Get references to the cookie consent bar and button
const cookieConsent = document.getElementById('cookie-consent');
const acceptCookiesBtn = document.getElementById('accept-cookies');

// Check if the user has already accepted cookies
if (!localStorage.getItem('cookie-consent')) {
cookieConsent.classList.remove('hidden'); // Show the bar if no consent is found
}

// Add click event listener to the "Got It!" button
acceptCookiesBtn.addEventListener('click', () => {
// Save user consent in localStorage
localStorage.setItem('cookie-consent', JSON.stringify({
essential: true,
analytics: true,
marketing: true
}));
// Hide the bar after acceptance
cookieConsent.classList.add('hidden');
});
});

// Code By SeoToolAudit.Com

Customizing the Cookie Consent Bar

You can easily customize the cookie consent bar to match your website’s design or to link to your privacy policy. Here’s how:

Change the Background Color of the Bar

The bar’s background color is currently a dark gray (#212121). To change it:

Open styles.css.
Find the .cookie-consent class.
Change the background property to a new color. For example, to make it a soft blue:

.cookie-consent {
background: #4a90e2; /* Soft blue */
}

- You can use any color format:
  - Hex code: #4a90e2 (soft blue)
  - RGB: rgb(74, 144, 226)
  - Color name: blue
- If you’re unsure about colors, use a color picker tool like Coolors to find a color that matches your website.

Change the Button Color

The “Got It!” button is currently orange (#FF5733). To change it to another color, like a modern green:

Open styles.css.
Find the button#accept-cookies class.
Change the background property. For example:

button#accept-cookies {
background: #28a745; /* Modern green */
}
button#accept-cookies:hover {
background: #218838; /* Slightly darker green on hover */
}

Update the Privacy Policy Link

The bar includes a "More Info" link that points to /privacy-policy. To link to your actual privacy policy page:

Open your webpage’s HTML file (e.g., index.html).
Find the <a> tag inside the cookie consent <div>:

<a href="/privacy-policy" target="_blank">More Info</a>

3.Update the href attribute to your privacy policy URL. For example, if your policy is at https://yourwebsite.com/privacy:

<a href="https://yourwebsite.com/privacy" target="_blank">More Info</a>

4. Optionally, change the link text to be more descriptive, like “Privacy Policy”:

<a href="https://yourwebsite.com/privacy" target="_blank">Privacy Policy</a>

- The target="_blank" attribute ensures the link opens in a new tab, so users don’t leave your site.

Step 4: Test for Responsiveness and Accessibility

Responsiveness: Test the bar on mobile and desktop using browser developer tools.
Accessibility: Use tools like WAVE to ensure WCAG compliance.
Functionality: Verify that user preferences are saved in localStorage and respected on subsequent visits.

Step 5: Free AI Tools for Cookie Consent

Leverage these free tools to simplify implementation:

Cookiebot: Generates customizable cookie banners with GDPR/CCPA compliance.
Termly: Offers free cookie policy generators and consent management tools.
Osano: Provides open-source cookie consent solutions.
Google Tag Manager: Integrate cookie consent with analytics tags.

Step 6: Preview Your Cookie Consent

To preview the above code:

Save the HTML, CSS, and JavaScript in separate files (index.html, styles.css, script.js).
Host locally using a tool like Live Server or deploy to a free platform like Netlify.
Test the bar by opening the page in a browser.

Live Preview Behavior:

The bar appears at the bottom on first visit.
Clicking “Got It!” hides the bar and saves the user’s consent.
The bar reappears if localStorage is cleared.

How to Integrate the Cookie Consent Bar into Your Website

Integrating the cookie consent bar into your website is straightforward. Below, I’ll walk you through adding the <div>, styles.css, and script.js to a sample webpage, step-by-step, with a concrete example. This guide is designed for beginners, so you’ll know exactly where to place each piece of code.

Step 1: Create Your Webpage Model

Let’s start with a simple webpage (index.html) that you want to add the cookie consent bar to. Here’s the sample webpage before adding the cookie consent:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Website</title>
</head>
<body>
<h1>Welcome to My Website</h1>
<p>This is a simple webpage where we’ll add the cookie consent bar.</p>
</body>
</html>

Step 2: Add the Cookie Consent <div>

Take the <div> from the HTML Structure section above and place it just before the closing </body> tag in your index.html. This ensures the bar appears at the bottom of your page and doesn’t interfere with other content.

Here’s how your index.html looks after adding the <div>:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Website</title>
</head>
<body>
<h1>Welcome to My Website</h1>
<p>This is a simple webpage where we’ll add the cookie consent bar.</p>


<div id="cookie-consent" class="cookie-consent hidden">
<div class="cookie-content">
<p>We use cookies to enhance your experience. By continuing to visit this site you agree to our use of cookies. <a href="/privacy-policy" target="_blank">More Info</a></p>
<button id="accept-cookies">Got It!</button>
</div>
</div>
</body>
</html>

Step 3: Add the CSS File

Create a new file named styles.css in the same folder as your index.html.
Copy the CSS from the CSS Styling section above and paste it into styles.css.
Link the styles.css file in the <head> section of your index.html by adding this line: <link rel="stylesheet" href="styles.css">.

Here’s your updated index_ADVANCED HTML Structure with Comments To demonstrate the integration, here’s the full index.html` with comments explaining each step:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Website</title>

<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Welcome to My Website</h1>
<p>This is a simple webpage where we’ll add the cookie consent bar.</p>



<div id="cookie-consent" class="cookie-consent hidden">
<div class="cookie-content">

<p>We use cookies to enhance your experience. By continuing to visit this site you agree to our use of cookies. <a href="/privacy-policy" target="_blank">More Info</a></p>

<button id="accept-cookies">Got It!</button>
</div>
</div>



<script src="script.js"></script>
</body>
</html>

Step 4: Add the JavaScript File

Create a new file named script.js in the same folder as your index.html.
Copy the JavaScript from the JavaScript Logic section above and paste it into script.js.
Add a <script> tag to load script.js just after the cookie consent <div>, before the closing </body> tag in your index.html.

Here’s your updated index.html with the JavaScript included:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Website</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Welcome to My Website</h1>
<p>This is a simple webpage where we’ll add the cookie consent bar.</p>

<div id="cookie-consent" class="cookie-consent hidden">
<div class="cookie-content">
<p>We use cookies to enhance your experience. By continuing to visit this site you agree to our use of cookies. <a href="/privacy-policy" target="_blank">More Info</a></p>
<button id="accept-cookies">Got It!</button>
</div>
</div>

<script src="script.js"></script>
</body>
</html>

Step 5: Verify Your Files

At this point, you should have three files in your project folder:

index.html (your webpage with the cookie consent <div> and links to CSS/JS).
styles.css (contains the CSS styling for the cookie consent bar).
script.js (contains the JavaScript logic to show/hide the bar).

Step 6: Test the Integration

Open index.html in a web browser (e.g., double-click the file, or use a local server like Live Server).
The cookie consent bar should appear at the bottom of the page.
Click “Got It!” to hide the bar. Refresh the page to confirm it doesn’t reappear (since the consent is saved in localStorage).
To test again, open your browser’s developer tools (usually F12), go to the “Application” tab, find localStorage, and clear the cookie-consent entry.

Integration for WordPress

If you’re using WordPress, you can integrate the cookie consent bar without a plugin by editing your theme files:

Add the HTML:
- Go to Appearance > Theme File Editor in your WordPress dashboard.
- Locate your theme’s footer.php file (or a similar template that loads on every page).
- Paste the <div id="cookie-consent"> structure just before the closing </body> tag.
- Alternatively, use a plugin like Insert Headers and Footers to add the HTML to the footer:
  - Install and activate the plugin.
  - Go to Settings > Insert Headers and Footers.
  - Paste the HTML in the “Scripts in Footer” section.
Add the CSS:
- Go to Appearance > Customize > Additional CSS in your WordPress dashboard.
- Copy the CSS from the example above and paste it into the Additional CSS box.
- Publish the changes.
- Alternatively, add the CSS to your theme’s style.css via the Theme File Editor or a child theme.
Add the JavaScript:
- Create a new file named cookie-consent.js in your theme’s directory (e.g., wp-content/themes/your-theme/js/cookie-consent.js).
- Copy the JavaScript from the example above into cookie-consent.js.
- Enqueue the script in your theme’s functions.php:

function enqueue_cookie_consent_script() {
wp_enqueue_script('cookie-consent', get_template_directory_uri() . '/js/cookie-consent.js', array(), '1.0', true);
}
add_action('wp_enqueue_scripts', 'enqueue_cookie_consent_script');

- Alternatively, use the Insert Headers and Footers plugin to add the JavaScript in a <script> tag in the footer.
Test the Integration:
- Clear your browser’s localStorage and visit your WordPress site.
- Ensure the bar appears, responds to user interactions, and saves preferences.
- Test on mobile devices and check for accessibility using WAVE.

Integration for Other CMS Platforms

For platforms like Wix, Squarespace, or Shopify:

Wix: Use the “Custom Code” section in the Wix Editor to add the HTML (in a footer tracking code) and CSS/JavaScript (in the head or footer).
Squarespace: Add the HTML via a Code Block and the CSS/JavaScript via Settings > Advanced > Code Injection.
Shopify: Add the code to your theme’s theme.liquid file or use a custom app block.
Check your platform’s documentation for specific instructions on adding custom code.

Additional Tips

Ensure File Paths: Verify that the styles.css and script.js paths in your HTML match your website’s file structure.
Minify Code: Use tools like CSS Minifier or JavaScript Minifier to reduce file size for faster loading.
Backup Your Site: Before editing files, back up your website to avoid accidental issues.
Conditional Loading: If you use analytics or marketing scripts (e.g., Google Analytics), modify them to load only if the user consents (check localStorage.getItem('cookie-consent')).

Best Practices for 2025

Transparency: Clearly explain what each cookie type does (e.g., “Analytics cookies help us understand site usage”).
Re-Consent: Prompt users to review preferences annually or when your cookie policy changes.
Performance: Minimize the bar’s impact on page load speed by lazy-loading JavaScript.
Localization: Translate the bar for multilingual websites using tools like i18next.

Conclusion

Building a responsive and modern cookie consent bar in 2025 is both a technical and legal necessity. By following this guide, you can create a GDPR/CCPA-compliant bar that enhances UX and aligns with your website’s design. Use the provided HTML, CSS, and JavaScript as a starting point, customize it with free AI tools, and test thoroughly to ensure compliance and accessibility.

For further customization, explore advanced frameworks like React or Vue.js, or integrate with consent management platforms like Cookiebot. Stay compliant, prioritize user trust, and keep your website ready for the privacy landscape of 2025.