Retour

Gestionnaire de consentement (consent)

Le gestionnaire de consentement permet à l'utilisateur de définir ses préférences sur l'utilisation de ses données personnelles.

Documentation

Gestionnaire de consentement

<div class="fr-consent-banner">
    <h2 class="fr-h6">À propos des cookies sur nomdusite.fr</h2>
    <div class="fr-consent-banner__content">
        <p class="fr-text--sm">Bienvenue ! Nous utilisons des cookies pour améliorer votre expérience et les services disponibles sur ce site. Pour en savoir plus, visitez la page <a href="">Données personnelles et cookies</a>. Vous pouvez, à tout moment, avoir le contrôle sur les cookies que vous souhaitez activer.</p>
    </div>
    <ul class="fr-consent-banner__buttons fr-btns-group fr-btns-group--right fr-btns-group--inline-reverse fr-btns-group--inline-sm">
        <li>
            <button class="fr-btn" title="Autoriser tous les cookies">
                Tout accepter
            </button>
        </li>
        <li>
            <button class="fr-btn" title="Refuser tous les cookies">
                Tout refuser
            </button>
        </li>
        <li>
            <button class="fr-btn fr-btn--secondary" data-fr-opened="false" aria-controls="fr-consent-modal" title="Personnaliser les cookies">
                Personnaliser
            </button>
        </li>
    </ul>
</div>

Panneau de gestion des cookies

Panneau de gestion des cookies

