Site Básico (HTML Puro)¶

Visão Geral¶

Este exemplo demonstra a implementação mais simples do Complyr em um site HTML estático. Ideal para sites institucionais, landing pages, portfolios e blogs estáticos que não usam frameworks JavaScript complexos.

Características: - ✅ Implementação minimalista (apenas 1 script tag) - ✅ Sem dependências externas - ✅ Funciona em qualquer servidor web - ✅ Compatível com HTML5 - ✅ Pronto para uso em 5 minutos

Tecnologias: - HTML5 - CSS3 - JavaScript Vanilla

Tempo estimado: 10 minutos

Nível: Iniciante 🟢

Pré-requisitos¶

Antes de começar, certifique-se de ter:

✅ Workspace criado no Complyr Dashboard
✅ Template de consentimento ativo (ao menos um template publicado)
✅ Workspace ID (encontrado em Configurações → Integrações)
✅ Domínio configurado no workspace (ex: seusite.com.br)

Passo 1: Instalação do Script¶

1.1. Adicionar Script Tag¶

Adicione o script Complyr antes do fechamento da tag </body> em todas as páginas do seu site.

<!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 - Complyr LGPD</title>

  <!-- Seus estilos CSS -->
  <link rel="stylesheet" href="styles.css">
</head>
<body>

  <!-- Conteúdo do site -->
  <header>
    <h1>Bem-vindo ao Meu Site</h1>
    <nav>
      <a href="/">Home</a>
      <a href="/sobre">Sobre</a>
      <a href="/contato">Contato</a>
      <a href="/privacidade">Política de Privacidade</a>
    </nav>
  </header>

  <main>
    <h2>Seu conteúdo aqui</h2>
    <p>Este é um exemplo de site com Complyr instalado.</p>
  </main>

  <footer>
    <p>&copy; 2025 Meu Site. Todos os direitos reservados.</p>
    <!-- Link para gerenciar cookies (recomendado LGPD) -->
    <p>
      <a href="#" onclick="window.complyr?.openPreferences(); return false;">
        Gerenciar Cookies
      </a>
    </p>
  </footer>

  <!-- ✅ COMPLYR SCRIPT - Adicionar ANTES do </body> -->
  <script
    src="https://app.complyr.com.br/tag/js"
    data-workspace-id="SEU_WORKSPACE_ID_AQUI"
    data-complyr-script
    async
    defer>
  </script>

</body>
</html>

1.2. Substituir Workspace ID¶

IMPORTANTE: Substitua SEU_WORKSPACE_ID_AQUI pelo seu Workspace ID real.

Como encontrar seu Workspace ID:

Acesse app.complyr.com.br
Faça login
Vá em Configurações → Integrações
Copie o Workspace ID (formato UUID: 550e8400-e29b-41d4-a716-446655440000)

Exemplo:

<script
  src="https://app.complyr.com.br/tag/js"
  data-workspace-id="550e8400-e29b-41d4-a716-446655440000"
  data-complyr-script
  async
  defer>
</script>

Passo 2: Testar a Implementação¶

2.1. Abrir Site em Modo Anônimo¶

Abra seu site em modo anônimo/privado (Ctrl+Shift+N no Chrome)
O banner de consentimento deve aparecer automaticamente
Verifique se o banner está visível e bem posicionado

Teste 1: Aceitar Todos 1. Clique em "Aceitar Todos" 2. Banner deve fechar 3. Atualize a página → Banner não deve aparecer novamente

Teste 2: Rejeitar Todos 1. Limpe cookies e localStorage (F12 → Application → Clear Storage) 2. Atualize a página 3. Clique em "Rejeitar Todos" 4. Banner deve fechar 5. Atualize a página → Banner não deve aparecer novamente

Teste 3: Gerenciar Preferências 1. Limpe cookies e localStorage 2. Atualize a página 3. Clique em "Gerenciar Preferências" 4. Modal deve abrir com toggles para cada finalidade 5. Ajuste preferências e clique em "Salvar" 6. Modal deve fechar 7. Atualize a página → Banner não deve aparecer novamente

