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="village-consent-banner">
    <h2 class="village-h6">À propos des cookies sur nomdusite.fr</h2>
    <div class="village-consent-banner__content">
        <p class="village-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="village-consent-banner__buttons village-btns-group village-btns-group--right village-btns-group--inline-reverse village-btns-group--inline-sm">
        <li>
            <button class="village-btn" id="button-4331" title="Autoriser tous les cookies">
                Tout accepter
            </button>
        </li>
        <li>
            <button class="village-btn" id="button-4332" title="Refuser tous les cookies">
                Tout refuser
            </button>
        </li>
        <li>
            <button class="village-btn village-btn--secondary" data-village-opened="false" aria-controls="village-consent-modal" id="button-4333" title="Personnaliser les cookies">
                Personnaliser
            </button>
        </li>
    </ul>
</div>

Panneau de gestion des cookies

Panneau de gestion des cookies

<dialog id="village-consent-modal" class="village-modal" aria-labelledby="village-consent-modal-title">
    <div class="village-container village-container--fluid village-container-md">
        <div class="village-grid-row village-grid-row--center">
            <div class="village-col-12 village-col-md-10 village-col-lg-8">
                <div class="village-modal__body">
                    <div class="village-modal__header">
                        <button class="village-btn--close village-btn" aria-controls="village-consent-modal" id="button-4338" title="Fermer">
                            Fermer
                        </button>
                    </div>
                    <div class="village-modal__content">
                        <h1 id="village-consent-modal-title" class="village-modal__title">
                            Panneau de gestion des cookies
                        </h1>
                        <div class="village-consent-manager">
                            <!-- Finalités -->
                            <div class="village-consent-service village-consent-manager__header">
                                <fieldset class="village-fieldset">
                                    <legend id="finality-legend" class="village-consent-service__title">Préférences pour tous les services. <a href="">Données personnelles et cookies</a>
                                    </legend>
                                    <div class="village-consent-service__radios">
                                        <div class="village-radio-group">
                                            <input type="radio" id="consent-all-accept" name="consent-all">
                                            <label class="village-label" for="consent-all-accept">
                                                Tout accepter
                                            </label>
                                        </div>
                                        <div class="village-radio-group">
                                            <input type="radio" id="consent-all-refuse" name="consent-all">
                                            <label class="village-label" for="consent-all-refuse">
                                                Tout refuser
                                            </label>
                                        </div>
                                    </div>
                                </fieldset>
                            </div>
                            <div class="village-consent-service">
                                <fieldset aria-labelledby="finality-0-legend finality-0-desc" role="group" class="village-fieldset">
                                    <legend id="finality-0-legend" class="village-consent-service__title">Cookies obligatoires</legend>
                                    <div class="village-consent-service__radios">
                                        <div class="village-radio-group">
                                            <input checked type="radio" id="consent-finality-0-accept" name="consent-finality-0">
                                            <label class="village-label" for="consent-finality-0-accept">
                                                Accepter
                                            </label>
                                        </div>
                                        <div class="village-radio-group">
                                            <input disabled type="radio" id="consent-finality-0-refuse" name="consent-finality-0">
                                            <label class="village-label" for="consent-finality-0-refuse">
                                                Refuser
                                            </label>
                                        </div>
                                    </div>
                                    <p id="finality-0-desc" class="village-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="village-consent-service">
                                <fieldset aria-labelledby="finality-1-legend finality-1-desc" role="group" class="village-fieldset">
                                    <legend id="finality-1-legend" class="village-consent-service__title">Nom de la finalité</legend>
                                    <div class="village-consent-service__radios">
                                        <div class="village-radio-group">
                                            <input type="radio" id="consent-finality-1-accept" name="consent-finality-1">
                                            <label class="village-label" for="consent-finality-1-accept">
                                                Accepter
                                            </label>
                                        </div>
                                        <div class="village-radio-group">
                                            <input type="radio" id="consent-finality-1-refuse" name="consent-finality-1">
                                            <label class="village-label" for="consent-finality-1-refuse">
                                                Refuser
                                            </label>
                                        </div>
                                    </div>
                                    <p id="finality-1-desc" class="village-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="village-consent-service__collapse">
                                        <button class="village-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="village-consent-services village-collapse" id="finality-1-collapse">
                                        <!-- Sous finalités -->
                                        <div class="village-consent-service">
                                            <fieldset class="village-fieldset village-fieldset--inline">
                                                <legend id="finality-1-service-1-legend" class="village-consent-service__title">Sous finalité 1</legend>
                                                <div class="village-consent-service__radios village-fieldset--inline">
                                                    <div class="village-radio-group">
                                                        <input type="radio" id="consent-finality-1-service-1-accept" name="consent-finality-1-service-1">
                                                        <label class="village-label" for="consent-finality-1-service-1-accept">
                                                            Accepter
                                                        </label>
                                                    </div>
                                                    <div class="village-radio-group">
                                                        <input type="radio" id="consent-finality-1-service-1-refuse" name="consent-finality-1-service-1">
                                                        <label class="village-label" for="consent-finality-1-service-1-refuse">
                                                            Refuser
                                                        </label>
                                                    </div>
                                                </div>
                                            </fieldset>
                                        </div>
                                        <div class="village-consent-service">
                                            <fieldset aria-labelledby="finality-1-service-2-legend finality-1-service-2-desc" role="group" class="village-fieldset village-fieldset--inline">
                                                <legend id="finality-1-service-2-legend" class="village-consent-service__title" aria-describedby="finality-1-service-2-desc">Sous finalité 2</legend>
                                                <div class="village-consent-service__radios village-fieldset--inline">
                                                    <div class="village-radio-group">
                                                        <input type="radio" id="consent-finality-1-service-2-accept" name="consent-finality-1-service-2">
                                                        <label class="village-label" for="consent-finality-1-service-2-accept">
                                                            Accepter
                                                        </label>
                                                    </div>
                                                    <div class="village-radio-group">
                                                        <input type="radio" id="consent-finality-1-service-2-refuse" name="consent-finality-1-service-2">
                                                        <label class="village-label" for="consent-finality-1-service-2-refuse">
                                                            Refuser
                                                        </label>
                                                    </div>
                                                </div>
                                                <p id="finality-1-service-2-desc" class="village-consent-service__desc">Ce service utilise 3 cookies.</p>
                                            </fieldset>
                                        </div>
                                        <div class="village-consent-service">
                                            <fieldset class="village-fieldset village-fieldset--inline">
                                                <legend id="finality-1-service-3-legend" class="village-consent-service__title">Sous finalité 3</legend>
                                                <div class="village-consent-service__radios village-fieldset--inline">
                                                    <div class="village-radio-group">
                                                        <input type="radio" id="consent-finality-1-service-3-accept" name="consent-finality-1-service-3">
                                                        <label class="village-label" for="consent-finality-1-service-3-accept">
                                                            Accepter
                                                        </label>
                                                    </div>
                                                    <div class="village-radio-group">
                                                        <input type="radio" id="consent-finality-1-service-3-refuse" name="consent-finality-1-service-3">
                                                        <label class="village-label" for="consent-finality-1-service-3-refuse">
                                                            Refuser
                                                        </label>
                                                    </div>
                                                </div>
                                            </fieldset>
                                        </div>
                                    </div>
                                </fieldset>
                            </div>
                            <div class="village-consent-service">
                                <fieldset aria-labelledby="finality-2-legend finality-2-desc" role="group" class="village-fieldset">
                                    <legend id="finality-2-legend" class="village-consent-service__title">Nom de la finalité</legend>
                                    <div class="village-consent-service__radios">
                                        <div class="village-radio-group">
                                            <input type="radio" id="consent-finality-2-accept" name="consent-finality-2">
                                            <label class="village-label" for="consent-finality-2-accept">
                                                Accepter
                                            </label>
                                        </div>
                                        <div class="village-radio-group">
                                            <input type="radio" id="consent-finality-2-refuse" name="consent-finality-2">
                                            <label class="village-label" for="consent-finality-2-refuse">
                                                Refuser
                                            </label>
                                        </div>
                                    </div>
                                    <p id="finality-2-desc" class="village-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="village-consent-service__collapse">
                                        <button class="village-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="village-consent-services village-collapse" id="finality-2-collapse">
                                        <!-- Sous finalités -->
                                        <div class="village-consent-service">
                                            <fieldset class="village-fieldset village-fieldset--inline">
                                                <legend id="finality-2-service-1-legend" class="village-consent-service__title">Sous finalité 1</legend>
                                                <div class="village-consent-service__radios village-fieldset--inline">
                                                    <div class="village-radio-group">
                                                        <input type="radio" id="consent-finality-2-service-1-accept" name="consent-finality-2-service-1">
                                                        <label class="village-label" for="consent-finality-2-service-1-accept">
                                                            Accepter
                                                        </label>
                                                    </div>
                                                    <div class="village-radio-group">
                                                        <input type="radio" id="consent-finality-2-service-1-refuse" name="consent-finality-2-service-1">
                                                        <label class="village-label" for="consent-finality-2-service-1-refuse">
                                                            Refuser
                                                        </label>
                                                    </div>
                                                </div>
                                            </fieldset>
                                        </div>
                                        <div class="village-consent-service">
                                            <fieldset aria-labelledby="finality-2-service-2-legend finality-2-service-2-desc" role="group" class="village-fieldset village-fieldset--inline">
                                                <legend id="finality-2-service-2-legend" class="village-consent-service__title" aria-describedby="finality-2-service-2-desc">Sous finalité 2</legend>
                                                <div class="village-consent-service__radios village-fieldset--inline">
                                                    <div class="village-radio-group">
                                                        <input type="radio" id="consent-finality-2-service-2-accept" name="consent-finality-2-service-2">
                                                        <label class="village-label" for="consent-finality-2-service-2-accept">
                                                            Accepter
                                                        </label>
                                                    </div>
                                                    <div class="village-radio-group">
                                                        <input type="radio" id="consent-finality-2-service-2-refuse" name="consent-finality-2-service-2">
                                                        <label class="village-label" for="consent-finality-2-service-2-refuse">
                                                            Refuser
                                                        </label>
                                                    </div>
                                                </div>
                                                <p id="finality-2-service-2-desc" class="village-consent-service__desc">Ce service utilise 3 cookies.</p>
                                            </fieldset>
                                        </div>
                                        <div class="village-consent-service">
                                            <fieldset class="village-fieldset village-fieldset--inline">
                                                <legend id="finality-2-service-3-legend" class="village-consent-service__title">Sous finalité 3</legend>
                                                <div class="village-consent-service__radios village-fieldset--inline">
                                                    <div class="village-radio-group">
                                                        <input type="radio" id="consent-finality-2-service-3-accept" name="consent-finality-2-service-3">
                                                        <label class="village-label" for="consent-finality-2-service-3-accept">
                                                            Accepter
                                                        </label>
                                                    </div>
                                                    <div class="village-radio-group">
                                                        <input type="radio" id="consent-finality-2-service-3-refuse" name="consent-finality-2-service-3">
                                                        <label class="village-label" for="consent-finality-2-service-3-refuse">
                                                            Refuser
                                                        </label>
                                                    </div>
                                                </div>
                                            </fieldset>
                                        </div>
                                    </div>
                                </fieldset>
                            </div>
                            <!-- Bouton de confirmation/fermeture -->
                            <ul class="village-consent-manager__buttons village-btns-group village-btns-group--right village-btns-group--inline-sm">
                                <li>
                                    <button class="village-btn" id="button-4337">
                                        Confirmer mes choix
                                    </button>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</dialog>

