Aller au contenu

Langue

Menu de la documentation

Personnalisation du bandeau

Modifiez la mise en page, les couleurs, les textes et les langues de votre bandeau, ajoutez du CSS, un lien vers les préférences et publiez de nouvelles versions.

Dernière mise à jour le 29 octobre 2026

Chaque site dans Cookiesh possède une seule configuration de bandeau. Les règles régionales déterminent quel parcours de consentement voit un visiteur (opt-in, opt-out ou simple information), et la configuration du bandeau détermine son apparence et ses textes. Modifiez-la sous Banners → Appearance et prévisualisez vos changements en direct avant de les publier.

Mises en page

Choisissez la mise en page adaptée à votre site. Chacune existe en thème clair, sombre et automatique ; le thème automatique suit le réglage prefers-color-scheme du visiteur.

Mise en page Idéale pour Comportement
bar Sites marketing Barre pleine largeur en bas de la fenêtre
box Sites de contenu et blogs Carte compacte dans un coin, qui ne masque pas le contenu
modal Applications qui ne doivent rien exécuter avant un choix Boîte de dialogue centrée qui bloque la page jusqu’au choix du visiteur

Toutes les mises en page réservent leur propre espace et se chargent après votre contenu : elles ne provoquent donc aucun décalage de mise en page. Sur les bandeaux opt-in, Tout refuser est toujours affiché au premier niveau, avec la même taille et la même graisse que Tout accepter. Les autorités considèrent un bouton de refus caché comme un dark pattern : ce comportement ne peut donc pas être désactivé.

Couleurs, polices et image de marque

Sous Appearance → Style, définissez :

  • Couleur de marque. Utilisée pour le bouton principal, les interrupteurs et les contours de focus. Cookiesh la compare à l’arrière-plan et vous avertit si le contraste est inférieur au niveau WCAG AA.
  • Police. inherit (par défaut) reprend la police de votre site : le bandeau s’intègre naturellement sans charger de fichiers supplémentaires.
  • Arrondi des angles et ombre, pour respecter votre design system.
  • Logo. Facultatif, affiché dans le centre de préférences.

Avec les offres Pro et Enterprise, vous pouvez aussi retirer le badge « Powered by Cookiesh ».

Textes et traductions

Cookiesh fournit des textes de bandeau relus dans plus de 40 langues. La langue est choisie dans cet ordre :

  1. L’attribut data-language de la balise script, s’il est présent.
  2. L’attribut lang de votre élément <html>.
  3. La langue du navigateur du visiteur.
  4. La langue par défaut définie dans le tableau de bord.
<script
  src="https://sdk.cookiesh.eu/v1/consent.js"
  data-site-id="ck_live_8f2a91"
  data-language="de"
  async
></script>

Pour modifier les textes, ouvrez Appearance → Copy, choisissez une langue et modifiez le titre, le corps du texte et les libellés des boutons. Les modifications ne s’appliquent qu’à cette langue. Restez précis : nommez les finalités (« mesurer l’audience », « afficher des publicités personnalisées ») plutôt que d’écrire « améliorer votre expérience ».

CSS personnalisé

Avec les offres Pro et Enterprise, Appearance → Custom CSS vous permet d’aller au-delà des options intégrées. Le bandeau s’affiche dans un shadow root : les styles de votre site ne peuvent pas le casser, et ses styles ne peuvent pas déborder sur votre site. Stylisez-le avec les propriétés personnalisées CSS et les noms ::part() exposés :

cookiesh-banner {
  --ck-color-primary: #4f46e5;
  --ck-color-background: #0a0b10;
  --ck-color-text: #ededf2;
  --ck-radius: 12px;
  --ck-font-family: inherit;
}

cookiesh-banner::part(button-primary) {
  text-transform: none;
  letter-spacing: 0;
}

cookiesh-banner::part(title) {
  font-weight: 600;
}

Parties disponibles : container, title, body, button-primary, button-secondary, link, toggle et category.

Lien vers les préférences

Les visiteurs doivent pouvoir changer d’avis aussi facilement qu’ils ont donné leur consentement. Ajoutez dans votre pied de page un lien qui rouvre le centre de préférences. Tout élément doté de data-cookiesh-open fonctionne :

<button type="button" data-cookiesh-open="preferences">Paramètres de confidentialité</button>

Vous pouvez aussi appeler cookiesh.openPreferences() depuis votre propre code (voir l’API JavaScript). Si vous préférez ne pas ajouter de lien, activez le bouton flottant de confidentialité sous Appearance → Floating button.

Publication et versions du bandeau

Les modifications restent à l’état de brouillon jusqu’à ce que vous cliquiez sur Publish. Chaque publication crée une nouvelle version du bandeau, et chaque enregistrement de consentement conserve la version vue par le visiteur : vous pouvez ainsi toujours prouver quel texte une personne a accepté.

Lorsque vous modifiez les catégories, les fournisseurs ou les finalités, cochez Ask again avant de publier. Les visiteurs qui ont fait leur choix sous une version antérieure revoient alors le bandeau à leur prochaine visite. Les changements purement visuels, comme les couleurs ou les polices, ne nécessitent pas de nouveau choix.

Les modifications publiées arrivent sur votre site en une minute environ. Vous n’avez jamais besoin de redéployer votre site.