2.3. Verificar LocalStorage¶

Abra DevTools (F12) e verifique se o consentimento foi salvo:

// Console do navegador
console.log(localStorage.getItem('complyr_consent'));

// Deve retornar algo como:
{
  "workspaceId": "550e8400-e29b-41d4-a716-446655440000",
  "consentId": "uuid-do-consentimento",
  "status": "GRANTED",  // ou PARTIAL, DENIED
  "purposes": {
    "essential": { "granted": true, "grantedAt": "2025-01-15T10:00:00Z" },
    "analytics": { "granted": true, "grantedAt": "2025-01-15T10:00:00Z" },
    "marketing": { "granted": false, "grantedAt": null }
  },
  "createdAt": "2025-01-15T10:00:00Z",
  "expiresAt": "2026-01-15T10:00:00Z"
}

2.4. Verificar no Dashboard¶

Acesse app.complyr.com.br
Vá em Consentimentos
Verifique se seu consentimento aparece na lista
Confira o status (GRANTED, PARTIAL, DENIED)

Para estar em conformidade com LGPD, é recomendado ter um link visível para o usuário gerenciar suas preferências de cookies a qualquer momento.

<footer>
  <p>&copy; 2025 Meu Site. Todos os direitos reservados.</p>

  <!-- Links de políticas -->
  <nav class="footer-links">
    <a href="/politica-privacidade">Política de Privacidade</a>
    <a href="/politica-cookies">Política de Cookies</a>
    <a href="/termos-uso">Termos de Uso</a>

    <!-- ✅ Link para gerenciar cookies -->
    <a href="#" onclick="window.complyr?.openPreferences(); return false;">
      Gerenciar Cookies
    </a>
  </nav>
</footer>

<style>
.footer-links {
  display: flex;
  gap: 16px;
  justify-content: center;
  margin-top: 16px;
  flex-wrap: wrap;
}

.footer-links a {
  color: #666;
  text-decoration: none;
  font-size: 14px;
}

.footer-links a:hover {
  text-decoration: underline;
}
</style>

Nota: O ?. é o optional chaining operator que previne erros se o script Complyr ainda não carregou.

Passo 4: Escutar Eventos de Consentimento (Opcional)¶

Se você precisar executar código quando o usuário aceitar ou rejeitar cookies, pode escutar eventos JavaScript.

4.1. Evento: Script Carregado¶

<script>
// Executar quando Complyr carregar
document.addEventListener('complyr:loaded', function() {
  console.log('✅ Complyr carregado e pronto para uso!');

  // Agora você pode usar window.complyr
  if (window.complyr) {
    console.log('window.complyr disponível');
  }
});
</script>

4.2. Evento: Consentimento Atualizado¶

<script>
// Executar quando usuário aceitar/rejeitar cookies
document.addEventListener('consent-updated', function(event) {
  console.log('🔔 Consentimento atualizado:', event.detail);

  // event.detail contém:
  // {
  //   analytics: boolean,
  //   marketing: boolean,
  //   personalization: boolean,
  //   third_party: boolean
  // }

  if (event.detail.analytics) {
    console.log('✅ Usuário aceitou Analytics');
    // Você pode carregar Google Analytics aqui, por exemplo
  } else {
    console.log('❌ Usuário rejeitou Analytics');
  }
});
</script>

<script>
// Executar quando banner for exibido
document.addEventListener('banner-displayed', function() {
  console.log('👀 Banner de consentimento exibido ao usuário');

  // Analytics: rastrear exibição do banner
  // Exemplo: enviar evento para sistema de analytics interno
});
</script>

4.4. Evento: Preferências Abertas¶

<script>
// Executar quando modal de preferências abrir
document.addEventListener('preferences-opened', function() {
  console.log('⚙️ Usuário abriu preferências de cookies');
});
</script>

Exemplo Completo¶