Placeholder cookies désactivés standard

<div class="village-consent-placeholder">
    <h4 class="village-h6">**Nom du service** est désactivé</h4>
    <p>Autorisez le dépôt de cookies pour accéder à cette fonctionnalité.</p>
    <button class="village-btn" id="button-4341" 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

Description / Source Label lien

Titre de la transcription

  • list item

<figure role="group" class="village-content-media village-content-media--lg" id="media-4351">
    <div class="village-responsive-vid">
        <div class="village-consent-placeholder">
            <h4 class="village-h6">**Nom du service** est désactivé</h4>
            <p>Autorisez le dépôt de cookies pour accèder à cette fonctionnalité.</p>
            <button class="village-btn" id="button-4353">
                Autoriser
            </button>
        </div>
    </div>
    <figcaption class="village-content-media__caption">
        Description / Source
        <a class="village-link" id="link-4354" href="[url - à modifier]">Label lien</a>
    </figcaption>
    <div class="village-transcription" id="transcription-4352">
        <button class="village-transcription__btn" aria-expanded="false" aria-controls="village-transcription-collapse-transcription-4352">Transcription</button>
        <div class="village-collapse" id="village-transcription-collapse-transcription-4352">
            <div class="village-transcription__footer">
                <div class="village-transcription__actions-group">
                    <button class="village-btn--fullscreen village-btn" aria-controls="village-transcription-modal-transcription-4352" aria-label="Agrandir la transcription" data-village-opened="false" id="button-4356">
                        Agrandir
                    </button>
                </div>
            </div>
            <div id="village-transcription-modal-transcription-4352" class="village-modal" aria-labelledby="village-transcription-modal-transcription-4352-title">
                <div class="village-container village-container--fluid village-container-md">
                    <div class="village-grid-row village-grid-row--center">
                        <div class="village-col-12 village-col-md-10 village-col-lg-8">
                            <div class="village-modal__body">
                                <div class="village-modal__header">
                                    <button class="village-btn--close village-btn" aria-controls="village-transcription-modal-transcription-4352" id="button-4357" title="Fermer">
                                        Fermer
                                    </button>
                                </div>
                                <div class="village-modal__content">
                                    <h1 id="village-transcription-modal-transcription-4352-title" class="village-modal__title">
                                        Titre de la transcription
                                    </h1>
                                    <!-- données de test -->
                                    <div>
                                        <ul>
                                            <li>list item</li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</figure>

Paramètres d’affichage

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