Politiques de cookies et de confidentialité automatiques

Rédiger une politique de cookies n’a jamais fait rêver personne. Vous auditez vos cookies à la main, vous rédigez un pavé de texte juridique, vous le traduisez, vous le collez dans une page, puis vous priez pour que rien ne change. Spoiler : tout finit par changer. Un développeur ajoute un nouveau pixel d’analyse, le marketing glisse une balise de retargeting, et votre politique si soigneusement rédigée est périmée avant que l’encre ait séché.

Katla prend le problème à l’envers : vos politiques sont générées à partir de vos vrais cookies, analysés, classés et synchronisés automatiquement.

Trois formats, une seule source de vérité

Chaque site Katla dispose de politiques générées automatiquement dans trois formats :

Le format table est particulièrement utile si vous avez déjà une politique de confidentialité et qu’il vous faut simplement une liste exacte, toujours à jour, des cookies de votre site.

Intégration en un seul extrait de code

Le moyen le plus rapide d’afficher une politique sur votre page, c’est l’intégration JavaScript. Ajoutez deux lignes de HTML :

<div id="katla-policy"></div>
<script src="https://cdn.katla.app/{siteId}/policy.js"></script>

C’est tout. Le script récupère votre dernière politique et l’affiche dans le conteneur. Quand vos cookies changent, la politique se met à jour automatiquement, sans redéploiement.

Choisir un format

Ajoutez un paramètre de requête format pour choisir ce qui est affiché :

<!-- Full privacy + cookie policy (default) -->
<script src="https://cdn.katla.app/{siteId}/policy.js"></script>
 
<!-- Cookie policy only -->
<script src="https://cdn.katla.app/{siteId}/policy.js?format=cookie"></script>
 
<!-- Cookie table only -->
<script src="https://cdn.katla.app/{siteId}/policy.js?format=table"></script>

Définir la langue

Katla prend en charge 13 locales d’emblée : anglais, allemand, français, espagnol, italien, néerlandais, portugais, suédois, norvégien, danois, polonais et finnois. Définissez la locale avec un paramètre de requête :

<script src="https://cdn.katla.app/{siteId}/policy.js?locale=de-DE"></script>

Si aucune locale n’est indiquée, le script détecte automatiquement la langue du navigateur du visiteur et se rabat sur l’anglais.

Un style à votre image

L’intégration produit du HTML sémantique simple : titres, paragraphes, tableaux et listes. Aucun CSS imposé n’est injecté : par défaut, elle hérite des styles existants de votre site.

Pour aller plus loin, configurez window.KatlaPolicy avant le chargement du script afin d’associer des classes CSS ou des styles inline à chaque type d’élément.

Avec Tailwind ou des classes utilitaires

<script>
  window.KatlaPolicy = {
    classes: {
      wrapper: "prose prose-slate max-w-none",
      h1: "text-4xl font-bold mb-6",
      h2: "text-2xl font-semibold mt-8 mb-4",
      p: "text-gray-600 leading-relaxed mb-4",
      table: "w-full border-collapse",
      thead: "bg-gray-100",
      th: "text-left p-2 font-medium",
      td: "p-2 border-b",
      a: "text-blue-600 underline hover:text-blue-800",
    }
  };
</script>
<div id="katla-policy"></div>
<script src="https://cdn.katla.app/{siteId}/policy.js"></script>

Avec des styles inline

<script>
  window.KatlaPolicy = {
    styles: {
      h1: "font-size: 2rem; color: #111;",
      h2: "font-size: 1.5rem; margin-top: 2rem;",
      p: "color: #444; line-height: 1.6;",
      table: "width: 100%; border-collapse: collapse;",
      th: "text-align: left; padding: 8px; background: #f5f5f5;",
      td: "padding: 8px; border-bottom: 1px solid #eee;",
    }
  };
</script>
<div id="katla-policy"></div>
<script src="https://cdn.katla.app/{siteId}/policy.js"></script>

Vous pouvez aussi combiner les deux : classes et styles s’appliquent ensemble lorsqu’ils sont définis pour le même élément.

Le SDK pour un contrôle total

Si vous développez avec React (ou n’importe quel framework JavaScript), le SDK vous fournit la politique en markdown brut, à afficher comme bon vous semble :

import { createKatlaClient } from "@katla/sdk";
 
const client = createKatlaClient({ siteId: "your-site-id" });
 
// Get the cookie table as markdown
const { markdown } = await client.getPolicy({
  locale: "en-GB",
  format: "table",
});

Composant React

Le paquet @katla/sdk inclut un composant React prêt à l’emploi qui affiche le markdown avec la prise en charge de GitHub Flavored Markdown (tableaux, texte barré, etc.) :

import { KatlaPolicy } from "@katla/sdk/react";
 
export function CookiePolicyPage({ markdown }: { markdown: string }) {
  return (
    <KatlaPolicy
      markdown={markdown}
      className="prose max-w-3xl mx-auto"
    />
  );
}

Comme le composant accepte les surcharges de composants standard de react-markdown, vous pouvez y brancher les composants de votre propre design system :

<KatlaPolicy
  markdown={markdown}
  components={{
    h1: ({ children }) => <Heading size="xl">{children}</Heading>,
    table: ({ children }) => <Table variant="striped">{children}</Table>,
    a: ({ href, children }) => <Link href={href}>{children}</Link>,
  }}
/>

Des URL directes pour tous les usages

Chaque politique est aussi disponible sous forme de fichier autonome, pratique pour la lier, la télécharger ou la récupérer depuis n’importe quel backend :

Toutes les URL acceptent les mêmes paramètres de requête locale et format. Utilisez l’URL markdown pour importer la politique brute dans un CMS, un site de documentation ou une application mobile. Utilisez le point d’accès JSON pour construire une logique d’affichage entièrement sur mesure.

Toujours exacte, toujours à jour

Le grand avantage par rapport aux politiques rédigées à la main, c’est que votre politique reflète la réalité. Katla analyse votre site avec un navigateur headless et détecte les cookies déposés par JavaScript, pas seulement ceux des en-têtes HTTP. Quand un cookie apparaît ou disparaît, votre politique générée se met à jour en conséquence.

Fini les politiques périmées. Fini les cookies oubliés. Fini les trous dans la conformité.

Bien démarrer

1. Inscrivez-vous sur katla.app et ajoutez votre site
2. Lancez une analyse pour découvrir et classer chaque cookie
3. Renseignez les informations de votre entreprise : nom, e-mail de contact et, si besoin, e-mail du DPO
4. Intégrez la politique avec un extrait de code, le SDK ou une URL directe
5. N’y pensez plus : votre politique reste synchronisée à mesure que votre site évolue

Envie d’arrêter de maintenir vos politiques de cookies à la main ? Commencez gratuitement.