EU Cookie Consent Popup with JavaScript
To implement an EU Cookie Consent Popup with JavaScript and PHP, you can follow these steps:
1. Detecting the Need for a Consent Popup:
Determine if the website visitor is from the European Union (EU) and if cookies are being used. If so, display the consent popup.
2. Displaying the Consent Popup:
Use JavaScript to create a popup modal that informs users about the use of cookies and provides options for accepting or managing cookie preferences.
3. Storing User Consent:
Store the user’s consent preference (e.g., accepted or declined) using cookies or local storage.
Here’s a simple example:
Step 1: Detecting the Need for a Consent Popup (index.php)
<?php
// Function to check if the user is from the EU based on IP geolocation
function isUserFromEU() {
// Implement your IP geolocation logic here
// Return true if the user is from the EU, otherwise false
return true; // Placeholder, replace with actual logic
}
// Function to check if cookies are used on the website
function areCookiesUsed() {
// Implement your logic to check if cookies are used
// Return true if cookies are used, otherwise false
return true; // Placeholder, replace with actual logic
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>EU Cookie Consent Popup</title>
<script>
window.onload = function() {
var isFromEU = <?php echo (isUserFromEU() ? 'true' : 'false'); ?>;
var cookiesUsed = <?php echo (areCookiesUsed() ? 'true' : 'false'); ?>;
if (isFromEU && cookiesUsed) {
var consentGiven = localStorage.getItem('cookie_consent');
if (!consentGiven) {
document.getElementById('cookie-consent-popup').style.display = 'block';
}
}
};
function acceptCookies() {
localStorage.setItem('cookie_consent', 'true');
document.getElementById('cookie-consent-popup').style.display = 'none';
}
function manageCookies() {
window.location.href = 'manage_cookies.php';
}
</script>
</head>
<body>
<div id="cookie-consent-popup" class="popup">
<div class="popup-content">
<p>This website uses cookies to ensure you get the best experience. By continuing to use our site, you consent to our use of cookies.</p>
<button onclick="acceptCookies()">Accept</button>
<button onclick="manageCookies()">Manage Preferences</button>
</div>
</div>
</body>
</html>
Step 2: Styling the Consent Popup with CSS (style.css)
/* CSS styles for the consent popup */
.popup {
display: none;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: rgba(0, 0, 0, 0.8);
padding: 20px;
color: #fff;
border-radius: 5px;
}
.popup-content {
text-align: center;
}
.popup-content p {
margin: 0;
}
.popup-content button {
margin-top: 10px;
padding: 8px 16px;
background-color: #007bff;
color: #fff;
border: none;
border-radius: 4px;
cursor: pointer;
}
.popup-content button:hover {
background-color: #0056b3;
}
Important Notes:
– The `isUserFromEU` and `areCookiesUsed` functions are placeholders. You need to implement actual logic based on your requirements.
– Be sure to comply with relevant EU regulations (e.g., GDPR) when implementing cookie consent mechanisms.
– Provide clear information about the types of cookies used and their purposes in the consent popup.
– Users should have the option to manage their cookie preferences or withdraw consent if desired.
About The Author
