Login Member
close
Subscribe
Home Addson
Simple Cookie Consent Popup Widget

Simple Cookie Consent Popup Widget

"Simple cookie consent popup widget modal (popup) window that appears on a website when a user first visits."

simple cookie consent popup widget blogger

Details

Simple cookie consent popup widget modal (popup) window that appears on a website when a user first visits. It informs the user that the website uses cookies (small data files stored on the user's device) for purposes like tracking, analytics, or personalizing content. It usually asks for the user's permission to store cookies on their device in accordance with privacy laws and regulations like the General Data Protection Regulation (GDPR) or California Consumer Privacy Act (CCPA).

This widget includes options such as:

  • Accept: The user agrees to the use of cookies.
  • Decline: The user refuses the use of cookies.
  • Learn: Learn more to privacy policies pages.


Code

CSS

  #cookie-banner { position: fixed; bottom: 0; left: 0; right: 0; background-color: #f4f4f4; color: #333; padding: 10px 20px; display: none; justify-content: space-between; align-items: center; box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.2); z-index: 1000; transition: transform 0.5s ease-in-out; margin: 1rem; border-radius: 0.5rem; }
  #cookie-banner div { text-align: end; } 
  #cookie-banner p { margin: 0 1rem 0 0; font-size: 1rem; }
  #cookie-banner button { padding: 8px 15px; font-size: 14px; overflow-wrap: break-word; margin-block-end: 0.5rem; width: 5rem; }
  #cookie-banner button:hover { background-color: #005bb5; }
  .btn-primary, .btn-secondary { width: fit-content; padding: 0.25rem 1.25rem 0.5rem; cursor: pointer; border-radius: 0.25rem; border: none; }
  .btn-primary { background: #054cc3; color: white; }
  .btn-secondary { background: #ffffff; color: #161d24; border: 1px solid #ddd; }

HTML

<div id="cookie-banner">
  <p>We use cookies to ensure you get the best experience on our website. <a href="/p/privacy-policy.html" style="color: #0073e6;">Learn more our privacy policy</a>.</p>
  <div>
    <button id="accept-cookies" class="btn-primary">Accept</button>
    <button id="decline-cookies" class="btn-secondary">Decline</button>
  </div>
</div>

JavaScript

  document.addEventListener("DOMContentLoaded", () => { const cookieBanner = document.getElementById('cookie-banner'); if (!localStorage.getItem('cookieConsent')) cookieBanner.style.display = 'flex'; document.getElementById('accept-cookies').onclick = () => { localStorage.setItem('cookieConsent', 'accepted'); cookieBanner.style.display = 'none'; }; document.getElementById('decline-cookies').onclick = () => { localStorage.setItem('cookieConsent', 'declined'); cookieBanner.style.display = 'none'; }; });


Help Me Install
Comments
Form Checkout
Add Voucher %
By purchasing, you agree to all terms.
Konfirmasi Pembayaran