cookie-consent-api
Version:
A flexible JS API to manage cookie consent for GDPR
191 lines (172 loc) • 8.45 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Cookie Consent API</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
/* Style for example */
body { font-family: 'Helvetica', 'Arial', sans-serif }
button { cursor: pointer; background: #ddd; border-radius: 4px; border: 0; }
.cookie-consent-banner { display: none; background-color: #333; color: #fff; width: 100%; position: fixed; top: 0; left: 0; }
.cookie-consent-banner.show { display: block; }
.cookie-consent-banner-content { display: flex; padding: 10px 15px; }
.cookie-consent-actions { margin-left: auto; }
.cookie-consent-btn-accept { padding: 8px 10px; }
.cookie-consent-btn-accept.active { background-color: green; color: #fff; }
.cookie-consent-btn-refuse { padding: 8px 10px; }
.cookie-consent-btn-refuse.active { background-color: red; color: #fff; }
.cookie-consent-btn-close-settings { position: absolute; top: 16px; right: 16px; font-size: 30px; padding: 0 8px 3px 8px;}
.cookie-consent-settings-panel { width: 100%; height: 100%; background-color: rgba(0, 0, 0, .5); position: fixed; top: 0; left: 0; z-index: 9999; display: none; }
.cookie-consent-settings-panel.show { display: block; }
.cookie-consent-settings-panel h2 { margin: 0; }
.cookie-consent-settings-panel p { margin: 6px 0 16px 0; }
.cookie-consent-settings-panel table { width: 100%; border-collapse: collapse; text-align: left; }
.cookie-consent-settings-panel th, td { border: 1px solid #999; }
.cookie-consent-settings-panel th { background-color: #333; color: #fff; padding: 12px 16px; }
.cookie-consent-settings-panel td { padding: 10px 14px; }
.cookie-consent-settings-container { max-width: 600px; max-height: 100%; width: 80%; background-color: #fff; padding: 20px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
</style>
</head>
<body>
<!-- Youtube player example -->
<div data-cookie-consent="youtube">
<img src="https://img.youtube.com/vi/R4lZyXjGLRs/0.jpg" width="560" height="315">
<!--if-consent
<iframe src="https://www.youtube.com/embed/R4lZyXjGLRs" width="560" height="315" style="background:#000;border:0;"></iframe>
endif-->
</div>
<button class="cookie-consent-btn-open-settings">Open cookie consent settings</button>
<!-- Banner example -->
<div class="cookie-consent-banner">
<div class="cookie-consent-banner-content">
<span>We use cookies to provide better experience</span>
<div class="cookie-consent-actions">
<button class="cookie-consent-btn-accept-all">Accept all</button>
<button class="cookie-consent-btn-refuse-all">Refuse all</button>
<button class="cookie-consent-btn-open-settings">Open settings</button>
</div>
</div>
</div>
<!-- Settings panel example -->
<div class="cookie-consent-settings-panel">
<div class="cookie-consent-settings-container">
<h2>Cookies settings</h2>
<p>You can accept or refuse cookies of services we use</p>
<button class="cookie-consent-btn-close-settings">×</button>
<table class="cookie-consent-settings-table">
<thead>
<tr>
<th>Cookie</th>
<th>Consent</th>
</tr>
</thead>
<tbody>
<tr data-service="googleAnalytics">
<td>
<b>Google Analytics</b>
<p>A tool to track visitors</p>
</td>
<td>
<button class="cookie-consent-btn-accept">Yes</button>
<button class="cookie-consent-btn-refuse">No</button>
</td>
</tr>
<tr data-service="youtube">
<td>
<b>Youtube</b>
<p>A video website</p>
</td>
<td>
<button class="cookie-consent-btn-accept">Yes</button>
<button class="cookie-consent-btn-refuse">No</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- Google Analytics example -->
<div data-cookie-consent="googleAnalytics">
<!--if-consent
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-XXXXX-Y', 'auto');
ga('send', 'pageview');
console.log('Google Analytics loaded');
</script>
endif-->
</div>
<script>
document.addEventListener('DOMContentLoaded', function()
{
// Init API
const cookieConsent = new CookieConsentApi({
services: ['googleAnalytics', 'youtube']
});
// Show banner if cookies are not all configured
if (!cookieConsent.isAllConfigured()) {
document.querySelector('.cookie-consent-banner').classList.add('show');
}
// Hide consent banner when cookies are all configured
cookieConsent.on('allConfigured', function() {
document.querySelector('.cookie-consent-banner').classList.remove('show');
});
// Action : open settings panel
document.querySelectorAll('.cookie-consent-btn-open-settings').forEach(function(btn) {
btn.addEventListener('click', function() {
document.querySelector('.cookie-consent-settings-panel').classList.add('show');
});
});
// Action : close settings panel
document.querySelector('.cookie-consent-btn-close-settings').addEventListener('click', function() {
document.querySelector('.cookie-consent-settings-panel').classList.remove('show');
});
// Action : accept all services
document.querySelector('.cookie-consent-btn-accept-all').addEventListener('click', function() {
cookieConsent.acceptAll();
document.querySelectorAll('.cookie-consent-btn-refuse').forEach(function(elem) {
elem.classList.remove('active');
});
document.querySelectorAll('.cookie-consent-btn-accept').forEach(function(elem) {
elem.classList.add('active');
});
});
// Action : refuse all services
document.querySelector('.cookie-consent-btn-refuse-all').addEventListener('click', function() {
cookieConsent.refuseAll();
document.querySelectorAll('.cookie-consent-btn-refuse').forEach(function(elem) {
elem.classList.add('active');
});
document.querySelectorAll('.cookie-consent-btn-accept').forEach(function(elem) {
elem.classList.remove('active');
});
});
// Settings panel
document.querySelectorAll('.cookie-consent-settings-panel [data-service]').forEach(function(elem) {
var service = elem.getAttribute('data-service'),
acceptBtn = elem.querySelector('.cookie-consent-btn-accept'),
refuseBtn = elem.querySelector('.cookie-consent-btn-refuse');
// Add active class for accept and refuse buttons
if (cookieConsent.isAccepted(service)) acceptBtn.classList.add('active');
if (cookieConsent.isRefused(service)) refuseBtn.classList.add('active');
// Action : accept service
acceptBtn.addEventListener('click', function() {
cookieConsent.accept(service);
refuseBtn.classList.remove('active');
acceptBtn.classList.add('active');
});
// Action : refuse service
refuseBtn.addEventListener('click', function() {
cookieConsent.refuse(service);
acceptBtn.classList.remove('active');
refuseBtn.classList.add('active');
});
});
});
</script>
</body>
</html>