Pular para conteúdo

Modos de Banner

Visão Geral

O Banner de Consentimento é a interface visual que solicita consentimento dos usuários para coleta e processamento de dados. O Complyr oferece o modo Layered (Camadas), que combina:

  • Interface simples: Botões "Aceitar Todos" e "Rejeitar Todos" para decisões rápidas
  • Controle granular: Modal de preferências para customização por finalidade
  • Conformidade LGPD: Atende todos os requisitos legais (Art. 8º, § 5º)
  • UX otimizada: Não interrompe a navegação, permite acesso ao site

Modo Layered (Camadas)

Conceito

O modo Layered apresenta informações de forma progressiva:

  1. Camada 1 - Banner Simples: Exibido ao carregar a página
  2. Mensagem curta e clara
  3. Botões "Aceitar Todos", "Rejeitar Todos", "Gerenciar Preferências"

  4. Link para Política de Privacidade

  5. Camada 2 - Modal de Preferências: Aberto sob demanda

  6. Controle granular por finalidade (5 categorias)
  7. Descrição detalhada de cada finalidade
  8. Toggle switches para ativar/desativar
  9. Botão "Salvar Preferências"

Benefícios do Modo Layered

Aspecto Benefício
Simplicidade 80% dos usuários escolhem "Aceitar Todos" ou "Rejeitar Todos" rapidamente
Controle 20% que desejam customizar têm acesso granular completo
Compliance Atende LGPD Art. 8º, § 5º (consentimento destacado)
Taxa de Aceitação ~65% aceitam pelo menos algumas finalidades (vs ~40% em banners tudo-ou-nada)
UX Não força o usuário a revisar todas as opções se não quiser

Fluxo de Interação

sequenceDiagram
    participant U as Usuário
    participant B as Banner (Camada 1)
    participant M as Modal (Camada 2)
    participant S as Sistema

    U->>B: Visita página
    B->>U: Exibe banner simples

    alt Usuário quer decisão rápida
        U->>B: Clica "Aceitar Todos"
        B->>S: Salva consentimento GRANTED
        S-->>U: Banner oculta, site carrega normalmente
    else Usuário rejeita tudo
        U->>B: Clica "Rejeitar Todos"
        B->>S: Salva consentimento DENIED
        S-->>U: Banner oculta, apenas essenciais
    else Usuário quer customizar
        U->>B: Clica "Gerenciar Preferências"
        B->>M: Abre modal de preferências
        M->>U: Exibe 5 finalidades com toggles
        U->>M: Seleciona finalidades desejadas
        U->>M: Clica "Salvar Preferências"
        M->>S: Salva consentimento PARTIAL
        S-->>U: Modal fecha, site carrega com preferências
    end

Camada 1: Banner Simples

Estrutura Padrão

<div id="complyr-banner" class="complyr-banner bottom">
  <!-- Mensagem -->
  <div class="complyr-banner-content">
    <p class="complyr-banner-message">
      Usamos cookies para melhorar sua experiência. Você pode aceitar todos,
      rejeitar ou escolher individualmente as finalidades.
      <a href="/politica-privacidade" target="_blank" class="complyr-link">
        Saiba mais
      </a>
    </p>
  </div>

  <!-- Botões de Ação -->
  <div class="complyr-banner-actions">
    <button class="complyr-btn complyr-btn-reject" onclick="window.complyr.rejectAll()">
      Rejeitar Todos
    </button>
    <button class="complyr-btn complyr-btn-customize" onclick="window.complyr.openPreferences()">
      Gerenciar Preferências
    </button>
    <button class="complyr-btn complyr-btn-accept" onclick="window.complyr.acceptAll()">
      Aceitar Todos
    </button>
  </div>
</div>

Posicionamento

O banner pode ser posicionado em 3 locações:

Posição Classe CSS Descrição Quando Usar
Bottom .bottom Parte inferior da página (padrão) Desktop e mobile (menos intrusivo)
Top .top Parte superior da página Alta visibilidade, importante chamar atenção
Center .center Modal centralizado Máxima atenção, decisão crítica

