光用这个生成器,网站就算合规了吗?

弹窗给访客提供了明确的同意或拒绝选项,并把结果保存下来,这部分要求是达成了。但你仍然需要单独的隐私政策页面,而且必须真的在用户拒绝的类别里把对应脚本拦下来。

怎样在用户同意之前阻止 Google Analytics 加载?

有两种方法。最简单的是勾选「Google 同意模式 v2」：生成的脚本随后会发送 gtag 同意信号，初始为拒绝，只有在访客接受对应类别后才切换为允许。否则，请自行用一段读取横幅所设 Cookie 的条件判断把 gtag 标签包起来，使脚本在获得同意前始终不会插入页面。

部署上线后还能改文案吗?

可以。用相近的设置重新生成一次,把弹窗 div 里的字段替换掉就行。已经做过选择的访客不会重新看到弹窗,因为 Cookie 名字没变。

「默认接受」和「默认拒绝」有什么区别?

默认拒绝(opt-in)模式下,所有非必要类别一开始都是关的,用户点了同意才会开启。默认接受(opt-out)反过来,加州 CCPA 允许这么做,但欧盟 GDPR 不行。访客里有欧盟用户就一定选默认拒绝。

访客每次访问都会看到弹窗吗?

不会。访客一旦保存了选择,Cookie 会按你设置的有效期保留（默认六个月）。只有过期、被清除,或者你在 JS 里手动改了「同意版本号」时,弹窗才会再次出现。

Cookie同意横幅生成器

生成Cookie同意横幅代码

设置

横幅样式

横幅文字

接受按钮文字

拒绝按钮文字

管理偏好文字

隐私政策链接

链接文字

同意模式

Cookie 有效期

天

必要统计分析营销功能

Google 同意模式 v2为 Google Ads 和 GA4 添加 gtag 同意信号（ad_storage、analytics_storage、ad_user_data、ad_personalization）。

颜色

配色方案

背景

文本

接受按钮文字

接受按钮文字文本

拒绝按钮文字

拒绝按钮文字文本

预览

我们使用 Cookie 来提升您的体验。继续访问本站即表示您同意我们使用 Cookie。

结果

<!-- Cookie Consent Banner -->
<style>
#cookie-consent-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  background: #1a1a2e;
  color: #ffffff;
  padding: 20px 24px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.15);
}

#cookie-consent-banner .cc-link {
  color: inherit;
  text-decoration: underline;
  font-weight: 600;
}

#cookie-consent-banner .cc-link:hover {
  opacity: 0.85;
}

#cookie-consent-banner .cc-content {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  max-width: 1200px;
  margin: 0 auto;
}

#cookie-consent-banner .cc-text {
  flex: 1;
  min-width: 200px;
}

#cookie-consent-banner .cc-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

#cookie-consent-banner button {
  padding: 10px 20px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.2);
  transition: opacity 0.2s;
}

#cookie-consent-banner button:hover {
  opacity: 0.9;
}

#cc-accept-btn {
  background: #e94560;
  color: #ffffff;
  border-color: #e94560;
}

#cc-reject-btn {
  background: transparent;
  color: #ffffff;
}

#cc-manage-btn {
  background: transparent;
  color: #ffffff;
  text-decoration: underline;
  border: none;
  padding: 10px 12px;
}

@media (max-width: 600px) {
  #cookie-consent-banner .cc-content {
    flex-direction: column;
    text-align: center;
  }
  #cookie-consent-banner .cc-buttons {
    justify-content: center;
    width: 100%;
  }
  #cookie-consent-banner button {
    flex: 1;
    min-width: 120px;
  }
}
#cookie-consent-prefs {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.5);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

#cookie-consent-prefs .cc-pref-box {
  background: #1a1a2e;
  color: #ffffff;
  width: 90%;
  max-width: 460px;
  max-height: 85vh;
  overflow-y: auto;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.35);
}

#cookie-consent-prefs .cc-pref-title {
  margin: 0 0 16px;
  font-size: 18px;
  font-weight: 700;
}

#cookie-consent-prefs .cc-pref-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 0;
  border-top: 1px solid rgba(127, 127, 127, 0.25);
}

#cookie-consent-prefs .cc-pref-info { flex: 1; }

#cookie-consent-prefs .cc-pref-name {
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 2px;
}

#cookie-consent-prefs .cc-pref-desc {
  font-size: 12px;
  opacity: 0.8;
  line-height: 1.4;
}

#cookie-consent-prefs .cc-pref-always {
  font-size: 12px;
  font-weight: 600;
  opacity: 0.7;
  white-space: nowrap;
  padding-top: 2px;
}

#cookie-consent-prefs .cc-switch {
  position: relative;
  display: inline-block;
  width: 42px;
  height: 24px;
  flex-shrink: 0;
}

#cookie-consent-prefs .cc-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

