How to Customise Consent Banner Styling

UniConsent CMP provides multiple ways to customise the appearance of your consent banner to match your website's design.

Built-in Options

The simplest way to customise your banner is through the dashboard project settings:

• Theme Color: set your primary brand color.
• Button Text Color: adjust button and link text colors.
• Template: choose from 10 banner templates under the Template section.
• Logo: upload your company logo.

Custom CSS

For advanced styling, add custom CSS in your project settings under the Custom CSS field. This CSS is applied directly to the consent banner.

Common Examples

Change the accept button color:

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

Change the banner background:

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

Change the font size:

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

Hide the privacy badge icon:

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

Instead, use a manual trigger button on your page:

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

Template Selection

UniConsent offers 10 banner templates:

Set the template in your project settings under the Template section, or configure it via the barmode parameter.

API-Only Integration (Custom First Layer)

If you want to build your own consent banner and only use UniConsent for consent storage, vendor list, and compliance, enable API-Only Mode and use the JavaScript API to control consent from your own UI.

Step 1: Enable API-Only Mode

In your project dashboard settings:

1. Go to Settings > GDPR section and turn on API-Only Mode (GDPR).
2. If you also use CCPA, go to Settings > U.S. Privacy section and turn on API-Only Mode (CCPA).
3. Optionally, set Show Privacy Badge to OFF in the Display Options section.

The CMP tag will still load in the background, handling consent storage, IAB TCF signals, and Google Consent Mode, but the default banner will not appear.

Step 2: Build Your Own Banner

Create your own consent banner HTML. The banner is hidden by default and only shown when the CMP is ready and the user has not yet consented.

<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;">We use cookies and similar technologies.</p>
    <div>
      <button onclick="__unicapi('openOptions')">Preferences</button>
      <button onclick="__unicapi('openCookiesList')">Cookie List</button>
      <button onclick="__unicapi('rejectAll')">Reject All</button>
      <button onclick="__unicapi('agreeAll')">Accept All</button>
    </div>
  </div>
</div>

Step 3: Show or Hide Based on Consent Status

Add this script after the CMP tag. It polls the dataLayer for the unic_data event to determine if the user has already consented. If no consent is found, the custom banner is shown. Once the user makes a choice, the banner is hidden.

<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') {
          // User has already consented - keep banner hidden
          resolved = true
          return
        }
      }
    }
    // CMP loaded but no consent yet - show the banner
    if (typeof window.__unicapi === 'function' && !resolved) {
      banner.style.display = 'block'
    }
    if (!resolved) {
      setTimeout(checkConsent, 200)
    }
  }

  // Listen for new consent actions to hide the banner
  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>

Available API Methods

This approach gives you full control over the first layer design while UniConsent handles consent storage, vendor list management, IAB TCF compliance, and Google Consent Mode signals.

See the full JavaScript API reference for more details.

Page CSS Compatibility

If you have existing CSS rules on your page that target .unic class selectors, these styles are automatically applied to the consent banner. No additional configuration is needed.

Tips

• Use !important when overriding default styles.
• Test your changes using the preview mode: add ?uniconsent_test=1&uniconsent_reset=1 to your page URL.
• Custom CSS changes take effect after publishing your project.