自定义同意横幅样式

UniConsent CMP 提供多种方式来自定义同意横幅的外观，使其与您的网站设计匹配。

内置选项

通过仪表板项目设置自定义横幅：

• Theme Color：设置主要品牌颜色。
• Button Text Color：调整按钮和链接文字颜色。
• Template：从 10 个横幅模板中选择。
• Logo：上传公司标志。

自定义 CSS

在项目设置的 Custom CSS 字段中添加自定义 CSS。

常见示例

更改接受按钮颜色：

.unic-btn-accept {
  background-color: #2563eb !important;
  border-radius: 8px !important;
}

更改横幅背景：

.unic-bar {
  background-color: #1a1a2e !important;
}

更改字体大小：

.unic-bar-text {
  font-size: 13px !important;
}

隐藏隐私徽章图标：

.unic-icon {
  display: none !important;
}

改用手动触发按钮：

<button onclick='__unicapi("openunic");return false;'>Consent Settings</button>

模板选择

在 Template 部分设置模板，或通过 barmode 参数配置。

纯 API 集成（自定义第一层）

如果您想构建自己的同意横幅，仅使用 UniConsent 进行同意存储和合规，请启用纯 API 模式。

步骤 1：启用纯 API 模式

在仪表板项目设置中：

1. 进入 Settings > GDPR 并启用 API-Only Mode (GDPR)。
2. 如使用 CCPA：进入 Settings > U.S. Privacy 并启用 API-Only Mode (CCPA)。
3. 可选择关闭 Show Privacy Badge。

CMP 标签仍会在后台加载。

步骤 2：构建您自己的横幅

<div id="my-consent-banner" style="display:none; position:fixed; bottom:0; left:0; right:0; background:#fff; padding:16px; box-shadow:0 -2px 10px rgba(0,0,0,0.1); z-index:9999;">
  <div style="display:flex; align-items:center; justify-content:space-between; max-width:1200px; margin:0 auto;">
    <p style="margin:0; font-size:14px;">我们使用 Cookie 和类似技术。</p>
    <div>
      <button onclick="__unicapi('openOptions')">偏好设置</button>
      <button onclick="__unicapi('openCookiesList')">Cookie 列表</button>
      <button onclick="__unicapi('rejectAll')">全部拒绝</button>
      <button onclick="__unicapi('agreeAll')">全部接受</button>
    </div>
  </div>
</div>

步骤 3：根据同意状态显示或隐藏横幅

<script>
;(function initConsentBanner() {
  var banner = document.getElementById('my-consent-banner')
  var resolved = false

  function checkConsent() {
    if (resolved) return
    if (window['dataLayer']) {
      for (var i = 0; i < window['dataLayer'].length; i++) {
        if (window['dataLayer'][i]['event'] === 'unic_data') {
          resolved = true
          return
        }
      }
    }
    if (typeof window.__unicapi === 'function' && !resolved) {
      banner.style.display = 'block'
    }
    if (!resolved) {
      setTimeout(checkConsent, 200)
    }
  }

  var origPush = (window['dataLayer'] = window['dataLayer'] || []).push
  window['dataLayer'].push = function () {
    var result = origPush.apply(this, arguments)
    for (var i = 0; i < arguments.length; i++) {
      if (arguments[i] && arguments[i]['event'] === 'unic_data') {
        banner.style.display = 'none'
        resolved = true
      }
    }
    return result
  }

  checkConsent()
})()
</script>

可用 API 方法

完整的 JavaScript API 参考。

CSS 兼容性

页面上针对 .unic 类选择器的现有 CSS 规则会自动应用到同意横幅。

提示

• 覆盖默认样式时使用 !important。
• 使用预览模式测试：?uniconsent_test=1&uniconsent_reset=1
• CSS 更改在发布项目后生效。