โค้ด Cookie Consent Banner ภาษาไทย — Template ฟรี ตาม PDPA

<!-- Cookie Consent Banner — PDPA Compliant -->
<div id="cookie-banner" style="display:none;" role="dialog" aria-label="ประกาศคุกกี้">
  <div class="cookie-content">
    <h3>เว็บไซต์นี้ใช้คุกกี้</h3>
    <p>
      เราใช้คุกกี้เพื่อปรับปรุงประสบการณ์การใช้งานและวิเคราะห์การเข้าเยี่ยมชม
      คุณสามารถเลือกยอมรับหรือปฏิเสธคุกกี้ที่ไม่จำเป็นได้
      <a href="/privacy">อ่านนโยบายความเป็นส่วนตัว</a>
    </p>
    <div class="cookie-categories">
      <label>
        <input type="checkbox" checked disabled />
        <strong>คุกกี้จำเป็น</strong> — เพื่อให้เว็บไซต์ทำงานได้ (ไม่สามารถปิดได้)
      </label>
      <label>
        <input type="checkbox" id="cookie-analytics" />
        <strong>คุกกี้วิเคราะห์</strong> — เพื่อวิเคราะห์การใช้งาน (Google Analytics)
      </label>
      <label>
        <input type="checkbox" id="cookie-marketing" />
        <strong>คุกกี้การตลาด</strong> — เพื่อนำเสนอโฆษณาที่ตรงความสนใจ
      </label>
    </div>
    <div class="cookie-buttons">
      <button id="cookie-accept-all" class="btn-accept">ยอมรับทั้งหมด</button>
      <button id="cookie-reject-all" class="btn-reject">ปฏิเสธทั้งหมด</button>
      <button id="cookie-save" class="btn-save">บันทึกการตั้งค่า</button>
    </div>
  </div>
</div>

/* Cookie Consent Banner — PDPA Compliant */
#cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #ffffff;
  border-top: 1px solid #e5e7eb;
  box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.1);
  z-index: 9999;
  padding: 20px;
  font-family: 'Noto Sans Thai', sans-serif;
}
.cookie-content {
  max-width: 640px;
  margin: 0 auto;
}
#cookie-banner h3 {
  font-size: 16px;
  font-weight: 700;
  color: #111827;
  margin-bottom: 8px;
}
#cookie-banner p {
  font-size: 14px;
  color: #4b5563;
  line-height: 1.6;
  margin-bottom: 12px;
}
#cookie-banner a {
  color: #2563eb;
  text-decoration: underline;
}
.cookie-categories {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
}
.cookie-categories label {
  font-size: 13px;
  color: #374151;
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.cookie-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.cookie-buttons button {
  padding: 10px 20px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  min-height: 44px; /* PDPA: 44px tap target */
  font-family: 'Noto Sans Thai', sans-serif;
}
.btn-accept {
  background: #2563eb;
  color: #ffffff;
  border: none;
}
.btn-accept:hover { background: #1d4ed8; }
.btn-reject {
  background: #ffffff;
  color: #374151;
  border: 1px solid #d1d5db;
}
.btn-reject:hover { background: #f9fafb; }
.btn-save {
  background: #ffffff;
  color: #2563eb;
  border: 1px solid #2563eb;
}
.btn-save:hover { background: #eff6ff; }

<script>
(function() {
  var banner = document.getElementById('cookie-banner');
  var CONSENT_KEY = 'pdpa_cookie_consent';

  // Show banner if no consent recorded
  var saved = localStorage.getItem(CONSENT_KEY);
  if (!saved) {
    banner.style.display = 'block';
  } else if (JSON.parse(saved).analytics) {
    loadAnalytics();
  }

  // Accept all
  document.getElementById('cookie-accept-all').addEventListener('click', function() {
    var consent = { necessary: true, analytics: true, marketing: true, date: new Date().toISOString() };
    localStorage.setItem(CONSENT_KEY, JSON.stringify(consent));
    banner.style.display = 'none';
    loadAnalytics();
  });

  // Reject all (only necessary cookies)
  document.getElementById('cookie-reject-all').addEventListener('click', function() {
    var consent = { necessary: true, analytics: false, marketing: false, date: new Date().toISOString() };
    localStorage.setItem(CONSENT_KEY, JSON.stringify(consent));
    banner.style.display = 'none';
  });

  // Save custom settings
  document.getElementById('cookie-save').addEventListener('click', function() {
    var consent = {
      necessary: true,
      analytics: document.getElementById('cookie-analytics').checked,
      marketing: document.getElementById('cookie-marketing').checked,
      date: new Date().toISOString()
    };
    localStorage.setItem(CONSENT_KEY, JSON.stringify(consent));
    banner.style.display = 'none';
    if (consent.analytics) loadAnalytics();
  });

  // Load analytics ONLY after consent
  function loadAnalytics() {
    // วาง Google Analytics / Facebook Pixel ที่นี่
    // ตัวอย่าง Google Analytics:
    // var s = document.createElement('script');
    // s.src = 'https://www.googletagmanager.com/gtag/js?id=G-XXXXXXX';
    // document.head.appendChild(s);
  }
})();
</script>