Agreely
FR EN

Le concepteur de bannière

Le concepteur de bannière se trouve dans le tableau de bord Agreely, sous Bannière de témoins (cookies) > votre site > Bannière. Vous y réglez l'apparence, la position, les liens de politique et l'image de marque, avec un aperçu en direct. Les modifications sont publiées en versionnant la configuration ; chaque version est hachée et liée aux enregistrements de consentement, de sorte qu'une preuve indique toujours exactement quelle bannière a été montrée au visiteur.

Publication conditionnelle. La publication d'une bannière est bloquée tant qu'il reste des témoins « à vérifier » dans l'inventaire. Revoyez d'abord l'inventaire (voir Inventaire et catégorisation), puis publiez.

Options disponibles

L'image de marque (logo et couleurs) s'applique aux sites payants (15 $/mois par site). Sur le site gratuit, la bannière reste aux couleurs d'Agreely, avec le logo d'Agreely et la mention "Propulsé par Agreely" (voir la tarification). Le bouton "Personnaliser" offert au visiteur pour ses choix de consentement existe, lui, sur tous les paliers.

Téléchargez le logo de votre organisation (PNG ou SVG recommandé, fonds transparents pris en charge). Le logo est servi par cdn.agreely.ca/e/v1/logo/{clé}. Si aucun logo n'est fourni, la bannière n'affiche que le nom de votre organisation.

Couleur primaire et couleur secondaire

Deux couleurs définissent la palette de la bannière. Le moteur de thème calcule automatiquement les dérivés de couleur (arrière-plan, bordures, états de survol, etc.) et applique une contrainte de contraste d'au moins 4,5:1 (WCAG 2.2 AA). Si le contraste calculé est insuffisant, le tableau de bord affiche un avertissement et ajuste la teinte pour rester lisible.

Les trois actions principales (Tout accepter / Tout refuser / Personnaliser) sont toujours de poids visuel identique : même taille, même style de bouton. La Loi 25 (article 14) exige que le refus soit aussi facile que l'acceptation.

Position

Valeur Description
bottom-right (défaut) Carte en bas à droite
bottom Barre en bas de la fenêtre (pleine largeur)
bottom-left Carte en bas à gauche
top Barre en haut de la fenêtre
center Modale centrée

Un nouveau site démarre en bas à droite (bottom-right). La bannière utilise position: fixed et ne déplace pas le contenu de la page (aucun cumul de décalage de mise en page - CLS nul).

Sélecteur de langue FR|EN en direct

La bannière ne se contente pas d'être bilingue : elle affiche un sélecteur FR|EN que le visiteur peut basculer en direct. Depuis la version 1.3.5 du client, la bannière embarque déjà les deux langues (aucun téléchargement supplémentaire), détecte automatiquement l'attribut lang de votre page (<html lang="fr"> ou <html lang="en">), puis retombe sur la langue par défaut du site, puis sur le français.

Le visiteur peut basculer FR ⇄ EN à tout moment, à la fois sur la bannière principale et dans la couche de préférences. La bascule ne change que le texte affiché : elle ne modifie jamais les choix par finalité du visiteur ni le consentement enregistré. Le concepteur offre le même aperçu FR|EN pour prévisualiser les deux langues sans toucher à la configuration enregistrée.

Liens de politique

Ajoutez un ou plusieurs liens vers votre politique de confidentialité ou votre politique de témoins. Chaque lien porte un libellé français et un libellé anglais. Les URL sont restreintes aux protocoles http et https ; les URL javascript: et data: sont rejetées.

Accessibilité

  • Cibles tactiles d'au moins 24 px (WCAG 2.2 AA, critère 2.5.8).
  • Indicateurs de foyer visibles et contraste >=4,5:1 sur tous les éléments interactifs.
  • La couche de préférences est un vrai dialogue (role="dialog", aria-modal="true") avec piège de foyer, touche Échap et restauration du foyer.
  • La couche 1 (bannière principale) ne bloque ni le défilement ni la navigation.
  • Les décisions sont annoncées via une région dynamique (role="status").
  • L'animation est désactivée si prefers-reduced-motion: reduce est actif.
  • Toutes les chaînes d'interface sont bilingues (français / anglais). La langue initiale est déterminée par l'attribut lang de la page, puis par la langue par défaut du site ; un sélecteur FR|EN laisse ensuite le visiteur basculer en direct.

Référencement (SEO)

  • Le chargeur s'exécute de façon synchrone, mais il est minuscule (environ 0,7 Ko) ; le module de la bannière se charge de façon asynchrone et ne bloque pas le rendu de la page.
  • La bannière est en position: fixed ; elle ne masque pas le contenu indexable.
  • Aucune technique de cloaking : Googlebot reçoit la page non altérée, sans gating de contenu.

Palier gratuit : marque Agreely

Sur le palier gratuit de la bannière seule, la bannière est servie aux couleurs d'Agreely, avec le logo d'Agreely, et la mention "Propulsé par Agreely" / "Powered by Agreely" est affichée dans la bannière à l'intérieur de la racine fantôme (Shadow DOM). La racine fantôme est en mode open : elle isole la bannière du CSS de votre page, de sorte que le CSS de la page ne peut pas masquer la mention, et aucun paramètre de personnalisation ne la supprime - elle est contrôlée par votre palier, pas par un paramètre. (Le mode open reste accessible au JavaScript de la page ; nous ne prétendons donc pas à une isolation absolue, seulement à une isolation vis-à-vis du CSS.) Les sites payants (15 $/mois par site) utilisent votre logo et vos couleurs, sans cette mention.