Aqui está um exemplo completo de página HTML com Complyr integrado:

<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="Site institucional com conformidade LGPD usando Complyr">
  <title>Meu Site - Exemplo Complyr</title>

  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      line-height: 1.6;
      color: #333;
    }

    header {
      background: #4CAF50;
      color: white;
      padding: 20px;
      text-align: center;
    }

    nav {
      display: flex;
      gap: 20px;
      justify-content: center;
      margin-top: 10px;
    }

    nav a {
      color: white;
      text-decoration: none;
      padding: 8px 16px;
      border-radius: 4px;
      transition: background 0.3s;
    }

    nav a:hover {
      background: rgba(255, 255, 255, 0.2);
    }

    main {
      max-width: 1200px;
      margin: 40px auto;
      padding: 0 20px;
    }

    .card {
      background: #f9f9f9;
      padding: 20px;
      border-radius: 8px;
      margin-bottom: 20px;
      border-left: 4px solid #4CAF50;
    }

    footer {
      background: #333;
      color: white;
      padding: 40px 20px;
      text-align: center;
      margin-top: 60px;
    }

    .footer-links {
      display: flex;
      gap: 16px;
      justify-content: center;
      margin-top: 16px;
      flex-wrap: wrap;
    }

    .footer-links a {
      color: #aaa;
      text-decoration: none;
      font-size: 14px;
    }

    .footer-links a:hover {
      color: white;
      text-decoration: underline;
    }

    .cookie-link {
      display: inline-block;
      margin-top: 20px;
      padding: 10px 20px;
      background: #4CAF50;
      color: white;
      text-decoration: none;
      border-radius: 4px;
      transition: background 0.3s;
    }

    .cookie-link:hover {
      background: #45a049;
    }
  </style>
</head>
<body>

  <!-- Header -->
  <header>
    <h1>Meu Site Institucional</h1>
    <nav>
      <a href="/">Home</a>
      <a href="/sobre">Sobre</a>
      <a href="/servicos">Serviços</a>
      <a href="/contato">Contato</a>
    </nav>
  </header>

  <!-- Main Content -->
  <main>
    <h2>Bem-vindo!</h2>
    <p>Este é um exemplo de site HTML estático com Complyr integrado para conformidade com LGPD.</p>

    <div class="card">
      <h3>🔒 Privacidade e Segurança</h3>
      <p>
        Respeitamos sua privacidade e estamos em conformidade com a LGPD (Lei Geral de Proteção de Dados).
        Utilizamos cookies para melhorar sua experiência no site.
      </p>
      <p>
        Você pode gerenciar suas preferências de cookies a qualquer momento através do link no rodapé.
      </p>
    </div>

    <div class="card">
      <h3>🍪 Sobre os Cookies</h3>
      <p>
        Utilizamos cookies nas seguintes categorias:
      </p>
      <ul>
        <li><strong>Essenciais:</strong> Necessários para o funcionamento do site (sempre ativos)</li>
        <li><strong>Analytics:</strong> Nos ajudam a entender como você usa o site</li>
        <li><strong>Marketing:</strong> Usados para personalizar anúncios</li>
      </ul>
      <a href="#" onclick="window.complyr?.openPreferences(); return false;" class="cookie-link">
        Gerenciar Preferências de Cookies
      </a>
    </div>

    <div class="card">
      <h3>📋 Políticas</h3>
      <p>
        Consulte nossas políticas para saber mais sobre como tratamos seus dados:
      </p>
      <ul>
        <li><a href="/politica-privacidade">Política de Privacidade</a></li>
        <li><a href="/politica-cookies">Política de Cookies</a></li>
        <li><a href="/termos-uso">Termos de Uso</a></li>
      </ul>
    </div>
  </main>

  <!-- Footer -->
  <footer>
    <p>&copy; 2025 Meu Site Institucional. Todos os direitos reservados.</p>

    <nav class="footer-links">
      <a href="/politica-privacidade">Política de Privacidade</a>
      <a href="/politica-cookies">Política de Cookies</a>
      <a href="/termos-uso">Termos de Uso</a>
      <a href="#" onclick="window.complyr?.openPreferences(); return false;">
        Gerenciar Cookies
      </a>
    </nav>
  </footer>

  <!-- ✅ COMPLYR SCRIPT -->
  <script
    src="https://app.complyr.com.br/tag/js"
    data-workspace-id="550e8400-e29b-41d4-a716-446655440000"
    data-complyr-script
    async
    defer>
  </script>

  <!-- Listeners de eventos (opcional) -->
  <script>
    // Quando Complyr carregar
    document.addEventListener('complyr:loaded', function() {
      console.log('✅ Complyr carregado!');
    });

    // Quando consentimento for atualizado
    document.addEventListener('consent-updated', function(event) {
      console.log('🔔 Consentimento atualizado:', event.detail);

      // Exemplo: enviar evento para analytics interno
      if (event.detail.analytics) {
        console.log('Usuário aceitou Analytics');
      }
    });

    // Quando banner for exibido
    document.addEventListener('banner-displayed', function() {
      console.log('👀 Banner exibido');
    });
  </script>

