Integração HTML / JavaScript

Instalação básica

Adicione o script no <head> de todas as páginas do seu site, antes de qualquer outro script de terceiros:

<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Meu Site</title>

  <!-- Cookield CMP — UMA linha é tudo que você precisa -->
  <script src="https://cdn.cookield.io/banner/SEU_BANNER_ID.js" async></script>

  <!-- Outros scripts (analytics, marketing, etc.) -->
</head>
<body>
  <!-- Conteúdo do site -->
</body>
</html>

É isso. Uma única linha. O banner será exibido automaticamente na primeira visita.

Opções de configuração

Toda a configuração é feita no Dashboard, mas você pode customizar comportamentos via atributos data no script ou um objeto de configuração:

Via atributos data-*

<script
  src="https://cdn.cookield.io/banner/SEU_BANNER_ID.js"
  data-auto-show="true"
  data-language="pt-BR"
  data-position="bottom"
  data-block-scripts="true"
  async
></script>

Via objeto de configuração

<script>
  window.__cookield_config = {
    autoShow: true,         // Exibir banner automaticamente (padrão: true)
    language: 'auto',       // 'auto' detecta pelo navegador, ou force: 'pt-BR', 'en', 'es'
    position: 'bottom',     // 'bottom', 'top', 'center' (modal)
    blockScripts: true,     // Bloquear scripts de terceiros até o consent
    respectDNT: false,      // Respeitar "Do Not Track" do navegador
    expiration: 365,        // Dias até pedir consent novamente
  };
</script>
<script src="https://cdn.cookield.io/banner/SEU_BANNER_ID.js" async></script>

Events API

A Cookield dispara eventos customizados no window que você pode usar para controlar comportamentos na sua página:

// Evento principal: disparado quando o usuário interage com o banner
window.addEventListener('cookield:consent', function(event) {
  console.log('Consent atualizado:', event.detail);
  // event.detail = {
  //   necessary: true,
  //   analytics: true,
  //   marketing: false,
  //   functionality: true,
  //   timestamp: '2024-01-15T10:30:00Z',
  //   source: 'banner' | 'preferences' | 'api'
  // }

  if (event.detail.analytics) {
    // Carregar scripts de analytics
    loadGoogleAnalytics();
  }

  if (event.detail.marketing) {
    // Carregar pixels de marketing
    loadFacebookPixel();
  }
});

// Evento: banner pronto (script carregado)
window.addEventListener('cookield:ready', function() {
  console.log('Cookield carregado e pronto');
});

// Evento: banner exibido
window.addEventListener('cookield:show', function() {
  console.log('Banner exibido ao usuário');
});

// Evento: banner fechado
window.addEventListener('cookield:close', function() {
  console.log('Banner fechado');
});

Callback functions

Alternativamente, registre callbacks antes do script carregar:

<script>
  // Definir callbacks ANTES do script da Cookield
  window.__cookield_callbacks = {
    onReady: function() {
      console.log('Cookield inicializado');
    },
    onConsent: function(consent) {
      console.log('Usuário deu consent:', consent);

      if (consent.analytics) {
        // Inicializar analytics
      }
      if (consent.marketing) {
        // Inicializar pixels de conversão
      }
    },
    onReject: function() {
      console.log('Usuário rejeitou cookies opcionais');
    },
    onPreferencesOpen: function() {
      console.log('Painel de preferências aberto');
    },
    onPreferencesSave: function(consent) {
      console.log('Preferências salvas:', consent);
    }
  };
</script>
<script src="https://cdn.cookield.io/banner/SEU_BANNER_ID.js" async></script>

API Global

Após carregamento, a API fica disponível em window.cookield:

// Abrir painel de preferências (ex: link no footer)
document.getElementById('cookie-settings').addEventListener('click', function() {
  window.cookield.showPreferences();
});

// Obter estado atual do consentimento
var consent = window.cookield.getConsent();
if (consent && consent.analytics) {
  // Analytics autorizado
}

// Aceitar tudo programaticamente
window.cookield.acceptAll();

// Rejeitar tudo programaticamente
window.cookield.rejectAll();

// Atualizar categorias específicas
window.cookield.updateConsent({
  analytics: true,
  marketing: false
});

Bloqueio automático de scripts

A Cookield pode bloquear scripts de terceiros automaticamente. Marque os scripts com type="text/plain" e um atributo de categoria:

<!-- Script bloqueado até consent de analytics -->
<script
  type="text/plain"
  data-cookield-category="analytics"
  src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXX"
></script>

<!-- Script bloqueado até consent de marketing -->
<script
  type="text/plain"
  data-cookield-category="marketing"
>
  fbq('init', '1234567890');
  fbq('track', 'PageView');
</script>

<!-- Iframe bloqueado até consent -->
<iframe
  data-cookield-category="marketing"
  data-src="https://www.youtube.com/embed/VIDEO_ID"
  data-cookield-placeholder="Aceite cookies de marketing para ver este vídeo."
></iframe>