Exemplo de Configuração:

// Configurar posição do banner
window.complyrConfig = {
  workspaceId: 'YOUR_WORKSPACE_ID',
  banner: {
    position: 'bottom',  // 'top', 'bottom', 'center'
    theme: 'light',      // 'light', 'dark'
    showCloseButton: false  // Não permitir fechar sem interagir
  }
};

Customização de Cores

Tema Claro (Light - Padrão):

.complyr-banner {
  background-color: #ffffff;
  color: #333333;
  border-top: 1px solid #e0e0e0;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
}

.complyr-btn-accept {
  background-color: #4CAF50; /* Verde */
  color: #ffffff;
}

.complyr-btn-reject {
  background-color: #f44336; /* Vermelho */
  color: #ffffff;
}

.complyr-btn-customize {
  background-color: #2196F3; /* Azul */
  color: #ffffff;
}

Tema Escuro (Dark):

.complyr-banner.dark {
  background-color: #212121;
  color: #ffffff;
  border-top: 1px solid #424242;
}

.complyr-banner.dark .complyr-btn-accept {
  background-color: #66BB6A; /* Verde claro */
}

.complyr-banner.dark .complyr-btn-reject {
  background-color: #EF5350; /* Vermelho claro */
}

.complyr-banner.dark .complyr-btn-customize {
  background-color: #42A5F5; /* Azul claro */
}

Customização Avançada (Matching Brand Colors):

/* Sobrescrever cores padrão com cores da marca */
.complyr-banner {
  background-color: #1a1a1a; /* Cor de fundo da marca */
  color: #f5f5f5;
  font-family: 'Montserrat', sans-serif; /* Fonte da marca */
}