</body>
</html>

Customizações¶

O banner herda as cores do seu workspace configurado no Dashboard. Para customizar:

Acesse app.complyr.com.br
Vá em Templates de Consentimento
Edite o template ativo
Ajuste cores primárias, secundárias e de fundo
Salve e publique

Cores padrão sugeridas: - Primary Color: #4CAF50 (verde) - Secondary Color: #333333 (cinza escuro) - Background: #FFFFFF (branco)

2. Personalizar Textos¶

Você pode customizar todos os textos do banner no Dashboard:

Templates de Consentimento → Editar
Aba Textos
Edite mensagem principal, botões, descrições de finalidades
Salve e publique

Exemplo de mensagem principal:

Usamos cookies para melhorar sua experiência em nosso site.
Você pode aceitar todos, rejeitar ou escolher individualmente
as finalidades que deseja permitir.

No Dashboard, você pode configurar a posição:

Bottom (Inferior) - Recomendado, menos intrusivo
Top (Superior) - Mais visível
Center (Centro) - Modal centralizado (para avisos importantes)

4. Adicionar Google Analytics (Opcional)¶

Se você quiser adicionar Google Analytics manualmente (sem GTM), pode fazer assim:

<script>
// Aguardar consentimento antes de carregar GA
document.addEventListener('consent-updated', function(event) {
  if (event.detail.analytics) {
    // Usuário aceitou Analytics, carregar Google Analytics
    (function() {
      var script = document.createElement('script');
      script.async = true;
      script.src = 'https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX';
      document.head.appendChild(script);

      window.dataLayer = window.dataLayer || [];
      function gtag(){dataLayer.push(arguments);}
      gtag('js', new Date());
      gtag('config', 'G-XXXXXXXXXX');
    })();
  }
});
</script>

⚠️ Importante: Substitua G-XXXXXXXXXX pelo seu Measurement ID do Google Analytics.

Problemas Comuns¶

Possíveis causas:

Workspace ID incorreto
Verifique se o ID está correto no data-workspace-id
Deve ser um UUID válido (ex: 550e8400-e29b-41d4-a716-446655440000)
Script não carregou
Abra DevTools (F12) → Console
Verifique se há erros em vermelho
Verifique Network tab para ver se o script carregou (status 200)
Ad blocker bloqueando
Desative extensões de ad blocker temporariamente
Teste em modo anônimo sem extensões
Template não está ativo
Acesse Dashboard → Templates de Consentimento
Certifique-se de que há um template com status "Ativo"

Solução:

// Console do navegador - verificar se carregou
console.log('Complyr:', window.complyr);
// Deve retornar um objeto com métodos (loadPolicy, identify, etc.)

Possíveis causas:

localStorage bloqueado
Modo privado/anônimo bloqueia localStorage
Teste em janela normal (não privada)
Domínio não corresponde ao workspace
Workspace configurado para exemplo.com
Mas site está em www.exemplo.com ou localhost
Cookies sendo limpos automaticamente
Configuração do navegador pode estar limpando cookies ao fechar

Solução:

// Testar localStorage
try {
  localStorage.setItem('test', 'test');
  localStorage.removeItem('test');
  console.log('✅ localStorage disponível');
} catch (e) {
  console.error('❌ localStorage bloqueado:', e);
}

// Verificar domínio
console.log('Domínio atual:', window.location.hostname);
console.log('Workspace domain esperado:', 'seusite.com.br');

Problema 3: Erro no Console¶

Erro comum:

Uncaught TypeError: Cannot read property 'openPreferences' of undefined

Causa: Script Complyr ainda não carregou quando window.complyr.openPreferences() foi chamado.

Solução: Use optional chaining ?. ou verifique se existe:

<!-- ✅ CORRETO: Optional chaining -->
<a href="#" onclick="window.complyr?.openPreferences(); return false;">
  Gerenciar Cookies
</a>

<!-- ✅ CORRETO: Verificar se existe -->
<a href="#" onclick="if(window.complyr) window.complyr.openPreferences(); return false;">
  Gerenciar Cookies
</a>

<!-- ❌ ERRADO: Sem verificação -->
<a href="#" onclick="window.complyr.openPreferences(); return false;">
  Gerenciar Cookies
</a>

Possíveis causas:

Erro JavaScript anterior bloqueou execução
Conflito com outro script no site
Botão customizado não está chamando função correta

Solução:

Abra DevTools → Console
Verifique se há erros em vermelho
Teste aceitar consentimento manualmente:

// Console do navegador
window.complyr.acceptPolicy('consent', null);

Se funcionar via console mas não pelo botão, o problema está no HTML do botão.

Checklist de Validação¶

Use esta checklist para garantir que tudo está funcionando:

Próximos Passos¶

Após implementar o básico, você pode:

Integrar com Google Tag Manager
Controlar Google Analytics, Google Ads baseado em consentimento
Implementar Consent Mode v2
Rastrear eventos customizados
Integrar com Facebook Pixel
Rastrear conversões no Facebook Ads
Implementar Advanced Matching
Configurar eventos customizados
Customizar Banner
Personalizar cores e fontes
Ajustar textos e traduções
Configurar posicionamento
Explorar API JavaScript
Método identify() para identificar usuários
Método revokeConsent() para revogar consentimento
Método loadPolicy() para exibir políticas

Recursos Adicionais¶

Documentação Relacionada¶

Ferramentas de Teste¶

Chrome DevTools - Testar localStorage e cookies
WAVE - Testar acessibilidade
Lighthouse - Testar performance

Suporte¶

Email: contato@complyr.com.br
GitHub: github.com/complyr/complyr/issues
Documentação: docs.complyr.com.br

FAQ¶

1. Preciso adicionar o script em todas as páginas?¶

Sim. O script Complyr precisa estar em todas as páginas do seu site para garantir que o banner apareça na primeira visita e que as preferências sejam respeitadas em toda navegação.

Dica: Se usar um template/header compartilhado, adicione o script lá uma única vez.

2. O script Complyr afeta a performance do site?¶

Não. O script é: - Carregado de forma assíncrona (async defer) - Minificado e otimizado (< 50KB gzipped) - Servido via CDN global (baixa latência) - Não bloqueia renderização da página

Lighthouse Score: Impacto mínimo (~5ms de overhead).

3. Funciona com HTTP ou precisa de HTTPS?¶

Recomendamos HTTPS, mas funciona em HTTP também.

LGPD e boas práticas: Embora não seja obrigatório por lei, HTTPS é fortemente recomendado para: - Proteger dados de usuários - Evitar interceptação de consentimentos - Melhorar SEO (Google favorece HTTPS) - Evitar avisos "Site não seguro" no navegador

