1. Incolla lo snippet
Inserisci il codice generato subito prima del tag di chiusura body in ogni pagina. Non ha dipendenze e non aggiunge richieste di rete.
Strumento gratuito
Generatore di banner per il consenso ai cookie
Scegli le categorie di cookie, scrivi i testi, scegli lo stile e copia un banner di consenso senza dipendenze da incollare in qualsiasi sito. Memorizza la scelta del visitatore, mantiene bloccati gli script contrassegnati finché la loro categoria non viene autorizzata e può essere riaperto da un link nel footer.
Il tuo banner di consenso
Incollalo subito prima del tag di chiusura body, in ogni pagina.
<!-- Cookie consent banner - paste this just before </body> -->
<script>
(function () {
var CFG = {
"storageKey": "cookie_consent",
"position": "bar",
"theme": "light",
"accent": "#a6144d",
"title": "Usiamo i cookie",
"message": "Usiamo i cookie per far funzionare questo sito, capire come viene usato e migliorarlo. Puoi accettare tutto, rifiutare ciò che è facoltativo oppure scegliere per categoria.",
"policyUrl": "https://example.com/privacy",
"policyLabel": "Leggi la nostra informativa sulla privacy",
"accept": "Accetta tutti",
"reject": "Rifiuta i facoltativi",
"prefs": "Preferenze",
"save": "Salva le scelte",
"categories": [
{
"id": "necessary",
"label": "Strettamente necessari",
"desc": "Necessari per il funzionamento del sito. Sempre attivi, non richiedono il consenso.",
"required": true
},
{
"id": "analytics",
"label": "Analisi",
"desc": "Misurano come viene usato il sito per poterlo migliorare.",
"required": false
},
{
"id": "marketing",
"label": "Marketing",
"desc": "Usati per personalizzare gli annunci e misurare le campagne.",
"required": false
}
]
};
var KEY = CFG.storageKey;
var doc = document;
var box = null;
function read() {
try { return JSON.parse(localStorage.getItem(KEY) || 'null'); } catch (e) { return null; }
}
function save(consent) {
consent.necessary = true;
consent.date = new Date().toISOString();
try { localStorage.setItem(KEY, JSON.stringify(consent)); } catch (e) {}
unblock(consent);
window.dispatchEvent(new CustomEvent('consentchange', { detail: consent }));
if (typeof window.onConsentChange === 'function') window.onConsentChange(consent);
}
// Scripts the site parked behind a category run only once it is granted. Park
// one by giving its tag type="text/plain" and data-consent="analytics".
// (Deliberately described, not shown: a literal script tag written out here
// would close this one early and truncate everything below it.)
function unblock(consent) {
var parked = doc.querySelectorAll('script[type="text/plain"][data-consent]');
for (var i = 0; i < parked.length; i++) {
var old = parked[i];
if (!consent[old.getAttribute('data-consent')]) continue;
var next = doc.createElement('script');
for (var a = 0; a < old.attributes.length; a++) {
var at = old.attributes[a];
if (at.name !== 'type' && at.name !== 'data-consent') next.setAttribute(at.name, at.value);
}
next.text = old.text;
old.parentNode.replaceChild(next, old);
}
}
function styles() {
var dark = CFG.theme === 'dark';
var bg = dark ? '#161622' : '#ffffff';
var fg = dark ? '#f4f4f8' : '#141a47';
var muted = dark ? 'rgba(244,244,248,.72)' : 'rgba(20,26,71,.7)';
var line = dark ? 'rgba(255,255,255,.14)' : 'rgba(20,26,71,.12)';
var el = doc.createElement('style');
el.textContent = [
'.cc-root{position:fixed;z-index:2147483000;font:400 14px/1.55 system-ui,-apple-system,Segoe UI,Roboto,sans-serif;color:' + fg + ';box-sizing:border-box}',
'.cc-root *,.cc-root *::before,.cc-root *::after{box-sizing:inherit}',
'.cc-card{background:' + bg + ';border:1px solid ' + line + ';box-shadow:0 18px 48px rgba(0,0,0,.18);border-radius:14px;padding:20px}',
'.cc-bar{left:0;right:0;bottom:0;padding:16px}',
'.cc-bar .cc-card{display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between;max-width:1120px;margin:0 auto}',
'.cc-box{left:16px;bottom:16px;max-width:400px}',
'.cc-modal{inset:0;display:flex;align-items:center;justify-content:center;padding:16px;background:rgba(10,10,20,.5)}',
'.cc-modal .cc-card{max-width:520px;width:100%}',
'.cc-title{margin:0 0 6px;font-size:16px;font-weight:700}',
'.cc-text{margin:0;color:' + muted + '}',
'.cc-text a{color:' + CFG.accent + ';font-weight:600}',
'.cc-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}',
'.cc-bar .cc-actions{margin-top:0}',
'.cc-btn{appearance:none;cursor:pointer;border:1px solid ' + line + ';border-radius:999px;padding:9px 18px;font:600 14px inherit;background:transparent;color:' + fg + '}',
'.cc-btn-main{background:' + CFG.accent + ';border-color:' + CFG.accent + ';color:#fff}',
'.cc-btn:focus-visible{outline:2px solid ' + CFG.accent + ';outline-offset:2px}',
'.cc-cats{display:none;margin:14px 0 0;padding:14px 0 0;border-top:1px solid ' + line + '}',
'.cc-cats.cc-open{display:block}',
'.cc-cat{display:flex;gap:10px;align-items:flex-start;margin-bottom:12px}',
'.cc-cat input{margin:3px 0 0;accent-color:' + CFG.accent + '}',
'.cc-cat strong{display:block;font-size:14px}',
'.cc-cat span{display:block;color:' + muted + ';font-size:13px}',
'@media(max-width:640px){.cc-bar .cc-card{display:block}.cc-bar .cc-actions{margin-top:14px}.cc-btn{flex:1 1 auto}}'
].join('');
doc.head.appendChild(el);
}
function build() {
var stored = read() || {};
var root = doc.createElement('div');
root.className = 'cc-root cc-' + CFG.position;
root.setAttribute('role', CFG.position === 'modal' ? 'dialog' : 'region');
root.setAttribute('aria-label', CFG.title);
if (CFG.position === 'modal') root.setAttribute('aria-modal', 'true');
var card = doc.createElement('div');
card.className = 'cc-card';
var copy = doc.createElement('div');
var h = doc.createElement('p');
h.className = 'cc-title';
h.textContent = CFG.title;
var p = doc.createElement('p');
p.className = 'cc-text';
p.textContent = CFG.message + ' ';
if (CFG.policyUrl) {
var link = doc.createElement('a');
link.href = CFG.policyUrl;
link.textContent = CFG.policyLabel;
p.appendChild(link);
}
copy.appendChild(h);
copy.appendChild(p);
var cats = doc.createElement('div');
cats.className = 'cc-cats';
var inputs = {};
for (var i = 0; i < CFG.categories.length; i++) {
var c = CFG.categories[i];
var row = doc.createElement('label');
row.className = 'cc-cat';
var cb = doc.createElement('input');
cb.type = 'checkbox';
cb.checked = c.required || stored[c.id] === true;
cb.disabled = !!c.required;
var txt = doc.createElement('div');
var name = doc.createElement('strong');
name.textContent = c.label;
var desc = doc.createElement('span');
desc.textContent = c.desc;
txt.appendChild(name);
txt.appendChild(desc);
row.appendChild(cb);
row.appendChild(txt);
cats.appendChild(row);
inputs[c.id] = cb;
}
copy.appendChild(cats);
var actions = doc.createElement('div');
actions.className = 'cc-actions';
function button(label, main, onClick) {
var b = doc.createElement('button');
b.type = 'button';
b.className = 'cc-btn' + (main ? ' cc-btn-main' : '');
b.textContent = label;
b.addEventListener('click', onClick);
actions.appendChild(b);
return b;
}
function decide(granted) {
var consent = {};
for (var i = 0; i < CFG.categories.length; i++) {
var c = CFG.categories[i];
consent[c.id] = c.required ? true : granted === null ? !!inputs[c.id].checked : granted;
}
save(consent);
close();
}
var prefsBtn = button(CFG.prefs, false, function () {
var open = cats.classList.toggle('cc-open');
prefsBtn.setAttribute('aria-expanded', open ? 'true' : 'false');
saveBtn.style.display = open ? '' : 'none';
});
prefsBtn.setAttribute('aria-expanded', 'false');
button(CFG.reject, false, function () { decide(false); });
button(CFG.accept, true, function () { decide(true); });
var saveBtn = button(CFG.save, false, function () { decide(null); });
saveBtn.style.display = 'none';
card.appendChild(copy);
card.appendChild(actions);
root.appendChild(card);
doc.body.appendChild(root);
box = root;
}
function close() {
if (box && box.parentNode) box.parentNode.removeChild(box);
box = null;
}
function open() {
if (!box) build();
}
function start() {
styles();
var stored = read();
if (stored) unblock(stored);
else build();
window.showConsentPreferences = open;
}
if (doc.readyState === 'loading') doc.addEventListener('DOMContentLoaded', start);
else start();
})();
</script>Come usarlo
Tre passaggi per un banner funzionante
2. Metti in attesa i tuoi script di tracciamento
Cambia il type di un tag di tracciamento in text/plain e aggiungi data-consent="analytics". Il banner lo esegue nel momento in cui quella categoria viene autorizzata, e mai prima.
3. Permetti alle persone di cambiare idea
Aggiungi un link nel footer che chiama window.showConsentPreferences() così i visitatori possono riaprire il pannello. Ogni decisione attiva anche un evento consentchange che puoi ascoltare.
FAQ
Informazioni sul consenso ai cookie
Questo banner basta per la conformità al GDPR?
Ti offre i meccanismi che le autorità si aspettano: nessun cookie facoltativo prima del consenso, rifiutare facile quanto accettare, scelta per categoria e un modo per cambiare idea in seguito. La conformità dipende anche da cosa esegui davvero, da cosa dice la tua informativa e da dove si trovano i tuoi visitatori, quindi considera il codice generato un solido punto di partenza e non una consulenza legale.
Come impedisco agli script di essere eseguiti prima del consenso?
Assegna al tag script type="text/plain" e un attributo data-consent con il nome della sua categoria. Il browser non lo eseguirà, e il banner lo riscrive come vero tag script non appena quella categoria viene autorizzata, in questa visita o nella successiva, in base alla decisione memorizzata.
Dove viene memorizzata la scelta del visitatore?
In localStorage, nella chiave che scegli, come un piccolo oggetto JSON con un flag per categoria più la data. Non viene impostato alcun cookie per il banner stesso e non viene inviato nulla a un server, quindi funziona anche su un sito puramente statico.
Posso cambiarne lo stile?
Sì. Posizione, tema e colore di accento sono opzioni qui, e ogni elemento nel CSS generato ha il prefisso cc-, così puoi sovrascrivere le regole dal tuo foglio di stile senza toccare lo snippet.
Mi serve comunque una piattaforma di gestione del consenso?
Per un solo sito con poche categorie, questo snippet di solito basta. Quando ti servono registri dei consensi, più domini o analisi che rispettino automaticamente la scelta, il gestore del consenso integrato in PulsePanda si occupa di tutto.
Correlati
Altro da PulsePanda
Un consenso che le tue analisi rispettano davvero
PulsePanda include un gestore del consenso integrato: senza cookie per impostazione predefinita, smette di raccogliere dati nel momento in cui qualcuno rifiuta. Nessun secondo fornitore, nessun codice di collegamento.
Inizia gratis