c15t

Qu'est-ce que c15t ?

c15t est un framework open source pour gérer le consentement aux cookies et le chargement des scripts dans les applications web modernes. Son objectif principal est d'aider les développeurs à contrôler la collecte du consentement et l'activation (ou le blocage) des scripts de suivi ou autres en fonction de cet état de consentement.

Le projet est positionné comme « developer-first » et « headless », ce qui signifie que la logique de consentement sous-jacente est séparée de l'interface utilisateur, permettant aux équipes de construire l'expérience du bandeau et du dialogue dans leur propre stack, plutôt que de dépendre d'une logique opaque de fournisseur.

Fonctionnalités clés

• Framework open source de consentement pour les cookies, le consentement et les workflows de conformité à la confidentialité, axé sur les applications web modernes.
• Contrôle du consentement et du chargement des scripts conçu pour une exécution client/edge, avec l'objectif déclaré de bloquer les requêtes jusqu'à ce que l'état de consentement pertinent soit défini.
• Cœur headless compatible avec plusieurs frameworks (listés : React, Vue, Svelte, Angular, Next.js, Nuxt, SvelteKit, Astro, Solid, Qwik, et plus).
• Scaffolding CLI pour générer rapidement un bandeau de cookies, ou l'option de « drop in the headless logic » pour contrôler pleinement l'expérience.
• Personnalisation UI contrôlée par le développeur via vos propres CSS/tokens de design, les composants bandeau/dialogue étant destinés à s'intégrer à votre style.
• Support i18n pour la gestion des langues/locales du bandeau (traduire une fois, consentir partout).
• Options de langue et de présentation basées sur la géolocalisation, y compris la possibilité de « servir le bandeau final dans la langue finale » et optionnellement de ne pas l'afficher du tout (comme décrit).
• Support de ciblage par juridiction couvrant plus de 15 juridictions de lois sur la vie privée, incluant GDPR et CCPA/CPRA, avec exemples pour LGPD, PIPEDA, PIPL et APPI.

Comment utiliser c15t

Une configuration typique commence par l'ajout du provider spécifique au framework et des composants UI de c15t, puis sa configuration avec votre mode de consentement, URL backend et les scripts à conditionner au consentement.

De l'exemple Next.js de la page :

1. Importer le provider et les composants UI (ex. ConsentManagerProvider, ConsentBanner, ConsentDialog).
2. Ajouter vos scripts à la configuration du provider (exemple montre un script Meta Pixel via metaPixel({ pixelId: "..." })).
3. Définir les options incluant mode (exemple utilise hosted) et backendURL (provenant d'une variable d'environnement).
4. Rendre <ConsentBanner /> et <ConsentDialog /> pour que l'utilisateur gère les paramètres de confidentialité.

Le site mentionne aussi un démarrage rapide via CLI (npx @c15t/cli).

Cas d'usage

• Applications Next.js nécessitant un bandeau de consentement et un dialogue de paramètres tout en liant l'état de consentement au chargement des scripts (ex. activation de scripts analytics spécifiques seulement après sélection utilisateur).
• Équipes multi-frameworks voulant une logique de consentement unique avec UI construite dans leurs propres composants, le cœur étant décrit comme headless et compatible avec de nombreux frameworks.
• Produits à forte localisation nécessitant que le texte du bandeau de consentement soit présenté dans la langue de l'utilisateur, via la gestion i18n/locale intégrée décrite.
• Produits opérant dans plusieurs régions où les messages de lois sur la vie privée (ou même l'affichage du bandeau) doivent varier par juridiction et langue, supporté via géolocalisation et configuration juridictionnelle comme décrit.
• Équipes préférant un style personnalisé et une intégration de tokens de design pour le bandeau/dialogue, plutôt qu'une UI préfabriquée.

FAQ

• c15t est-il une solution UI uniquement ? Non. Le site décrit c15t comme ayant un cœur headless où les développeurs peuvent « drop in the headless logic » et contrôler l'expérience et le style.

• Quels frameworks sont supportés ? La page liste la compatibilité avec React, Vue, Svelte, Angular, Next.js, Nuxt, SvelteKit, Astro, Solid, Qwik, et plus.

• Puis-je personnaliser l'apparence du bandeau ? Oui. La page indique que vous pouvez styler avec vos propres CSS et tokens de design, et que vous contrôlez l'expérience.

• c15t supporte-t-il plusieurs langues ? Oui. La page indique un support i18n avec gestion de locales intégrée.

• Comment gère-t-il les différentes juridictions de confidentialité ? La page décrit la géolocalisation et le ciblage par juridiction, incluant des exemples comme GDPR et CCPA/CPRA, et mentionne plus de 15 juridictions.

Alternatives

• Bibliothèques de gestion de consentement headless / agnostiques aux frameworks : Au lieu d'utiliser un framework de consentement dédié, les équipes peuvent construire elles-mêmes la gestion d'état du consentement et conditionner le chargement des scripts derrière leur propre UI. Cela diffère en déplaçant l'effort d'implémentation d'un framework prêt à l'emploi.
• Composants cookie/bannière axés sur l'UI : Certaines solutions fournissent principalement une bannière de consentement prête à l'emploi avec configuration. Elles échangent généralement le contrôle développeur sur la logique de consentement et le verrouillage des scripts contre une approche headless.
• Outils de gestion de tags/scripts avec modes de consentement : Des alternatives dans la catégorie analytics/gestion de tags peuvent offrir un déclenchement de scripts conscient du consentement. Les workflows tournent souvent autour de règles de tags plutôt qu'un cœur de consentement headless que les développeurs peuvent intégrer directement.
• Plateformes de confidentialité/conformité : Celles-ci gèrent typiquement des workflows de conformité plus larges. Elles sont souvent moins alignées sur les patterns de consentement agnostique aux frameworks et contrôlé par les développeurs, ainsi que le chargement de scripts décrits pour c15t.