Bannière de consentement (Cookies)

Composant réglementaire permettant de recueillir le consentement de l’utilisateur pour les cookies et traceurs, conformément à la réglementation en vigueur.

Bannière de consentement

La bannière s’affiche en pied de page jusqu’à ce qu’un choix soit enregistré. Pour la documentation, l’aperçu ci-dessous utilise un positionnement relatif afin de rester visible dans le flux de la page.

Gestion des cookies

Ce site utilise des cookies pour améliorer votre expérience de navigation, mesurer l’audience du site et vous proposer des contenus adaptés. En cliquant sur « Tout accepter », vous acceptez l’utilisation de l’ensemble des cookies. Vous pouvez également personnaliser vos choix en cliquant sur « Personnaliser ». 

<div style="position: relative; background: var(--bj-bg-alt); padding: var(--bj-spacing-4v); border-radius: var(--bj-radius-sm);">
  <div class="bj-consent-banner" data-bj-consent-banner style="position: relative; display: block; box-shadow: var(--bj-shadow-lg); border-top: 2px solid var(--bj-action-high);">
    <div class="bj-consent-banner__body">
      <div class="bj-consent-banner__header">
        <div class="bj-consent-banner__icon"><i class="ri-shield-check-line"></i></div>
        <h2 class="bj-consent-banner__title">Gestion des cookies</h2>
      </div>
      <p class="bj-consent-banner__text">…</p>
      <div class="bj-consent-banner__actions">
        <button type="button" class="bj-btn" data-bj-consent-accept>Tout accepter</button>
        <button type="button" class="bj-btn bj-btn--secondary" data-bj-consent-refuse>Tout refuser</button>
        <button type="button" class="bj-btn bj-btn--tertiary" data-bj-consent-customize data-bj-modal-open="id-modale-consentement">Personnaliser</button>
      </div>
    </div>
  </div>
</div>

Modale de personnalisation

La personnalisation repose sur la structure bj-consent-manager et des lignes bj-consent-service, chacune associée à un interrupteur bj-toggle. En production, le gestionnaire est généralement rendu dans un overlay plein écran ; ici il est centré pour l’aperçu.

Personnaliser les cookies

Cookies essentiels

Nécessaires au fonctionnement du site. Toujours actifs.

Mesure d'audience

Nous permettent de mesurer la fréquentation du site pour en améliorer les performances.

Réseaux sociaux

Permettent le partage de contenus sur les réseaux sociaux et l’affichage de publications. 

<div class="bj-consent-manager" id="id-modale-consentement" role="dialog" aria-modal="true" aria-labelledby="consent-manager-title" style="display: flex">
  <div class="bj-consent-manager__dialog">
    <div class="bj-consent-manager__header">
      <h2 class="bj-consent-manager__title" id="consent-manager-title">Personnaliser les cookies</h2>
      <button type="button" class="bj-btn bj-btn--tertiary bj-btn--sm" data-bj-modal-close aria-label="Fermer">
        <i class="ri-close-line" aria-hidden="true"></i>
      </button>
    </div>
    <div class="bj-consent-manager__body">
      <div class="bj-consent-service">
        <div class="bj-consent-service__info">
          <p class="bj-consent-service__name">Cookies essentiels</p>
          <p class="bj-consent-service__desc">Nécessaires au fonctionnement du site. Toujours actifs.</p>
        </div>
        <div class="bj-consent-service__toggle">
          <label class="bj-toggle">
            <input type="checkbox" class="bj-toggle__input" checked disabled>
            <span class="bj-toggle__slider"></span>
          </label>
        </div>
      </div>
      <!-- autres services -->
    </div>
    <div class="bj-consent-manager__footer">
      <button type="button" class="bj-btn bj-btn--secondary">Tout refuser</button>
      <button type="button" class="bj-btn">Confirmer mes choix</button>
    </div>
  </div>
</div>

Liste de services (exemple)

En personnalisation, chaque traceur ou famille de cookies est une ligne bj-consent-service avec nom, description courte et bj-toggle . Réutilisez le bloc suivant pour rester aligné avec le DSBJ.

Cookies strictement nécessaires

Sécurité, session et préférences légales. Toujours actifs.

