Agreely
FR EN

Personnalisation

La personnalisation de la bannière se fait dans le tableau de bord Agreely, sous Témoins (cookies) > votre site > Bannière. Les modifications sont publiées en versionnant la configuration ; chaque version est hachée et liée aux enregistrements de consentement.

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 (défaut) Barre ou carte en bas de la fenêtre
bottom-left Carte en bas à gauche
bottom-right Carte en bas à droite
top Barre en haut de la fenêtre
center Modal centrée

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

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), déterminée par l'attribut lang de la page puis par la langue par défaut du site.

Référencement (SEO)

  • Le script est async : il 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). Cette mention ne peut pas être masquée par le CSS de la page et n'est supprimée par aucun paramètre de personnalisation - elle est contrôlée par votre palier, pas par un paramètre. Les sites payants (15 $/mois par site) utilisent votre logo et vos couleurs, sans cette mention.