#cookie-consent-prefs .cc-slider {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background: rgba(127, 127, 127, 0.5);
  border-radius: 24px;
  transition: background 0.2s;
}

#cookie-consent-prefs .cc-slider:before {
  content: "";
  position: absolute;
  height: 18px;
  width: 18px;
  left: 3px;
  bottom: 3px;
  background: #fff;
  border-radius: 50%;
  transition: transform 0.2s;
}

#cookie-consent-prefs input:checked + .cc-slider {
  background: #e94560;
}

#cookie-consent-prefs input:checked + .cc-slider:before {
  transform: translateX(18px);
}

#cookie-consent-prefs .cc-pref-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 20px;
}

#cookie-consent-prefs .cc-pref-actions button {
  padding: 10px 18px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid rgba(127, 127, 127, 0.3);
}

#cc-prefs-save {
  background: #e94560;
  color: #ffffff;
  border-color: #e94560;
}

#cc-prefs-cancel {
  background: transparent;
  color: #ffffff;
}
</style>

<div id="cookie-consent-banner" style="display:none;">
  <div class="cc-content">
    <div class="cc-text">我们使用 Cookie 来提升您的体验。继续访问本站即表示您同意我们使用 Cookie。</div>
    <div class="cc-buttons">
      <button id="cc-accept-btn">全部接受</button>
      <button id="cc-reject-btn">全部拒绝</button>
      <button id="cc-manage-btn">管理偏好设置</button>
    </div>
  </div>
</div>
<div id="cookie-consent-prefs" style="display:none;" role="dialog" aria-modal="true" aria-label="Cookie 偏好设置">
  <div class="cc-pref-box">
    <h2 class="cc-pref-title">Cookie 偏好设置</h2>
    <div class="cc-pref-list">
      <div class="cc-pref-row">
        <div class="cc-pref-info">
          <div class="cc-pref-name">必要</div>
          <div class="cc-pref-desc">网站正常运行所必需，无法关闭。</div>
        </div>
        <span class="cc-pref-always">始终启用</span>
      </div>
      <div class="cc-pref-row">
        <div class="cc-pref-info">
          <div class="cc-pref-name">分析</div>
          <div class="cc-pref-desc">帮助我们了解访客如何使用网站，以便加以改进。</div>
        </div>
        <label class="cc-switch"><input type="checkbox" data-cc-cat="analytics" aria-label="分析"><span class="cc-slider"></span></label>
      </div>
    </div>
    <div class="cc-pref-actions">
      <button id="cc-prefs-save">保存偏好设置</button>
      <button id="cc-prefs-cancel">取消</button>
    </div>
  </div>
</div>

<script>
(function() {
  var COOKIE_NAME = 'cookie_consent';
  var CATEGORIES = ["necessary","analytics"];
  var OPTIONAL_CATEGORIES = ["analytics"];
  var DEFAULT_CONSENT = false;
  var EXPIRY_DAYS = 180;

  function getCookie(name) {
    var match = document.cookie.match(new RegExp('(^| )' + name + '=([^;]+)'));
    return match ? decodeURIComponent(match[2]) : null;
  }

  function setCookie(name, value, days) {
    var d = new Date();
    d.setTime(d.getTime() + (days * 24 * 60 * 60 * 1000));
    document.cookie = name + '=' + encodeURIComponent(value) +
      ';expires=' + d.toUTCString() + ';path=/;SameSite=Lax';
  }

  function hideBanner() {
    var banner = document.getElementById('cookie-consent-banner');
    if (banner) banner.style.display = 'none';
  }

  function showBanner() {
    var banner = document.getElementById('cookie-consent-banner');
    if (banner) banner.style.display = 'block';
  }

  function getPrefs() { return document.getElementById('cookie-consent-prefs'); }
  function openPrefs() {
    var p = getPrefs();
    if (!p) return;
    // Reflect the last saved choice (or the defaults) in the toggles.
    var saved = {};
    try { saved = JSON.parse(getCookie(COOKIE_NAME) || '{}'); } catch (e) {}
    OPTIONAL_CATEGORIES.forEach(function(cat) {
      var box = p.querySelector('[data-cc-cat="' + cat + '"]');
      if (box) box.checked = (cat in saved) ? !!saved[cat] : DEFAULT_CONSENT;
    });
    p.style.display = 'flex';
  }
  function closePrefs() {
    var p = getPrefs();
    if (p) p.style.display = 'none';
  }

  // Persist a consent object and broadcast it. `necessary` is always true.
  function persist(consent) {
    consent.necessary = true;
    setCookie(COOKIE_NAME, JSON.stringify(consent), EXPIRY_DAYS);
    hideBanner();
    closePrefs();
    window.dispatchEvent(new CustomEvent('cookieConsent', { detail: consent }));
  }

  // Accept-all / reject-all set every optional category the same way.
  function saveConsent(accepted) {
    var consent = {};
    CATEGORIES.forEach(function(cat) {
      consent[cat] = cat === 'necessary' ? true : accepted;
    });
    persist(consent);
  }

  // Save exactly what the visitor toggled in the preference center.
  function savePreferences() {
    var p = getPrefs();
    var consent = { necessary: true };
    OPTIONAL_CATEGORIES.forEach(function(cat) {
      var box = p && p.querySelector('[data-cc-cat="' + cat + '"]');
      consent[cat] = !!(box && box.checked);
    });
    persist(consent);
  }

  // Check existing consent
  var existing = getCookie(COOKIE_NAME);
  if (!existing) {
    if (DEFAULT_CONSENT) {
      // Opt-out mode: set default consent, still show banner
      var defaultCons = {};
      CATEGORIES.forEach(function(cat) { defaultCons[cat] = true; });
      setCookie(COOKIE_NAME, JSON.stringify(defaultCons), EXPIRY_DAYS);
    }
    showBanner();
  }

  document.getElementById('cc-accept-btn').addEventListener('click', function() {
    saveConsent(true);
  });

  document.getElementById('cc-reject-btn').addEventListener('click', function() {
    saveConsent(false);
  });

  document.getElementById('cc-manage-btn').addEventListener('click', openPrefs);

  var saveBtn = document.getElementById('cc-prefs-save');
  if (saveBtn) saveBtn.addEventListener('click', savePreferences);
  var cancelBtn = document.getElementById('cc-prefs-cancel');
  if (cancelBtn) cancelBtn.addEventListener('click', closePrefs);
})();
</script>

