Políticas de cookies y de privacidad automáticas

Redactar una política de cookies no es la idea de diversión de nadie. Auditas tus cookies a mano, escribes un muro de texto legal, lo traduces, lo pegas en una página y rezas para que nada cambie. Spoiler: siempre cambia. Un desarrollador añade un nuevo píxel de analítica, marketing mete una etiqueta de retargeting, y tu política tan cuidada se queda desfasada antes de que se seque la tinta.

Katla lo enfoca de otra manera: tus políticas se generan a partir de tus cookies reales, escaneadas, clasificadas y sincronizadas automáticamente.

Tres formatos, una única fuente de verdad

Cada sitio de Katla tiene políticas generadas automáticamente en tres formatos:

El formato tabla es especialmente útil si ya tienes una política de privacidad y solo necesitas una lista precisa y siempre actualizada de las cookies de tu sitio.

Insértala con un solo snippet

La forma más rápida de tener una política en tu página es el embed de JavaScript. Añade dos líneas de HTML:

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

Eso es todo. El script obtiene tu política más reciente y la renderiza en el contenedor. Cuando cambian tus cookies, la política se actualiza automáticamente, sin volver a desplegar nada.

Elegir un formato

Añade un parámetro de consulta format para controlar lo que se renderiza:

<!-- 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>

Elegir el idioma

Katla admite 13 locales de serie: inglés, alemán, francés, español, italiano, neerlandés, portugués, sueco, noruego, danés, polaco y finés. Elige el locale con un parámetro de consulta:

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

Si no se especifica ningún locale, el script detecta automáticamente el idioma del navegador del visitante y, si no puede, recurre al inglés.

Dale tu propio estilo

El embed renderiza HTML semántico sin más: encabezados, párrafos, tablas y listas. No inyecta ningún CSS con opiniones propias, así que por defecto hereda los estilos que ya tiene tu sitio.

Para tener más control, configura window.KatlaPolicy antes de que se cargue el script para asignar clases CSS o estilos inline a cada tipo de elemento.

Con Tailwind o clases de utilidad

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

Con estilos 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>

También puedes combinar las dos cosas: classes y styles se aplican juntos cuando ambos están definidos para el mismo elemento.

Usa el SDK para tener el control total

Si trabajas con React (o con cualquier framework de JavaScript), el SDK te da la política en markdown sin procesar para que la renderices como quieras:

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",
});

Componente de React

El paquete @katla/sdk incluye un componente de React listo para usar que renderiza el markdown con soporte para GitHub Flavored Markdown (tablas, tachado, etc.):

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

Como el componente acepta las sustituciones de componentes estándar de react-markdown, puedes usar en su lugar los componentes de tu propio sistema de diseño:

<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>,
  }}
/>

URL directas para cualquier flujo de trabajo

Cada política también está disponible como archivo independiente, útil para enlazarla, descargarla u obtenerla desde cualquier backend:

Todas las URL aceptan los mismos parámetros de consulta locale y format. Usa la URL de markdown para llevar la política sin procesar a un CMS, un sitio de documentación o una app móvil. Usa el endpoint JSON para construir una lógica de renderizado totalmente propia.

Siempre precisa, siempre al día

La gran ventaja frente a las políticas escritas a mano es que tu política refleja la realidad. Katla escanea tu sitio con un navegador headless y detecta las cookies que escribe JavaScript, no solo las de las cabeceras HTTP. Cuando se añade o se elimina una cookie, tu política generada se actualiza para reflejarlo.

Se acabaron las políticas desfasadas. Se acabaron las cookies que faltan. Se acabaron los huecos de cumplimiento.

Empieza

1. Regístrate en katla.app y añade tu sitio
2. Lanza un escaneo para descubrir y clasificar cada cookie
3. Configura los datos de tu empresa: nombre, correo de contacto y, si quieres, el correo del DPD
4. Inserta la política con un snippet, el SDK o una URL directa
5. Olvídate: tu política se mantiene sincronizada a medida que tu sitio evoluciona

¿Listo para dejar de mantener políticas de cookies a mano? Empieza gratis.