@crava/cookies
Banner OSS MIT. Zero dependências externas. Aceitar/Rejeitar no mesmo nível visual conforme Guia ANPD.
2 jeitos de instalar
1. Snippet (mais rápido, 1 linha)
<script src="https://cravar.com.br/banner.js" data-project="crava-xyz123" defer></script>Cola no <head>. Banner aparece. Pronto.
2. npm (pra quem quer importar no bundle)
npm i @crava/cookies// app/layout.tsx (Next.js)
import { CookieBanner } from '@crava/cookies/react';
export default function Layout({ children }) {
return (
<html>
<body>
{children}
<CookieBanner projectId="crava-xyz123" />
</body>
</html>
);
}O que ele faz (e o que NÃO faz)
Faz
- Aparece na primeira visita
- "Aceitar todos" e "Rejeitar todos" no mesmo nível visual (Guia ANPD §52)
- "Configurar" como terceira opção com categorias granulares
- Não seta cookie não-essencial antes do aceite
- Registra evidência (versão da política, IP-hash, UA-hash, timestamp) via SDK do Cravar
- Permite revogação a qualquer momento (link no rodapé do banner persistente)
- Dispara
window.cravaConsentcom objeto de preferências pros seus scripts lerem
Não faz
- Não troca o cookie wall (= bloquear acesso sem aceite). Cookie wall é vedado pela ANPD quando não há alternativa razoável.
- Não desabilita seus scripts sozinho. Você lê
window.cravaConsente decide.
API window.cravaConsent
window.cravaConsent = {
essential: true, // sempre true
functional: false, // user opt-in
analytics: false, // user opt-in
marketing: false, // user opt-in
givenAt: '2026-05-17T12:34:56Z',
version: 'v3',
};
window.addEventListener('crava:consent:change', (e) => {
// recarrega scripts conforme novo consent
});Integração com Google Analytics 4 (exemplo)
<!-- Antes do GA, espera o consent -->
<script>
window.addEventListener('crava:consent:ready', () => {
if (window.cravaConsent.analytics) {
const s = document.createElement('script');
s.src = 'https://www.googletagmanager.com/gtag/js?id=G-XXX';
document.head.appendChild(s);
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-XXX', { anonymize_ip: true });
}
});
</script>Customização
Cores, posicionamento, copy. Tudo configurável via data-attributes ou prop. Detalhes na ref completa (em construção).
Open source
Licença MIT. Repositório público em github.com/crava/cookies (em construção).
Status
Em construção. Cadastra na waitlist que aviso quando publicar.