c15t

O que é c15t?

c15t é um framework open source para gerenciar consentimento de cookies e carregamento de scripts em aplicações web modernas. Seu propósito principal é ajudar desenvolvedores a controlarem como o consentimento é coletado e como scripts de rastreamento ou outros são ativados (ou bloqueados) com base nesse estado de consentimento.

O projeto é posicionado como “developer-first” e “headless”, significando que a lógica de consentimento subjacente é separada da interface do usuário, permitindo que as equipes construam a experiência de banner e diálogo em sua própria stack, em vez de depender de lógica opaca de fornecedores.

Principais Recursos

• Framework open source de consentimento para cookies, consentimento e fluxos de conformidade com privacidade, focado em apps web modernas.
• Controle de consentimento e carregamento de scripts projetado para execução em client/edge, com o objetivo declarado de bloquear requisições até que o estado de consentimento relevante seja definido.
• Core headless que funciona com múltiplos frameworks (listados: React, Vue, Svelte, Angular, Next.js, Nuxt, SvelteKit, Astro, Solid, Qwik e mais).
• CLI scaffolding para gerar um banner de cookies rapidamente, ou a opção de “inserir a lógica headless” e controlar totalmente a experiência.
• Customização de UI controlada por desenvolvedores via seu próprio CSS/tokens de design, com os componentes de banner/diálogo esperando integração com seu estilo.
• Suporte a i18n para tratamento de idioma/localidade do banner (traduza uma vez, consentimento em qualquer lugar).
• Opções de idioma e apresentação baseadas em geolocalização, incluindo a capacidade de “servir o banner final no idioma final” e opcionalmente não mostrá-lo (conforme descrito).
• Suporte a targeting por jurisdição cobrindo 15+ jurisdições de leis de privacidade, incluindo GDPR e CCPA/CPRA, com exemplos listados para LGPD, PIPEDA, PIPL e APPI.

Como Usar c15t

Uma configuração típica começa adicionando o provider e componentes de UI específicos do framework do c15t, depois configurando com seu modo de consentimento, URL do backend e os scripts que deseja bloquear atrás do consentimento.

Do exemplo Next.js da página:

1. Importe o provider e componentes de UI (ex.: ConsentManagerProvider, ConsentBanner, ConsentDialog).
2. Adicione seus scripts à configuração do provider (exemplo mostra um script Meta Pixel via metaPixel({ pixelId: "..." })).
3. Defina opções incluindo mode (exemplo usa hosted) e backendURL (obtido de uma variável de ambiente).
4. Renderize <ConsentBanner /> e <ConsentDialog /> para que o usuário gerencie as configurações de privacidade.

O site também menciona um quick start via CLI (npx @c15t/cli).

Casos de Uso

• Aplicações Next.js que precisam de um banner de consentimento e diálogo de configurações enquanto mantêm o estado de consentimento ligado ao carregamento de scripts (ex.: ativando scripts de analytics específicos só após seleção do usuário).
• Equipes multi-framework que querem uma única abordagem de lógica de consentimento com UI construída em seus próprios componentes, já que o core é descrito como headless e compatível com muitos frameworks.
• Produtos com forte localização que precisam do texto do banner de consentimento apresentado no idioma do usuário, usando o tratamento de i18n/locale integrado descrito.
• Produtos operando em múltiplas regiões onde a mensagem de lei de privacidade (ou até se mostrar o banner) deve variar por jurisdição e idioma, suportado via geolocalização e configuração de jurisdição conforme descrito.
• Equipes que preferem estilo e integração de tokens de design personalizados para o banner/diálogo, em vez de adotar uma UI pré-pronta.

FAQ

• c15t é uma solução apenas de UI? Não. O site descreve c15t como tendo um core headless onde desenvolvedores podem “inserir a lógica headless” e controlar a experiência e o estilo.

• Quais frameworks são suportados? A página lista compatibilidade com React, Vue, Svelte, Angular, Next.js, Nuxt, SvelteKit, Astro, Solid, Qwik e mais.

• Posso customizar a aparência do banner? Sim. A página afirma que você pode estilizar com seu próprio CSS e tokens de design, e que você controla a experiência.

• c15t suporta múltiplos idiomas? Sim. A página afirma que há suporte a i18n com tratamento de locale integrado.

• Como ele lida com diferentes jurisdições de privacidade? A página descreve geolocalização e targeting por jurisdição, incluindo exemplos como GDPR e CCPA/CPRA, e menciona 15+ jurisdições.

Alternativas

• Bibliotecas de gerenciamento de consentimento headless/agnósticas a frameworks: Em vez de usar um framework de consentimento dedicado, as equipes podem construir o gerenciamento de estado de consentimento por conta própria e condicionar o carregamento de scripts à própria UI. Isso difere ao transferir o esforço de implementação para longe de um framework pronto.
• Componentes de cookies/banners focados em UI: Algumas soluções fornecem principalmente um banner de consentimento pronto com configuração. Eles geralmente sacrificam o controle do desenvolvedor sobre a lógica de consentimento e o controle de scripts em comparação com uma abordagem headless.
• Ferramentas de gerenciamento de tags/scripts com modos de consentimento: Alternativas na categoria de análise/gerenciamento de tags podem oferecer disparo de scripts consciente de consentimento. Os fluxos de trabalho geralmente giram em torno de regras de tags em vez de um núcleo de consentimento headless que os desenvolvedores podem integrar diretamente.
• Plataformas de privacidade/conformidade: Elas geralmente gerenciam fluxos de trabalho de conformidade mais amplos. Podem ser menos alinhadas com padrões agnósticos a frameworks, controlados por desenvolvedores, de consentimento e carregamento de scripts descritos para o c15t.