什么是Cookie同意横幅生成器？

生成符合 GDPR 的 Cookie 同意横幅，并直接给出可嵌入网站的 HTML、CSS 和 JavaScript 代码。选一种样式，设置 Cookie 类别，再调整同意结果的存储方式即可。

生成的代码是一个独立的片段:HTML 负责弹窗结构,CSS 负责样式,一小段 JavaScript 把访客的选择写入 Cookie,并只加载他们同意的脚本类别。可以直接粘贴到网站里,也可以下载三个独立文件的 zip 压缩包接入。

使用方法

选择横幅样式（顶部栏、底部栏、弹窗或角落弹出），并自定义颜色、文字和按钮标签。
配置 Cookie 类别（必要、分析、营销、功能）、同意的记住时长，以及同意行为（选择加入或选择退出）。
复制或下载生成的HTML/CSS/JS代码，并添加到您的网站中。

何时使用

给静态网站或营销落地页加上符合 GDPR、CCPA 的 Cookie 提示。
替换那种用户还没点之前就先加载 200KB 的第三方同意管理插件。
把样式效果先做出来给工程团队看,再交付详细规格。

结果

一位网站所有者为其符合GDPR的博客选择底部栏样式，设置"全部接受"和"管理偏好"按钮，启用分析和营销类别，然后下载代码片段添加到body标签关闭前。

常见问题

光用这个生成器,网站就算合规了吗?: 弹窗给访客提供了明确的同意或拒绝选项,并把结果保存下来,这部分要求是达成了。但你仍然需要单独的隐私政策页面,而且必须真的在用户拒绝的类别里把对应脚本拦下来。
怎样在用户同意之前阻止 Google Analytics 加载?: 有两种方法。最简单的是勾选「Google 同意模式 v2」：生成的脚本随后会发送 gtag 同意信号，初始为拒绝，只有在访客接受对应类别后才切换为允许。否则，请自行用一段读取横幅所设 Cookie 的条件判断把 gtag 标签包起来，使脚本在获得同意前始终不会插入页面。
部署上线后还能改文案吗?: 可以。用相近的设置重新生成一次,把弹窗 div 里的字段替换掉就行。已经做过选择的访客不会重新看到弹窗,因为 Cookie 名字没变。
「默认接受」和「默认拒绝」有什么区别?: 默认拒绝(opt-in)模式下,所有非必要类别一开始都是关的,用户点了同意才会开启。默认接受(opt-out)反过来,加州 CCPA 允许这么做,但欧盟 GDPR 不行。访客里有欧盟用户就一定选默认拒绝。
访客每次访问都会看到弹窗吗?: 不会。访客一旦保存了选择,Cookie 会按你设置的有效期保留（默认六个月）。只有过期、被清除,或者你在 JS 里手动改了「同意版本号」时,弹窗才会再次出现。

Cookie同意横幅生成器

设置

颜色

预览

结果

什么是Cookie同意横幅生成器？

使用方法

何时使用

结果

常见问题

相关工具

结构化数据生成器

网页转 PDF

隐私政策生成器

服务条款生成器

CSS压缩工具

HTML 压缩工具

Cookie同意横幅生成器

设置

颜色

预览

结果