.complyr-btn-accept {
  background-color: #ff6600; /* Laranja da marca */
  border-radius: 8px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.complyr-btn-accept:hover {
  background-color: #ff7700;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(255, 102, 0, 0.3);
}

Textos e Traduções

Texto Padrão (Português):

window.complyrConfig = {
  banner: {
    message: 'Usamos cookies para melhorar sua experiência. Você pode aceitar todos, rejeitar ou escolher individualmente.',
    acceptAllText: 'Aceitar Todos',
    rejectAllText: 'Rejeitar Todos',
    customizeText: 'Gerenciar Preferências',
    privacyPolicyText: 'Política de Privacidade',
    privacyPolicyUrl: '/politica-privacidade'
  }
};

Tradução para Inglês:

window.complyrConfig = {
  language: 'en',
  banner: {
    message: 'We use cookies to improve your experience. You can accept all, reject all, or customize individually.',
    acceptAllText: 'Accept All',
    rejectAllText: 'Reject All',
    customizeText: 'Manage Preferences',
    privacyPolicyText: 'Privacy Policy',
    privacyPolicyUrl: '/privacy-policy'
  }
};

Detecção Automática de Idioma:

// Detectar idioma do navegador
const userLang = navigator.language || navigator.userLanguage;
const language = userLang.startsWith('pt') ? 'pt-BR' : 'en-US';

window.complyrConfig = {
  language: language,
  // Textos serão carregados automaticamente baseado no idioma
};

Camada 2: Modal de Preferências

Estrutura Completa

<div id="complyr-preferences-modal" class="complyr-modal">
  <!-- Overlay escuro (fundo) -->
  <div class="complyr-modal-overlay" onclick="window.complyr.closePreferences()"></div>

  <!-- Conteúdo do Modal -->
  <div class="complyr-modal-content">
    <!-- Cabeçalho -->
    <div class="complyr-modal-header">
      <h2>Gerenciar Preferências de Cookies</h2>
      <button class="complyr-modal-close" onclick="window.complyr.closePreferences()">
        ✕
      </button>
    </div>

    <!-- Corpo - Finalidades -->
    <div class="complyr-modal-body">
      <!-- Essential (Sempre Ativo) -->
      <div class="complyr-purpose-item">
        <div class="complyr-purpose-header">
          <div class="complyr-purpose-info">
            <h3>🔒 Essenciais</h3>
            <span class="complyr-always-active">Sempre Ativo</span>
          </div>
          <label class="complyr-switch disabled">
            <input type="checkbox" checked disabled>
            <span class="complyr-slider"></span>
          </label>
        </div>
        <p class="complyr-purpose-description">
          Cookies necessários para o funcionamento básico do site (login, carrinho, segurança).
          Estes cookies não podem ser desativados.
        </p>
        <details class="complyr-purpose-details">
          <summary>Ver cookies essenciais (3)</summary>
          <ul>
            <li><code>session_token</code> - Mantém você logado (24 horas)</li>
            <li><code>csrf_token</code> - Protege contra ataques (sessão)</li>
            <li><code>cart_id</code> - Armazena carrinho de compras (7 dias)</li>
          </ul>
        </details>
      </div>

      <!-- Analytics (Opcional) -->
      <div class="complyr-purpose-item">
        <div class="complyr-purpose-header">
          <div class="complyr-purpose-info">
            <h3>📊 Análise</h3>
          </div>
          <label class="complyr-switch">
            <input type="checkbox" id="analytics-toggle" data-purpose="analytics">
            <span class="complyr-slider"></span>
          </label>
        </div>
        <p class="complyr-purpose-description">
          Usamos Google Analytics e Hotjar para entender como você usa nosso site e melhorar sua experiência.
          <a href="/politica-privacidade#analytics" target="_blank">Saiba mais</a>
        </p>
        <details class="complyr-purpose-details">
          <summary>Ver ferramentas de análise (2)</summary>
          <ul>
            <li><strong>Google Analytics</strong> - Tráfego, comportamento, conversões</li>
            <li><strong>Hotjar</strong> - Heatmaps, gravações de sessão</li>
          </ul>
        </details>
      </div>

      <!-- Marketing (Opcional) -->
      <div class="complyr-purpose-item">
        <div class="complyr-purpose-header">
          <div class="complyr-purpose-info">
            <h3>📢 Marketing</h3>
          </div>
          <label class="complyr-switch">
            <input type="checkbox" id="marketing-toggle" data-purpose="marketing">
            <span class="complyr-slider"></span>
          </label>
        </div>
        <p class="complyr-purpose-description">
          Usamos Facebook Pixel e Google Ads para exibir anúncios relevantes e medir campanhas.
          <a href="/politica-privacidade#marketing" target="_blank">Saiba mais</a>
        </p>
        <details class="complyr-purpose-details">
          <summary>Ver ferramentas de marketing (2)</summary>
          <ul>
            <li><strong>Facebook Pixel</strong> - Remarketing, conversões no Facebook/Instagram</li>
            <li><strong>Google Ads</strong> - Rastreamento de campanhas Google</li>
          </ul>
        </details>
      </div>

      <!-- Personalization (Opcional) -->
      <div class="complyr-purpose-item">
        <div class="complyr-purpose-header">
          <div class="complyr-purpose-info">
            <h3>🎨 Personalização</h3>
          </div>
          <label class="complyr-switch">
            <input type="checkbox" id="personalization-toggle" data-purpose="personalization">
            <span class="complyr-slider"></span>
          </label>
        </div>
        <p class="complyr-purpose-description">
          Personalizamos recomendações de produtos e conteúdo com base no seu histórico de navegação.
          <a href="/politica-privacidade#personalization" target="_blank">Saiba mais</a>
        </p>
      </div>

      <!-- Third Party (Opcional) -->
      <div class="complyr-purpose-item">
        <div class="complyr-purpose-header">
          <div class="complyr-purpose-info">
            <h3>🔌 Terceiros</h3>
          </div>
          <label class="complyr-switch">
            <input type="checkbox" id="third-party-toggle" data-purpose="third_party">
            <span class="complyr-slider"></span>
          </label>
        </div>
        <p class="complyr-purpose-description">
          Carregamos serviços de terceiros como chat ao vivo (Intercom), mapas (Google Maps) e vídeos (YouTube).
          <a href="/politica-privacidade#third-party" target="_blank">Saiba mais</a>
        </p>
        <details class="complyr-purpose-details">
          <summary>Ver serviços de terceiros (3)</summary>
          <ul>
            <li><strong>Intercom</strong> - Chat ao vivo para suporte</li>
            <li><strong>Google Maps</strong> - Mapas interativos</li>
            <li><strong>YouTube</strong> - Vídeos embarcados</li>
          </ul>
        </details>
      </div>
    </div>

    <!-- Rodapé - Botões -->
    <div class="complyr-modal-footer">
      <button class="complyr-btn complyr-btn-secondary" onclick="window.complyr.rejectAll()">
        Rejeitar Todos
      </button>
      <button class="complyr-btn complyr-btn-primary" onclick="window.complyr.savePreferences()">
        Salvar Preferências
      </button>
      <button class="complyr-btn complyr-btn-success" onclick="window.complyr.acceptAll()">
        Aceitar Todos
      </button>
    </div>
  </div>
</div>

Toggle Switches (Interruptores)

Design Moderno:

.complyr-switch {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 24px;
}

.complyr-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.complyr-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: 0.3s;
  border-radius: 24px;
}

