Un semplice popup per GDPE e cookie low #pillole

Sicuramente il vostro sito non profila gli utenti per la pubblicità o i contenuti. Ma semplicemente avete un area riservata o un sistema dove possono gestire delle informazioni. Per fare questo utilizzate dei cookies, delle session e volete mettere un avviso per essere in regola.

Questo semplice esempio permette di creare un popup modal all’ingresso del vostro sito con tutte le informazioni e rimandi a pagine dedicate per privacy e gdpr. L’evento da parte dell’utente di accettare genera nel localstorage questa scelta e permette di continuare sul sito.

<!DOCTYPE html>
<html>
<head>
  <style>
    .cookie-popup {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  justify-content: center;
  align-items: center;
}

.cookie-content {
  background: #fff;
  padding: 20px;
  border-radius: 5px;
  text-align: center;
}

.cookie-content a {
  color: #007BFF;
  text-decoration: none;
}

.cookie-content button {
  background-color: #007BFF;
  color: #fff;
  border: none;
  padding: 10px 20px;
  cursor: pointer;
}

  </style>
</head>
<body>
  <div id="cookiePopup" class="cookie-popup">
    <div class="cookie-content">
        <p>
            <b>Rispettiamo la tua riservatezza</b><br>
Archiviamo informazioni quali cookie su un dispositivo (e/o vi accediamo) e trattiamo i dati personali, 
quali gli identificativi unici per permetterti di accedere ai tuoi contenuti e poter usufruire dei servizi del sito. 
Con la tua autorizzazione possiamo utilizzare questi dati per garantirti l'accesso al sito, ai suoi contenuti e ai tuoi contenuti.
        </p>
      <p> <a href="/informativa-privacy">Maggiori informazioni</a></p>
      <button id="acceptCookies" onclick="acceptCookies()">Accetta</button>
    </div>
  </div>
  <!-- Il resto del tuo contenuto va qui -->

 <script>
    document.addEventListener("DOMContentLoaded", function () {
  if (!localStorage.getItem("cookiesAccepted")) {
    showCookiePopup();
  }
});

function showCookiePopup() {
  const popup = document.getElementById("cookiePopup");
  popup.style.display = "block";
}

function acceptCookies() {
  const popup = document.getElementById("cookiePopup");
  popup.style.display = "none";
  localStorage.setItem("cookiesAccepted", "true");
}

 </script> 
</body>
</html>

E’ un semplice codice da poter personalizzare. Potete utilizzare i cookie o le session a piacere.

#gdpr #cookies #web #html #privacy #css

By : Andrea Tags: html web