Cookies Consent pop up widget code

 Cookies Consent pop up widget code

-------------------------------------------------------------------------------------------------------------------------------------------

<!-- 🍪 Cookie Consent Button -->

<div id="cookie-settings-btn" style="position: fixed; bottom: 20px; right: 20px; z-index: 9999;">

  <button id="toggle-cookie-settings" style="background-color:#ff6600; border:none; border-radius:50%; width:60px; height:60px; color:white; font-size:24px; cursor:pointer; box-shadow: 0 4px 8px rgba(0,0,0,0.3);">🍪</button>

</div>

<!-- 🍪 Cookie Modal -->

<div id="cookie-modal" style="display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.6); z-index:9998;">

  <div style="background:#fff; margin:50px auto; padding:30px; max-width:700px; border-radius:10px;">

    <h2>Privacy Preferences</h2>

    <p>This site uses cookies to enhance your experience. <a href="https://wikibloggerblogspot.blogspot.com/cookie-notice" target="_blank" style="color:#ff6600;">Read our Cookie Notice</a>.</p>

    <ul>

      <li><strong>Strictly Necessary Cookies:</strong> Always Active</li>

      <li><strong>Performance Cookies:</strong> <input type="checkbox" id="perf-cookies" checked /></li>

      <li><strong>Targeting Cookies:</strong> <input type="checkbox" id="target-cookies" /></li>

    </ul>

    <div style="text-align:right; margin-top:20px;">

      <button onclick="rejectCookies()" style="background:#ccc; border:none; padding:10px 20px; margin-right:10px;">Reject</button>

      <button onclick="acceptCookies()" style="background:#ff6600; color:#fff; border:none; padding:10px 20px;">Accept</button>

    </div>

  </div>

</div>

<script>

  function toggleCookieModal() {

    var modal = document.getElementById("cookie-modal");

    modal.style.display = (modal.style.display === "block") ? "none" : "block";

  }

  function acceptCookies() {

    localStorage.setItem("cookieConsent", "accepted");

    enableTrackingScripts();

    document.getElementById("cookie-modal").style.display = "none";

  }

  function rejectCookies() {

    localStorage.setItem("cookieConsent", "rejected");

    disableTrackingScripts();

    document.getElementById("cookie-modal").style.display = "none";

  }

  function enableTrackingScripts() {

    if (document.getElementById("ga-script")) {

      document.getElementById("ga-script").src = "https://www.googletagmanager.com/gtag/js?id=UA-XXXXXXX-X";

    }

    if (document.getElementById("fb-script")) {

      document.getElementById("fb-script").innerHTML = `

        !function(f,b,e,v,n,t,s)

        {if(f.fbq)return;n=f.fbq=function(){n.callMethod?

        n.callMethod.apply(n,arguments):n.queue.push(arguments)};

        if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';

        n.queue=[];t=b.createElement(e);t.async=!0;

        t.src=v;s=b.getElementsByTagName(e)[0];

        s.parentNode.insertBefore(t,s)}(window, document,'script',

        'https://connect.facebook.net/en_US/fbevents.js');

        fbq('init', 'YOUR_PIXEL_ID'); 

        fbq('track', 'PageView');

      `;

    }

  }

  function disableTrackingScripts() {

    if (document.getElementById("ga-script")) {

      document.getElementById("ga-script").src = "";

    }

    if (document.getElementById("fb-script")) {

      document.getElementById("fb-script").innerHTML = "";

    }

  }

  document.addEventListener("DOMContentLoaded", function () {

    const consent = localStorage.getItem("cookieConsent");

    if (consent === "accepted") {

      enableTrackingScripts();

    } else {

      disableTrackingScripts();

    }

    document.getElementById("toggle-cookie-settings").addEventListener("click", toggleCookieModal);

  });

</script>

<!-- Google Analytics (will only load if accepted) -->

<script id="ga-script" type="text/plain"></script>

<!-- Facebook Pixel (will only load if accepted) -->

<script id="fb-script" type="text/plain"></script>