Mesure d’audience

Statistiques anonymisées pour améliorer les contenus publics.

Personnalisation

Mémorise la langue, le thème ou le contexte d’affichage.

Réseaux sociaux & partage

Lecteurs intégrés et boutons de partage fournis par des tiers. 

<div class="bj-consent-manager__body">
  <div class="bj-consent-service">
    <div class="bj-consent-service__info">
      <p class="bj-consent-service__name">Strictly necessary</p>
      <p class="bj-consent-service__desc">Required for security and basic features. Always on.</p>
    </div>
    <div class="bj-consent-service__toggle">
      <label class="bj-toggle">
        <input type="checkbox" class="bj-toggle__input" checked disabled />
        <span class="bj-toggle__slider"></span>
      </label>
    </div>
  </div>
  <div class="bj-consent-service">
    <div class="bj-consent-service__info">
      <p class="bj-consent-service__name">Audience measurement</p>
      <p class="bj-consent-service__desc">Anonymous statistics to improve content.</p>
    </div>
    <div class="bj-consent-service__toggle">
      <label class="bj-toggle">
        <input type="checkbox" class="bj-toggle__input" />
        <span class="bj-toggle__slider"></span>
      </label>
    </div>
  </div>
  <div class="bj-consent-service">
    <div class="bj-consent-service__info">
      <p class="bj-consent-service__name">Personalization</p>
      <p class="bj-consent-service__desc">Remember preferences and contextual content.</p>
    </div>
    <div class="bj-consent-service__toggle">
      <label class="bj-toggle">
        <input type="checkbox" class="bj-toggle__input" />
        <span class="bj-toggle__slider"></span>
      </label>
    </div>
  </div>
  <div class="bj-consent-service">
    <div class="bj-consent-service__info">
      <p class="bj-consent-service__name">Social &amp; sharing</p>
      <p class="bj-consent-service__desc">Embeds and share buttons from third-party platforms.</p>
    </div>
    <div class="bj-consent-service__toggle">
      <label class="bj-toggle">
        <input type="checkbox" class="bj-toggle__input" />
        <span class="bj-toggle__slider"></span>
      </label>
    </div>
  </div>
</div>

Classes CSS

ClasseDescription
bj-consent-bannerBannière fixée en bas de page
bj-consent-banner__bodyCorps de la bannière
bj-consent-banner__headerEn-tête avec icône et titre
bj-consent-banner__iconIcône de la bannière
bj-consent-banner__titleTitre de la bannière
bj-consent-banner__textTexte explicatif
bj-consent-banner__actionsConteneur des boutons d’action
bj-consent-managerModale de personnalisation (overlay)
bj-consent-manager__dialogBoîte de dialogue
bj-consent-manager__headerEn-tête de la modale
bj-consent-manager__bodyCorps scrollable
bj-consent-manager__footerPied avec boutons
bj-consent-serviceLigne de service
bj-consent-service__infoInformations du service
bj-consent-service__nameNom du service
bj-consent-service__descDescription du service
bj-consent-service__toggleInterrupteur du service
bj-toggle / bj-toggle__inputInterrupteur sur chaque ligne de service (voir composant Toggle).

Attributs JavaScript

AttributDescription
data-bj-consent-bannerSur l’élément bannière
data-bj-consent-acceptSur le bouton « Tout accepter »
data-bj-consent-refuseSur le bouton « Tout refuser »
data-bj-consent-customizeSur le bouton « Personnaliser » : associer data-bj-modal-open à l’id du gestionnaire (bj-consent-manager) si ouverture via modale DSBJ.
data-bj-expandedRend la bannière visible (utile pour forcer l’affichage en démo ou après rechargement)

Accessibilité

La modale de personnalisation implémente un piège de focus : la tabulation reste à l’intérieur du dialogue tant qu’il est ouvert. La touche Échap ferme la modale lorsque le script DSBJ est actif. Les préférences par service utilisent des cases à cocher natives à l’intérieur d’un label , ce qui préserve une association explicite entre le libellé et le contrôle. Les choix de consentement sont persistés dans localStorage sous la clé bj-consent (clé utilisée par la bannière de démonstration du site docs).