.complyr-slider:before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  transition: 0.3s;
  border-radius: 50%;
}

input:checked + .complyr-slider {
  background-color: #4CAF50; /* Verde quando ativado */
}

input:checked + .complyr-slider:before {
  transform: translateX(26px);
}

/* Estado desabilitado (Essential) */
.complyr-switch.disabled .complyr-slider {
  background-color: #9e9e9e;
  cursor: not-allowed;
}

Acessibilidade:

<!-- ARIA labels para screen readers -->
<label class="complyr-switch" aria-label="Habilitar cookies de análise">
  <input
    type="checkbox"
    id="analytics-toggle"
    data-purpose="analytics"
    role="switch"
    aria-checked="false"
  >
  <span class="complyr-slider" aria-hidden="true"></span>
</label>

<!-- Focus visível para navegação por teclado -->
<style>
.complyr-switch input:focus + .complyr-slider {
  box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.3);
  outline: 2px solid #4CAF50;
  outline-offset: 2px;
}
</style>

Responsividade Mobile

Adaptação Automática

O banner e modal se adaptam automaticamente para dispositivos móveis:

Desktop (> 768px): - Banner: Largura total, altura ~100px - Modal: 600px de largura, centralizado - Botões: Lado a lado (horizontal)

Tablet (480px - 768px): - Banner: Largura total, altura ~120px - Modal: 90% da largura da tela - Botões: Lado a lado, tamanho reduzido

Mobile (< 480px): - Banner: Largura total, altura ajustável - Modal: Tela inteira (100vw x 100vh) - Botões: Empilhados verticalmente

CSS Responsivo:

/* Mobile First */
.complyr-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  padding: 16px;
  z-index: 9999;
}

.complyr-banner-actions {
  display: flex;
  flex-direction: column; /* Vertical no mobile */
  gap: 8px;
  margin-top: 12px;
}

.complyr-btn {
  width: 100%;
  padding: 12px 16px;
  font-size: 14px;
  border-radius: 6px;
  cursor: pointer;
  border: none;
  font-weight: 600;
}

/* Tablet */
@media (min-width: 480px) {
  .complyr-banner-actions {
    flex-direction: row; /* Horizontal */
    justify-content: flex-end;
  }

  .complyr-btn {
    width: auto;
    min-width: 120px;
  }
}

