Personnaliser le style de la banniere de consentement

UniConsent CMP offre plusieurs moyens de personnaliser l'apparence de votre banniere de consentement.

Options integrees

• Theme Color : definir votre couleur de marque principale.
• Button Text Color : ajuster les couleurs du texte des boutons.
• Template : choisir parmi 10 modeles de banniere.
• Logo : telecharger le logo de votre entreprise.

CSS personnalise

Pour un style avance, ajoutez du CSS dans le champ Custom CSS de votre projet.

Exemples courants

Changer la couleur du bouton d'acceptation :

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

Changer le fond de la banniere :

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

Changer la taille de la police :

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

Masquer le badge de confidentialite :

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

Utilisez un bouton de declenchement manuel :

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

Selection de modele

Configurez le modele dans la section Template ou via le parametre barmode.

Integration API uniquement (premiere couche personnalisee)

Si vous souhaitez creer votre propre banniere et utiliser UniConsent uniquement pour le stockage du consentement et la conformite, activez le mode API uniquement.

Etape 1 : Activer le mode API uniquement

1. Allez dans Settings > GDPR et activez API-Only Mode (GDPR).
2. Pour le CCPA : Settings > U.S. Privacy et activez API-Only Mode (CCPA).
3. Optionnellement, desactivez Show Privacy Badge.

Le tag CMP continuera de charger en arriere-plan.

Etape 2 : Creer votre propre banniere

<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;">Nous utilisons des cookies et des technologies similaires.</p>
    <div>
      <button onclick="__unicapi('openOptions')">Preferences</button>
      <button onclick="__unicapi('openCookiesList')">Liste des cookies</button>
      <button onclick="__unicapi('rejectAll')">Tout refuser</button>
      <button onclick="__unicapi('agreeAll')">Tout accepter</button>
    </div>
  </div>
</div>

Etape 3 : Afficher ou masquer selon le statut du consentement

<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>

Methodes API disponibles

Reference complete de l'API JavaScript.

Compatibilite CSS

Les regles CSS existantes sur votre page ciblant les selecteurs de classe .unic sont automatiquement appliquees a la banniere.

Conseils

• Utilisez !important pour remplacer les styles par defaut.
• Testez en mode apercu : ?uniconsent_test=1&uniconsent_reset=1
• Les modifications CSS prennent effet apres la publication de votre projet.