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)

// 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">
<meta charset="UTF-8">
<title>EU Cookie Consent Popup</title>
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';
<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>

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.

Add a Comment

Your email address will not be published. Required fields are marked *


My name is Nohman Habib and I am a web developer with over 10 years of experience, programming in Joomla, Wordpress, WHMCS, vTiger and Hybrid Apps. My plan to start is to share my experience and expertise with others. Here my basic area of focus is to post tutorials primarily on Joomla development, HTML5, CSS3 and PHP.

Nohman Habib


Request a Quote

PHP Code Snippets Powered By :