c15t

¿Qué es c15t?

c15t es un framework open source para gestionar el consentimiento de cookies y la carga de scripts en aplicaciones web modernas. Su propósito principal es ayudar a los desarrolladores a controlar cómo se recopila el consentimiento y cómo se activan (o bloquean) los scripts de seguimiento u otros en función de ese estado de consentimiento.

El proyecto se posiciona como “developer-first” y “headless”, lo que significa que la lógica subyacente de consentimiento está separada de la interfaz de usuario, permitiendo a los equipos construir la experiencia del banner y el diálogo en su propio stack, en lugar de depender de lógica opaca de proveedores.

Características clave

• Framework open source de consentimiento para cookies, flujos de cumplimiento de privacidad, enfocado en apps web modernas.
• Control de consentimiento y carga de scripts diseñado para ejecución en cliente/edge, con el objetivo de bloquear solicitudes hasta que se establezca el estado de consentimiento relevante.
• Núcleo headless compatible con múltiples frameworks (React, Vue, Svelte, Angular, Next.js, Nuxt, SvelteKit, Astro, Solid, Qwik y más).
• CLI para scaffolding que genera un banner de cookies rápidamente, o la opción de “integrar la lógica headless” y controlar completamente la experiencia.
• Personalización de UI controlada por el desarrollador mediante CSS/tokens de diseño propios, con componentes de banner/diálogo que se integran con tu estilo.
• Soporte i18n para manejo de idioma/localización del banner (traduce una vez, consentimiento en todas partes).
• Opciones de idioma y presentación basadas en geolocalización, incluyendo servir el banner final en el idioma del usuario y opcionalmente no mostrarlo.
• Soporte para targeting por jurisdicción cubriendo 15+ leyes de privacidad, incluyendo GDPR y CCPA/CPRA, con ejemplos como LGPD, PIPEDA, PIPL y APPI.

Cómo usar c15t

Una configuración típica comienza añadiendo el provider y componentes UI específicos del framework de c15t, luego configurándolo con tu modo de consentimiento, URL del backend y los scripts que quieres proteger detrás del consentimiento.

Del ejemplo Next.js de la página:

1. Importa el provider y componentes UI (p. ej., ConsentManagerProvider, ConsentBanner, ConsentDialog).
2. Añade tus scripts a la configuración del provider (ejemplo muestra un script Meta Pixel vía metaPixel({ pixelId: "..." })).
3. Establece opciones como mode (ejemplo usa hosted) y backendURL (de una variable de entorno).
4. Renderiza <ConsentBanner /> y <ConsentDialog /> para que el usuario gestione los ajustes de privacidad.

El sitio también menciona un inicio rápido vía CLI (npx @c15t/cli).

Casos de uso

• Aplicaciones Next.js que necesitan un banner de consentimiento y diálogo de ajustes manteniendo el estado de consentimiento ligado a la carga de scripts (p. ej., activar scripts de analíticas específicos solo tras selección del usuario).
• Equipos multi-framework que quieren un enfoque único de lógica de consentimiento con UI construida en sus propios componentes, ya que el núcleo es headless y compatible con muchos frameworks.
• Productos con fuerte localización que necesitan texto del banner de consentimiento en el idioma del usuario, usando el manejo i18n/localización integrado.
• Productos que operan en múltiples regiones donde el mensaje de ley de privacidad (o incluso mostrar el banner) varía por jurisdicción e idioma, soportado vía geolocalización y configuración por jurisdicción.
• Equipos que prefieren estilos personalizados e integración de tokens de diseño para el banner/diálogo, en lugar de una UI prehecha.

Preguntas frecuentes

• ¿Es c15t solo una solución de UI? No. El sitio describe c15t con un núcleo headless donde los desarrolladores pueden “integrar la lógica headless” y controlar la experiencia y el estilo.

• ¿Qué frameworks soporta? La página lista compatibilidad con React, Vue, Svelte, Angular, Next.js, Nuxt, SvelteKit, Astro, Solid, Qwik y más.

• ¿Puedo personalizar la apariencia del banner? Sí. La página indica que puedes estilizar con tu propio CSS y tokens de diseño, y que controlas la experiencia.

• ¿Soporta c15t múltiples idiomas? Sí. La página menciona soporte i18n con manejo de localización integrado.

• ¿Cómo maneja diferentes jurisdicciones de privacidad? La página describe geolocalización y targeting por jurisdicción, incluyendo ejemplos como GDPR y CCPA/CPRA, y menciona 15+ jurisdicciones.

Alternativas

• Bibliotecas de gestión de consentimiento headless/independientes del framework: En lugar de usar un framework de consentimiento dedicado, los equipos pueden construir su propia gestión del estado de consentimiento y bloquear la carga de scripts detrás de su propia interfaz de usuario. Esto difiere al trasladar el esfuerzo de implementación desde un framework listo.
• Componentes de cookies/banners enfocados en la interfaz de usuario: Algunas soluciones proporcionan principalmente un banner de consentimiento prefabricado con configuración. Estos suelen sacrificar el control del desarrollador sobre la lógica de consentimiento y el bloqueo de scripts en comparación con un enfoque headless.
• Herramientas de gestión de tags/scripts con modos de consentimiento: Alternativas en la categoría de análisis/gestión de tags pueden ofrecer activación de scripts consciente del consentimiento. Los flujos de trabajo suelen centrarse en reglas de tags en lugar de un núcleo de consentimiento headless que los desarrolladores puedan integrar directamente.
• Plataformas de privacidad/cumplimiento: Estas suelen gestionar flujos de trabajo de cumplimiento más amplios. Pueden estar menos alineadas con patrones de consentimiento y carga de scripts independientes del framework y controlados por desarrolladores como los descritos para c15t.