Agreely Docs
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. Le concepteur enregistre un brouillon : rien n'est servi aux visiteurs tant que vous ne publiez pas.

La publication

La publication se fait en un seul endroit, la page votre site > Publication. Elle montre l'état de service de la bannière, ce que la nouvelle version couvrira et ce qui change par rapport à la version servie, puis publie. 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.

La publication est refusée tant que :

  • le site n'est pas vérifié, ou la version ne servirait rien (aucune finalité non essentielle à présenter) ;
  • il reste des témoins « à vérifier » dans l'inventaire (voir Inventaire et catégorisation) ;
  • le site utilise des témoins non essentiels et la bannière ne porte aucun lien valide vers votre politique de confidentialité : la loi exige de publier et de diffuser cette politique (P-39.1, art. 8.2 ; A-2.1, art. 63.4) ;
  • les couleurs n'atteignent pas un contraste de 4,5:1 ;
  • pour la toute première publication d'un site, votre clé de signature n'est pas encore autorisée par la clé d'accès racine de votre entreprise (sous Paramètres > Clé d'accès racine).

Options disponibles

L'image de marque (logo et couleurs) s'applique aux sites qui occupent une place payante (15 $/mois par site). Un site resté sur l'ancien palier gratuit Découverte garde les couleurs et le logo d'Agreely, avec la mention « Propulsé par Agreely » (voir la tarification). Le bouton « Personnaliser » offert au visiteur pour ses choix de consentement existe, lui, sur tous les sites.

Téléversez le logo du site : PNG, JPEG ou WebP, au plus 2 Mo. L'image est recadrée en carré et réencodée automatiquement (les métadonnées sont retirées). Les fichiers SVG ne sont pas acceptés. Le logo est servi par cdn.agreely.ca/e/v1/logo/{clé}. Sans logo propre au site, la bannière affiche le logo de votre entreprise, ou à défaut l'emblème d'Agreely.

Couleur d'arrière-plan et couleur d'accent

Deux couleurs définissent la palette : la couleur d'arrière-plan de la bannière et la couleur d'accent du bouton d'acceptation. Le moteur de thème en dérive le reste (textes, états de survol) en visant un contraste d'au moins 4,5:1 (WCAG 2.2 AA). Une paire dont l'accent n'atteint pas 4,5:1 sur l'arrière-plan est refusée à l'enregistrement comme à la publication, avec un message qui vous invite à choisir une couleur plus foncée ou plus claire.

Les trois actions principales (Tout accepter / Tout refuser / Personnaliser) sont toujours de poids visuel identique : même taille, même style de bouton. C'est un choix de conception d'Agreely : la loi exige un consentement libre et éclairé (P-39.1, art. 14 al. 1 ; A-2.1, art. 53.1 al. 1), et une bannière qui rend le refus plus difficile que l'acceptation peut compromettre ce caractère libre.

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

Arrondi des coins

Cinq niveaux, d'Aucun à Maximal, règlent la rondeur de la carte ; les boutons suivent pour que l'ensemble reste cohérent.

Bouton flottant « Gérer mes témoins »

Après sa décision, la personne retrouve un bouton flottant qui rouvre ses préférences. Il est actif par défaut. Ne le désactivez que si votre page expose déjà un déclencheur bien visible portant l'attribut data-agreely-preferences (voir Installation) : la personne doit être informée de son droit de retirer son consentement (P-39.1, art. 8 al. 1 (4°)) ou, pour un organisme public, des conséquences d'un retrait (A-2.1, art. 65 al. 1 (5°)). Si aucun déclencheur n'est détecté, la bannière affiche un bouton de secours.

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. Dès que votre site utilise des témoins non essentiels, au moins un lien valide est exigé pour publier.

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 léger (environ 3 Ko compressé) ; 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 Découverte : marque Agreely

Sur un site resté au palier gratuit Découverte (offre retirée pour les nouveaux sites), 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 qui occupent une place payante (15 $/mois par site) utilisent votre logo et vos couleurs, sans cette mention.