<dialog id="fr-consent-modal" class="fr-modal" role="dialog" aria-labelledby="fr-consent-modal-title">
    <div class="fr-container fr-container--fluid fr-container-md">
        <div class="fr-grid-row fr-grid-row--center">
            <div class="fr-col-12 fr-col-md-10 fr-col-lg-8">
                <div class="fr-modal__body">
                    <div class="fr-modal__header">
                        <button class="fr-link--close fr-link" aria-controls="fr-consent-modal">Fermer</button>
                    </div>
                    <div class="fr-modal__content">
                        <h1 id="fr-consent-modal-title" class="fr-modal__title">
                            Panneau de gestion des cookies
                        </h1>
                        <div class="fr-consent-manager">
                            <!-- Finalités -->
                            <div class="fr-consent-service fr-consent-manager__header">
                                <fieldset class="fr-fieldset fr-fieldset--inline">
                                    <legend id="finality-legend" class="fr-consent-service__title">Préférences pour tous les services. <a href="">Données personnelles et cookies</a>
                                    </legend>
                                    <div class="fr-consent-service__radios">
                                        <div class="fr-radio-group">
                                            <input type="radio" id="consent-all-accept" name="consent-all">
                                            <label class="fr-label" for="consent-all-accept">
                                                Tout accepter
                                            </label>
                                        </div>
                                        <div class="fr-radio-group">
                                            <input type="radio" id="consent-all-refuse" name="consent-all">
                                            <label class="fr-label" for="consent-all-refuse">
                                                Tout refuser
                                            </label>
                                        </div>
                                    </div>
                                </fieldset>
                            </div>
                            <div class="fr-consent-service">
                                <fieldset aria-labelledby="finality-0-legend finality-0-desc" role="group" class="fr-fieldset fr-fieldset--inline">
                                    <legend id="finality-0-legend" class="fr-consent-service__title">Cookies obligatoires</legend>
                                    <div class="fr-consent-service__radios">
                                        <div class="fr-radio-group">
                                            <input type="radio" id="consent-finality-0-accept" name="consent-finality-0">
                                            <label class="fr-label" for="consent-finality-0-accept">
                                                Accepter
                                            </label>
                                        </div>
                                        <div class="fr-radio-group">
                                            <input disabled type="radio" id="consent-finality-0-refuse" name="consent-finality-0">
                                            <label class="fr-label" for="consent-finality-0-refuse">
                                                Refuser
                                            </label>
                                        </div>
                                    </div>
                                    <p id="finality-0-desc" class="fr-consent-service__desc">Ce site utilise des cookies nécessaires à son bon fonctionnement qui ne peuvent pas être désactivés.</p>
                                </fieldset>
                            </div>
                            <div class="fr-consent-service">
                                <fieldset aria-labelledby="finality-1-legend finality-1-desc" role="group" class="fr-fieldset fr-fieldset--inline">
                                    <legend id="finality-1-legend" class="fr-consent-service__title">Nom de la finalité</legend>
                                    <div class="fr-consent-service__radios">
                                        <div class="fr-radio-group">
                                            <input type="radio" id="consent-finality-1-accept" name="consent-finality-1">
                                            <label class="fr-label" for="consent-finality-1-accept">
                                                Accepter
                                            </label>
                                        </div>
                                        <div class="fr-radio-group">
                                            <input type="radio" id="consent-finality-1-refuse" name="consent-finality-1">
                                            <label class="fr-label" for="consent-finality-1-refuse">
                                                Refuser
                                            </label>
                                        </div>
                                    </div>
                                    <p id="finality-1-desc" class="fr-consent-service__desc">Description optionnelle de la finalité, lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi in suscipit nulla, et pulvinar velit.</p>
                                    <div class="fr-consent-service__collapse">
                                        <button class="fr-consent-service__collapse-btn" aria-expanded="false" aria-describedby="finality-1-legend" aria-controls="finality-1-collapse"> Voir plus de détails</button>
                                    </div>
                                    <div class="fr-consent-services fr-collapse" id="finality-1-collapse">
                                        <!-- Sous finalités -->
                                        <div class="fr-consent-service">
                                            <fieldset class="fr-fieldset fr-fieldset--inline">
                                                <legend id="finality-1-service-1-legend" class="fr-consent-service__title">Sous finalité 1</legend>
                                                <div class="fr-consent-service__radios fr-fieldset--inline">
                                                    <div class="fr-radio-group">
                                                        <input type="radio" id="consent-finality-1-service-1-accept" name="consent-finality-1-service-1">
                                                        <label class="fr-label" for="consent-finality-1-service-1-accept">
                                                            Accepter
                                                        </label>
                                                    </div>
                                                    <div class="fr-radio-group">
                                                        <input type="radio" id="consent-finality-1-service-1-refuse" name="consent-finality-1-service-1">
                                                        <label class="fr-label" for="consent-finality-1-service-1-refuse">
                                                            Refuser
                                                        </label>
                                                    </div>
                                                </div>
                                            </fieldset>
                                        </div>
                                        <div class="fr-consent-service">
                                            <fieldset aria-labelledby="finality-1-service-2-legend finality-1-service-2-desc" role="group" class="fr-fieldset fr-fieldset--inline">
                                                <legend id="finality-1-service-2-legend" class="fr-consent-service__title" aria-describedby="finality-1-service-2-desc">Sous finalité 2</legend>
                                                <div class="fr-consent-service__radios fr-fieldset--inline">
                                                    <div class="fr-radio-group">
                                                        <input type="radio" id="consent-finality-1-service-2-accept" name="consent-finality-1-service-2">
                                                        <label class="fr-label" for="consent-finality-1-service-2-accept">
                                                            Accepter
                                                        </label>
                                                    </div>
                                                    <div class="fr-radio-group">
                                                        <input type="radio" id="consent-finality-1-service-2-refuse" name="consent-finality-1-service-2">
                                                        <label class="fr-label" for="consent-finality-1-service-2-refuse">
                                                            Refuser
                                                        </label>
                                                    </div>
                                                </div>
                                                <p id="finality-1-service-2-desc" class="fr-consent-service__desc">Ce service utilise 3 cookies.</p>
                                            </fieldset>
                                        </div>
                                        <div class="fr-consent-service">
                                            <fieldset class="fr-fieldset fr-fieldset--inline">
                                                <legend id="finality-1-service-3-legend" class="fr-consent-service__title">Sous finalité 3</legend>
                                                <div class="fr-consent-service__radios fr-fieldset--inline">
                                                    <div class="fr-radio-group">
                                                        <input type="radio" id="consent-finality-1-service-3-accept" name="consent-finality-1-service-3">
                                                        <label class="fr-label" for="consent-finality-1-service-3-accept">
                                                            Accepter
                                                        </label>
                                                    </div>
                                                    <div class="fr-radio-group">
                                                        <input type="radio" id="consent-finality-1-service-3-refuse" name="consent-finality-1-service-3">
                                                        <label class="fr-label" for="consent-finality-1-service-3-refuse">
                                                            Refuser
                                                        </label>
                                                    </div>
                                                </div>
                                            </fieldset>
                                        </div>
                                    </div>
                                </fieldset>
                            </div>
                            <div class="fr-consent-service">
                                <fieldset aria-labelledby="finality-2-legend finality-2-desc" role="group" class="fr-fieldset fr-fieldset--inline">
                                    <legend id="finality-2-legend" class="fr-consent-service__title">Nom de la finalité</legend>
                                    <div class="fr-consent-service__radios">
                                        <div class="fr-radio-group">
                                            <input type="radio" id="consent-finality-2-accept" name="consent-finality-2">
                                            <label class="fr-label" for="consent-finality-2-accept">
                                                Accepter
                                            </label>
                                        </div>
                                        <div class="fr-radio-group">
                                            <input type="radio" id="consent-finality-2-refuse" name="consent-finality-2">
                                            <label class="fr-label" for="consent-finality-2-refuse">
                                                Refuser
                                            </label>
                                        </div>
                                    </div>
                                    <p id="finality-2-desc" class="fr-consent-service__desc">Description optionnelle de la finalité, lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi in suscipit nulla, et pulvinar velit.</p>
                                    <div class="fr-consent-service__collapse">
                                        <button class="fr-consent-service__collapse-btn" aria-expanded="false" aria-describedby="finality-2-legend" aria-controls="finality-2-collapse"> Voir plus de détails</button>
                                    </div>
                                    <div class="fr-consent-services fr-collapse" id="finality-2-collapse">
                                        <!-- Sous finalités -->
                                        <div class="fr-consent-service">
                                            <fieldset class="fr-fieldset fr-fieldset--inline">
                                                <legend id="finality-2-service-1-legend" class="fr-consent-service__title">Sous finalité 1</legend>
                                                <div class="fr-consent-service__radios fr-fieldset--inline">
                                                    <div class="fr-radio-group">
                                                        <input type="radio" id="consent-finality-2-service-1-accept" name="consent-finality-2-service-1">
                                                        <label class="fr-label" for="consent-finality-2-service-1-accept">
                                                            Accepter
                                                        </label>
                                                    </div>
                                                    <div class="fr-radio-group">
                                                        <input type="radio" id="consent-finality-2-service-1-refuse" name="consent-finality-2-service-1">
                                                        <label class="fr-label" for="consent-finality-2-service-1-refuse">
                                                            Refuser
                                                        </label>
                                                    </div>
                                                </div>
                                            </fieldset>
                                        </div>
                                        <div class="fr-consent-service">
                                            <fieldset aria-labelledby="finality-2-service-2-legend finality-2-service-2-desc" role="group" class="fr-fieldset fr-fieldset--inline">
                                                <legend id="finality-2-service-2-legend" class="fr-consent-service__title" aria-describedby="finality-2-service-2-desc">Sous finalité 2</legend>
                                                <div class="fr-consent-service__radios fr-fieldset--inline">
                                                    <div class="fr-radio-group">
                                                        <input type="radio" id="consent-finality-2-service-2-accept" name="consent-finality-2-service-2">
                                                        <label class="fr-label" for="consent-finality-2-service-2-accept">
                                                            Accepter
                                                        </label>
                                                    </div>
                                                    <div class="fr-radio-group">
                                                        <input type="radio" id="consent-finality-2-service-2-refuse" name="consent-finality-2-service-2">
                                                        <label class="fr-label" for="consent-finality-2-service-2-refuse">
                                                            Refuser
                                                        </label>
                                                    </div>
                                                </div>
                                                <p id="finality-2-service-2-desc" class="fr-consent-service__desc">Ce service utilise 3 cookies.</p>
                                            </fieldset>
                                        </div>
                                        <div class="fr-consent-service">
                                            <fieldset class="fr-fieldset fr-fieldset--inline">
                                                <legend id="finality-2-service-3-legend" class="fr-consent-service__title">Sous finalité 3</legend>
                                                <div class="fr-consent-service__radios fr-fieldset--inline">
                                                    <div class="fr-radio-group">
                                                        <input type="radio" id="consent-finality-2-service-3-accept" name="consent-finality-2-service-3">
                                                        <label class="fr-label" for="consent-finality-2-service-3-accept">
                                                            Accepter
                                                        </label>
                                                    </div>
                                                    <div class="fr-radio-group">
                                                        <input type="radio" id="consent-finality-2-service-3-refuse" name="consent-finality-2-service-3">
                                                        <label class="fr-label" for="consent-finality-2-service-3-refuse">
                                                            Refuser
                                                        </label>
                                                    </div>
                                                </div>
                                            </fieldset>
                                        </div>
                                    </div>
                                </fieldset>
                            </div>
                            <!-- Bouton de confirmation/fermeture -->
                            <ul class="fr-consent-manager__buttons fr-btns-group fr-btns-group--right fr-btns-group--inline-sm">
                                <li>
                                    <button class="fr-btn">
                                        Confirmer mes choix
                                    </button>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</dialog>

Placeholder cookies désactivés standard

<div class="fr-consent-placeholder">
    <p class="fr-h6">**Nom du service** est désactivé</p>
    <p>Autorisez le dépôt de cookies pour accéder à cette fonctionnalité.</p>
    <button class="fr-btn" title="Autorisez le dépôt de cookies pour accéder au service **Nom du service**">
        Autoriser
    </button>
</div>

Placeholder dans un bloc vidéo responsive grande taille

© Légende de la vidéo

<div class="fr-content-media fr-content-media--lg">
    <div class="fr-responsive-vid">
        <div class="fr-consent-placeholder">
            <p class="fr-h6">**Nom du service** est désactivé</p>
            <p>Autorisez le dépôt de cookies pour accèder à cette fonctionnalité.</p>
            <button class="fr-btn">
                Autoriser
            </button>
        </div>
    </div>
    <div class="fr-content-media__caption">© Légende de la vidéo</div>
    <div class="fr-content-media__transcription">
        <a class="fr-link" href="[url - à modifier]">Label du bouton de la transcription</a>
    </div>
</div>

Paramètres d’affichage

Choisissez un thème pour personnaliser l’apparence du site.