/* Desktop */
@media (min-width: 768px) {
  .complyr-banner {
    padding: 20px 40px;
  }

  .complyr-banner-content {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .complyr-banner-actions {
    margin-top: 0;
    margin-left: 24px;
  }
}

/* Modal Responsivo */
.complyr-modal-content {
  width: 100%;
  height: 100%;
  max-height: none;
  border-radius: 0;
}

@media (min-width: 768px) {
  .complyr-modal-content {
    width: 600px;
    height: auto;
    max-height: 80vh;
    border-radius: 12px;
  }
}

Touch-Friendly

Botões com tamanho mínimo:

/* Tamanho mínimo de 44x44px para touch (WCAG 2.1 AAA) */
.complyr-btn {
  min-height: 44px;
  min-width: 44px;
  touch-action: manipulation; /* Evita delay de 300ms no click */
}

/* Aumentar área clicável dos toggles */
.complyr-switch {
  min-width: 60px;
  min-height: 34px;
}

Acessibilidade (A11y)

Suporte completo:

<!-- Foco automático no banner quando exibido -->
<div
  id="complyr-banner"
  class="complyr-banner"
  role="dialog"
  aria-labelledby="complyr-banner-title"
  aria-modal="false"
  tabindex="-1"
>
  <p id="complyr-banner-title" class="sr-only">
    Banner de consentimento de cookies
  </p>

  <!-- Botões navegáveis por Tab -->
  <button
    class="complyr-btn complyr-btn-reject"
    tabindex="0"
    onclick="window.complyr.rejectAll()"
  >
    Rejeitar Todos
  </button>
</div>

<style>
/* Ocultar visualmente mas manter acessível para screen readers */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* Focus visível */
.complyr-btn:focus {
  outline: 2px solid #4CAF50;
  outline-offset: 2px;
}
</style>

Navegação por Teclas:

// Capturar teclas Enter e Espaço nos toggles
document.querySelectorAll('.complyr-switch input').forEach(toggle => {
  toggle.addEventListener('keydown', function(e) {
    if (e.key === 'Enter' || e.key === ' ') {
      e.preventDefault();
      this.checked = !this.checked;
      this.dispatchEvent(new Event('change'));
    }
  });
});

// Fechar modal com Escape
document.addEventListener('keydown', function(e) {
  if (e.key === 'Escape' && modalIsOpen) {
    window.complyr.closePreferences();
  }
});

Screen Readers

ARIA labels e roles:

<!-- Banner -->
<div
  role="region"
  aria-label="Banner de consentimento de cookies"
  aria-live="polite"
>
  <p id="banner-description">
    Usamos cookies para melhorar sua experiência. Você pode aceitar todos,
    rejeitar ou escolher individualmente.
  </p>
</div>

<!-- Modal -->
<div
  id="preferences-modal"
  role="dialog"
  aria-modal="true"
  aria-labelledby="modal-title"
  aria-describedby="modal-description"
>
  <h2 id="modal-title">Gerenciar Preferências de Cookies</h2>
  <p id="modal-description">
    Escolha quais finalidades você permite que processem seus dados.
  </p>

  <!-- Toggle com estado anunciado -->
  <label class="complyr-switch" for="analytics-toggle">
    <span>Análise</span>
    <input
      type="checkbox"
      id="analytics-toggle"
      role="switch"
      aria-checked="false"
      aria-label="Habilitar cookies de análise para Google Analytics e Hotjar"
    >
  </label>
</div>

Anúncios Dinâmicos:

// Anunciar mudanças para screen readers
function updateConsentAnnouncement(purpose, granted) {
  const announcement = document.createElement('div');
  announcement.setAttribute('role', 'status');
  announcement.setAttribute('aria-live', 'polite');
  announcement.className = 'sr-only';
  announcement.textContent = `Cookies de ${purpose} ${granted ? 'ativados' : 'desativados'}`;

  document.body.appendChild(announcement);

  setTimeout(() => announcement.remove(), 3000);
}

Contraste de Cores (WCAG AAA)

Garantir contraste mínimo de 7:1:

/* Texto sobre fundo claro */
.complyr-banner {
  background-color: #ffffff;
  color: #000000; /* Contraste: 21:1 (AAA) */
}

/* Botões com contraste adequado */
.complyr-btn-accept {
  background-color: #2E7D32; /* Verde escuro */
  color: #ffffff; /* Contraste: 8.1:1 (AAA) */
}

.complyr-btn-reject {
  background-color: #C62828; /* Vermelho escuro */
  color: #ffffff; /* Contraste: 7.3:1 (AAA) */
}

/* Links com sublinhado (não apenas cor) */
.complyr-link {
  color: #0D47A1; /* Azul escuro */
  text-decoration: underline;
  font-weight: 600;
}

.complyr-link:hover {
  text-decoration-thickness: 2px;
}

Animações e Transições

Entrada Suave

Banner sliding from bottom:

@keyframes slideInUp {
  from {
    transform: translateY(100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.complyr-banner {
  animation: slideInUp 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Respeitar preferências de movimento reduzido */
@media (prefers-reduced-motion: reduce) {
  .complyr-banner {
    animation: none;
    transition: none;
  }
}

Modal fade-in:

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes scaleIn {
  from {
    transform: scale(0.9);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

.complyr-modal-overlay {
  animation: fadeIn 0.3s ease-out;
}

.complyr-modal-content {
  animation: scaleIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

Transições Interativas

/* Hover nos botões */
.complyr-btn {
  transition: all 0.2s ease;
}

.complyr-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.complyr-btn:active {
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

/* Toggle switch animation */
.complyr-slider {
  transition: background-color 0.3s ease;
}

.complyr-slider:before {
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

Boas Práticas de UX

1. Não Bloquear o Conteúdo

❌ Ruim (Cookie Wall):

/* NUNCA faça isso - ilegal pela LGPD Art. 9º, § 1º */
.site-content {
  filter: blur(10px);
  pointer-events: none;
}

.complyr-banner {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 99999;
}

✅ Bom:

/* Banner discreto que não impede navegação */
.complyr-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 9999;
  /* Usuário pode rolar a página normalmente */
}

2. Botões Claros e Visíveis

Hierarquia Visual:

/* Botão primário (ação recomendada) */
.complyr-btn-accept {
  background-color: #4CAF50;
  color: #ffffff;
  font-size: 16px;
  font-weight: 600;
  padding: 14px 28px;
}

/* Botão secundário */
.complyr-btn-customize {
  background-color: #2196F3;
  color: #ffffff;
  font-size: 15px;
  padding: 12px 24px;
}

/* Botão terciário (menos ênfase) */
.complyr-btn-reject {
  background-color: transparent;
  color: #f44336;
  border: 2px solid #f44336;
  font-size: 14px;
  padding: 10px 20px;
}

3. Mensagem Concisa

✅ Bom:

<p>
  Usamos cookies para melhorar sua experiência. Você pode aceitar todos,
  rejeitar ou escolher individualmente.
  <a href="/politica-privacidade">Saiba mais</a>
</p>

❌ Ruim (muito longo):

<p>
  Este site utiliza cookies de acordo com a Lei Geral de Proteção de Dados
  (LGPD - Lei 13.709/2018) e a Lei de Acesso à Informação (LAI - Lei 12.527/2011)
  para coletar informações sobre como você interage conosco, incluindo, mas
  não se limitando a, páginas visitadas, tempo de permanência, origem de tráfego,
  dispositivo utilizado, sistema operacional, navegador, resolução de tela...
  <!-- MUITO LONGO - usuários não vão ler -->
</p>

Sempre visível:

<div class="complyr-banner-content">
  <p>
    Usamos cookies para melhorar sua experiência.
    <a href="/politica-privacidade" target="_blank" class="complyr-link">
      Leia nossa Política de Privacidade
    </a>
    para mais informações.
  </p>
</div>

5. Persistência de Escolhas

Salvar imediatamente:

// Salvar escolha assim que usuário clicar
document.getElementById('accept-all-btn').addEventListener('click', function() {
  const consent = {
    workspaceId: window.COMPLYR_WORKSPACE_ID,
    purposes: {
      essential: true,
      analytics: true,
      marketing: true,
      personalization: true,
      third_party: true
    },
    timestamp: new Date().toISOString()
  };

  // 1. Salvar localmente IMEDIATAMENTE
  localStorage.setItem('complyr_consent_' + consent.workspaceId, JSON.stringify(consent));

  // 2. Ocultar banner IMEDIATAMENTE (não esperar backend)
  document.getElementById('complyr-banner').style.display = 'none';

  // 3. Enviar para backend (assíncrono, não bloqueia UX)
  fetch('https://app.complyr.com.br/api/consents', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(consent)
  }).catch(err => console.error('Failed to sync consent:', err));

  // 4. Recarregar página para ativar tags
  location.reload();
});

Perguntas Frequentes

1. Posso mudar a posição do banner após implementação?

Resposta: SIM. A posição do banner é configurável via window.complyrConfig:

window.complyrConfig = {
  banner: {
    position: 'top'  // Alterar de 'bottom' para 'top'
  }
};

2. Como customizar as cores do banner para minha marca?

Resposta: Use CSS customizado para sobrescrever os estilos padrão:

<style>
/* Sobrescrever cores padrão */
.complyr-banner {
  background-color: #1a1a1a !important; /* Sua cor de fundo */
  color: #ffffff !important;
}

.complyr-btn-accept {
  background-color: #ff6600 !important; /* Sua cor primária */
}
</style>

3. O banner funciona em todos os navegadores?

Resposta: SIM. O Complyr suporta: - ✅ Chrome/Edge (Chromium) - Últimas 2 versões - ✅ Firefox - Últimas 2 versões - ✅ Safari - Últimas 2 versões - ✅ Mobile browsers (iOS Safari, Chrome Android) - ⚠️ Internet Explorer 11 (suporte limitado)

4. Posso adicionar mais botões ao banner?

Resposta: Não recomendado. O design Layered otimiza para 3 botões: - Aceitar Todos - Rejeitar Todos - Gerenciar Preferências

Adicionar mais botões pode confundir usuários e reduzir taxa de conversão.

5. O banner aparece em todas as páginas?

Resposta: SIM, automaticamente. O script Complyr verifica localStorage em todas as páginas: - Se consentimento existe e é válido: Banner oculto - Se consentimento não existe ou expirou: Banner exibido

6. Posso ocultar o botão "Rejeitar Todos"?

Resposta: NÃO recomendado. A LGPD exige que o consentimento seja livre, o que significa que rejeitar deve ser tão fácil quanto aceitar. Ocultar "Rejeitar Todos" pode ser considerado "dark pattern" e viola boas práticas de UX e compliance.

7. Como testar o banner em diferentes idiomas?

Resposta: Configure o idioma via window.complyrConfig:

// Forçar inglês para testes
window.complyrConfig = {
  language: 'en-US'
};

// Forçar português
window.complyrConfig = {
  language: 'pt-BR'
};

8. O modal de preferências funciona offline?

Resposta: Parcialmente. O modal carrega e funciona offline, mas: - ✅ LocalStorage funciona (salva preferências localmente) - ❌ Envio para backend falha (tentará sincronizar quando online) - ✅ Preferências aplicadas imediatamente (tags bloqueadas/ativadas)

Recursos Relacionados

Documentação Técnica

Integrações

Exemplos Práticos

Próximos Passos

Agora que você entende os modos de banner, explore:

  1. Gerenciamento de Consentimento → - Como funciona o consentimento
  2. Guia Rápido → - Implemente o Complyr em 3 passos
  3. Customização → - Personalize cores e textos
  4. API JavaScript → - Controle programático do banner