Cookie 横幅生成器

生成一个简单的 Cookie 同意横幅的 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="Cookie 同意">
  <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 吗?

此生成器提供了功能完备的技术基础(显示、选择、记忆),但真正的合规性还取决于您实际如何处理 Cookie:在用户点击「接受」之前,非必要的 Cookie(分析、广告)必须保持禁用。请修改生成的 JavaScript 代码中的「TODO」注释,使您的脚本仅在获得同意后才启用;如果您的网站处理敏感数据,请咨询法律专业人士。

复制之后我可以修改生成的代码吗?

可以,这段代码是一个标准的起点,不依赖任何外部库或框架:您可以自由调整使其符合网站的视觉风格,或将其集成到现有组件中。

代码完全在您的浏览器中生成:您的任何信息都不会发送到外部服务器。