مولّد شريط ملفات تعريف الارتباط

أنشئ شيفرة HTML وCSS وJavaScript لشريط بسيط للموافقة على ملفات تعريف الارتباط، لتنسخها وتلصقها في موقعك فتتيح خيار «قبول / رفض» مع حفظ الاختيار في متصفح الزائر. تُكوَّن الشيفرة كلها محليًا دون خادم.

الرسالة

نص زر «قبول»

نص زر «رفض»

نص الرابط

عنوان الرابط (سياسة الخصوصية)

الموضع

لون الخلفية

لون النص

لون زر «قبول»

Ce site utilise des cookies pour améliorer votre expérience. En continuant votre navigation, vous acceptez leur utilisation.

الشيفرة المراد نسخها ولصقها

<style>
#byteryo-cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  background: #1f2937;
  color: #f9fafb;
  padding: 1rem 1.25rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  font-family: system-ui, sans-serif;
  font-size: 0.9rem;
  box-shadow: 0 -2px 12px rgba(0,0,0,0.2);
}
#byteryo-cookie-banner a { color: inherit; text-decoration: underline; }
#byteryo-cookie-banner .byteryo-cookie-actions { display: flex; gap: 0.5rem; flex-shrink: 0; }
#byteryo-cookie-banner button {
  border: none;
  border-radius: 6px;
  padding: 0.5rem 1rem;
  cursor: pointer;
  font-size: 0.85rem;
}
#byteryo-cookie-accept { background: #22c55e; color: #fff; }
#byteryo-cookie-decline { background: transparent; color: inherit; border: 1px solid currentColor !important; }
</style>

<div id="byteryo-cookie-banner" role="dialog" aria-live="polite" aria-label="الموافقة على ملفات تعريف الارتباط">
  <p style="margin:0">
    Ce site utilise des cookies pour améliorer votre expérience. En continuant votre navigation, vous acceptez leur utilisation.
    <a href="/confidentialite">En savoir plus</a>
  </p>
  <div class="byteryo-cookie-actions">
    <button id="byteryo-cookie-decline">Refuser</button>
    <button id="byteryo-cookie-accept">Accepter</button>
  </div>
</div>

<script>
(function () {
  var STORAGE_KEY = 'byteryo_cookie_consent';
  var banner = document.getElementById('byteryo-cookie-banner');
  if (!banner) return;
  var stored = localStorage.getItem(STORAGE_KEY);
  if (stored === 'accepted' || stored === 'declined') {
    banner.style.display = 'none';
    return;
  }
  document.getElementById('byteryo-cookie-accept').addEventListener('click', function () {
    localStorage.setItem(STORAGE_KEY, 'accepted');
    banner.style.display = 'none';
    // TODO: activer ici vos scripts soumis au consentement (analytics, pub...)
  });
  document.getElementById('byteryo-cookie-decline').addEventListener('click', function () {
    localStorage.setItem(STORAGE_KEY, 'declined');
    banner.style.display = 'none';
  });
})();
</script>

كيف يعمل

خصّص الرسالة ونصوص الأزرار والألوان، وعاين الشكل، ثم انسخ كتلة HTML/CSS/JS الكاملة إلى موقعك: الصقها قبل وسم الإغلاق </body> في صفحتك مباشرةً. تحفظ الشيفرة اختيار الزائر في التخزين المحلي لمتصفحه حتى لا يظهر الشريط مجددًا بعد أن يجيب.

هل يكفي هذا الشريط للامتثال للائحة GDPR؟

يوفّر هذا المولّد أساسًا تقنيًا عمليًا (العرض والاختيار والحفظ)، لكن الامتثال الفعلي يتوقف أيضًا على ما تفعله عمليًا بملفات تعريف الارتباط: يجب أن تبقى الملفات غير الأساسية (التحليلات والإعلانات) معطّلة ما لم ينقر المستخدم على «قبول». عدّل تعليق «TODO» في شيفرة JavaScript المُولَّدة لتفعيل سكربتاتك بعد الموافقة فقط، واستشر مختصًا قانونيًا إذا كان موقعك يعالج بيانات حساسة.

هل يمكنني تعديل الشيفرة المُولَّدة بعد نسخها؟

نعم، الشيفرة نقطة انطلاق قياسية، لا تعتمد على مكتبة خارجية ولا تتطلب أي إطار عمل: يمكنك تكييفها بحرية مع الهوية البصرية لموقعك أو دمجها في مكوّن موجود.

تُولَّد الشيفرة بالكامل داخل متصفحك: لا تُرسل أي من معلوماتك إلى خادم خارجي.