4. Posso usar em localhost para testes?¶

Sim! O Complyr funciona em localhost e 127.0.0.1 para facilitar desenvolvimento.

Dica: Configure o domínio do workspace como localhost ou use domínio real e teste via /etc/hosts.

5. Quanto custa o Complyr?¶

O Complyr oferece: - Tier Gratuito: Até 10.000 pageviews/mês - Tier Profissional: A partir de R$ 99/mês - Tier Enterprise: Customizado para grandes volumes

Consulte preços atualizados.

6. Preciso criar políticas de privacidade?¶

Recomendado, mas não obrigatório para usar o Complyr.

Porém, a LGPD exige que você tenha: - Política de Privacidade (Art. 9º, § 1º) - Política de Cookies (recomendado) - Termos de Uso (recomendado)

O Complyr pode hospedar suas políticas ou você pode criar em seu próprio site.

7. O que acontece se eu não tiver template ativo?¶

O banner não aparecerá. Você precisa ter ao menos um template de consentimento publicado e ativo no Dashboard.

Como ativar: 1. Dashboard → Templates de Consentimento 2. Criar novo template ou editar existente 3. Configurar finalidades e textos 4. Clicar em "Publicar" e marcar "Ativo"

Sim! Você pode: - Customizar cores (primária, secundária, fundo, texto) - Ajustar textos e traduções - Escolher posição (bottom, top, center) - Adicionar logo do workspace

Customização avançada: CSS customizado via Dashboard (planos Enterprise).

Conclusão¶

Parabéns! 🎉 Você implementou o Complyr em seu site HTML estático.

Agora seu site está em conformidade com LGPD e respeita a privacidade dos usuários.

Próximos passos recomendados: 1. Teste em diferentes navegadores e dispositivos 2. Configure Google Tag Manager (se usar analytics) 3. Crie suas políticas de privacidade e cookies 4. Monitore consentimentos no Dashboard 5. Adicione link "Gerenciar Cookies" em todas as páginas

Precisa de ajuda? Entre em contato: contato@complyr.com.br

Site Básico (HTML Puro)¶

Visão Geral¶

Pré-requisitos¶

Passo 1: Instalação do Script¶

1.1. Adicionar Script Tag¶

1.2. Substituir Workspace ID¶

Passo 2: Testar a Implementação¶

2.1. Abrir Site em Modo Anônimo¶

2.2. Testar Ações do Banner¶

2.3. Verificar LocalStorage¶

2.4. Verificar no Dashboard¶

Passo 3: Adicionar Link "Gerenciar Cookies" no Footer¶

Passo 4: Escutar Eventos de Consentimento (Opcional)¶

4.1. Evento: Script Carregado¶

4.2. Evento: Consentimento Atualizado¶

4.3. Evento: Banner Exibido¶

4.4. Evento: Preferências Abertas¶

Exemplo Completo¶

Customizações¶

1. Personalizar Cores do Banner¶

2. Personalizar Textos¶

3. Posição do Banner¶

4. Adicionar Google Analytics (Opcional)¶

Problemas Comuns¶

Problema 1: Banner não aparece¶

Problema 2: Banner aparece sempre, mesmo após aceitar¶

Problema 3: Erro no Console¶

Problema 4: Banner não fecha após clicar em "Aceitar"¶

Checklist de Validação¶

Próximos Passos¶

Recursos Adicionais¶

Documentação Relacionada¶

Ferramentas de Teste¶

Suporte¶

FAQ¶

1. Preciso adicionar o script em todas as páginas?¶

2. O script Complyr afeta a performance do site?¶

3. Funciona com HTTP ou precisa de HTTPS?¶

4. Posso usar em localhost para testes?¶

5. Quanto custa o Complyr?¶

6. Preciso criar políticas de privacidade?¶

7. O que acontece se eu não tiver template ativo?¶

8. Posso personalizar completamente o visual do banner?¶

Conclusão¶