Pular para conteúdo

Instalação Básica

Guia detalhado para instalar o script Complyr em seu site e começar a coletar consentimento de forma conforme com a LGPD.

📋 Pré-requisitos

Antes de começar, certifique-se de que você tem:

  • ✅ Conta criada em app.complyr.com.br
  • ✅ Workspace configurado
  • ✅ Acesso ao código fonte do seu site (HTML, CMS, ou framework)
  • ✅ Template de consentimento criado e ativado

Não tem conta ainda?

Acesse app.complyr.com.br/register para criar uma conta gratuita.

🔑 Obtendo seu Workspace ID

  1. Acesse o painel Complyr
  2. Faça login
  3. No menu lateral, vá em Configurações → Workspace
  4. Copie o Workspace ID (formato UUID: a1b2c3d4-...)

Importante

Cada workspace tem um ID único. Use o ID correto para o site que está configurando.

📦 Instalação do Script

Opção 1: HTML Puro (Recomendado)

Adicione o seguinte código antes do fechamento da tag </body> em todas as páginas do seu site:

<script
  src="https://app.complyr.com.br/tag/js"
  data-workspace-id="SEU_WORKSPACE_ID"
  data-complyr-script
  async
  defer>
</script>

Exemplo completo:

<!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>
</head>
<body>
    <!-- Seu conteúdo aqui -->
    <h1>Bem-vindo!</h1>

    <!-- Script Complyr - ANTES do </body> -->
    <script
      src="https://app.complyr.com.br/tag/js"
      data-workspace-id="a1b2c3d4-5e6f-7g8h-9i0j-k1l2m3n4o5p6"
      data-complyr-script
      async
      defer>
    </script>
</body>
</html>

Pronto!

O banner de consentimento aparecerá automaticamente na primeira visita ao site.

Opção 2: React / Next.js

Para aplicações React ou Next.js, adicione o script no arquivo _document.js ou _app.js:

Next.js (App Router - Recomendado)

// app/layout.tsx
import Script from 'next/script'

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="pt-BR">
      <body>
        {children}

        {/* Script Complyr */}
        <Script
          src="https://app.complyr.com.br/tag/js"
          data-workspace-id="SEU_WORKSPACE_ID"
          data-complyr-script
          strategy="afterInteractive"
        />
      </body>
    </html>
  )
}

Next.js (Pages Router)

// pages/_document.js
import { Html, Head, Main, NextScript } from 'next/document'
import Script from 'next/script'

export default function Document() {
  return (
    <Html lang="pt-BR">
      <Head />
      <body>
        <Main />
        <NextScript />

        {/* Script Complyr */}
        <Script
          src="https://app.complyr.com.br/tag/js"
          data-workspace-id="SEU_WORKSPACE_ID"
          data-complyr-script
          strategy="afterInteractive"
        />
      </body>
    </Html>
  )
}

React (Create React App)

// public/index.html
<!DOCTYPE html>
<html lang="pt-BR">
  <head>
    <meta charset="utf-8" />
    <title>React App</title>
  </head>
  <body>
    <div id="root"></div>

    <!-- Script Complyr -->
    <script
      src="https://app.complyr.com.br/tag/js"
      data-workspace-id="SEU_WORKSPACE_ID"
      data-complyr-script
      async
      defer>
    </script>
  </body>
</html>

Opção 3: WordPress

  1. Acesse Aparência → Editor de Temas
  2. Selecione o arquivo footer.php
  3. Cole o script antes de <?php wp_footer(); ?>
  4. Clique em Atualizar Arquivo
<!-- footer.php -->
<script
  src="https://app.complyr.com.br/tag/js"
  data-workspace-id="SEU_WORKSPACE_ID"
  data-complyr-script
  async
  defer>
</script>

<?php wp_footer(); ?>
</body>
</html>

Método B: Plugin (Recomendado)

  1. Instale o plugin Insert Headers and Footers
  2. Vá em Configurações → Insert Headers and Footers
  3. Cole o script na seção Scripts in Footer
  4. Clique em Salvar

Vantagem do Plugin

Usar um plugin evita perder o script ao atualizar o tema.

Opção 4: Google Tag Manager

Atenção: Não Recomendado

Embora seja possível instalar via GTM, NÃO é recomendado. O script Complyr deve carregar ANTES do GTM para gerenciar o consentimento do próprio GTM.

Se mesmo assim quiser usar GTM:

  1. Crie uma Nova Tag no GTM
  2. Tipo: HTML Personalizado
  3. Cole o código:
<script
  src="https://app.complyr.com.br/tag/js"
  data-workspace-id="SEU_WORKSPACE_ID"
  data-complyr-script>
</script>
  1. Acionador: All Pages
  2. Prioridade da tag: 999 (maior prioridade)
  3. Publique

Alternativa melhor: Instale Complyr diretamente no HTML e configure integração com GTM separadamente. Veja Integração com GTM.

Opção 5: Shopify

  1. Acesse Temas → Ações → Editar código
  2. Abra theme.liquid
  3. Encontre </body>
  4. Cole o script antes de </body>
  5. Clique em Salvar
<!-- theme.liquid -->
<script
  src="https://app.complyr.com.br/tag/js"
  data-workspace-id="SEU_WORKSPACE_ID"
  data-complyr-script
  async
  defer>
</script>
</body>

Opção 6: Wix

  1. Vá em Configurações → Rastreamento e Análises
  2. Clique em + Novo Código
  3. Cole o script Complyr
  4. Selecione Todas as páginas
  5. Selecione Corpo - final
  6. Clique em Aplicar

Opção 7: Webflow

  1. Vá em Project Settings → Custom Code
  2. Na seção Footer Code, cole:
<script
  src="https://app.complyr.com.br/tag/js"
  data-workspace-id="SEU_WORKSPACE_ID"
  data-complyr-script
  async
  defer>
</script>
  1. Clique em Save
  2. Publique o site

⚙️ Parâmetros do Script

O script Complyr aceita os seguintes atributos data-*:

Obrigatórios

Atributo Descrição Exemplo
data-workspace-id ID único do workspace a1b2c3d4-...
data-complyr-script Identifica o script Complyr (flag booleana)

Opcionais

Atributo Descrição Padrão Exemplo
data-debug Ativa logs de debug no console false "true"
data-auto-show Exibe banner automaticamente true "false"
data-delay Delay antes de exibir banner (ms) 0 "3000"

Exemplo com parâmetros opcionais:

<script
  src="https://app.complyr.com.br/tag/js"
  data-workspace-id="SEU_WORKSPACE_ID"
  data-complyr-script
  data-debug="true"
  data-delay="2000"
  async
  defer>
</script>

✅ Validando a Instalação

Após instalar o script, valide que está funcionando:

1. Verificar no Console

  1. Abra o site em uma janela anônima
  2. Pressione F12 (DevTools)
  3. Vá para a aba Console
  4. Procure por: [Complyr] Loaded successfully

Debug Mode

Adicione data-debug="true" para ver logs detalhados.

2. Verificar Network

  1. Abra DevTools → Network
  2. Recarregue a página
  3. Filtre por tag/js
  4. Verifique se há um request para app.complyr.com.br/tag/js
  5. Status deve ser 200 OK

3. Verificar Banner

  1. Abra o site em janela anônima (sem consentimento salvo)
  2. O banner deve aparecer automaticamente
  3. Teste os botões:
  4. Aceitar Todos: Banner fecha, consentimento salvo
  5. Apenas Essenciais: Banner fecha, apenas essenciais salvos
  6. Personalizar: Modal abre com opções granulares

4. Verificar localStorage

No console:

// Verificar consentimento salvo
JSON.parse(localStorage.getItem('complyr_consent'))

// Deve retornar algo como:
{
  status: "granted",
  purposes: { ... },
  timestamp: "2025-10-22T14:30:00Z"
}

❌ Problemas Comuns

Possíveis causas: - workspace-id incorreto - Script não carregou (erro 404) - Template de consentimento não ativado - Consentimento já salvo (limpe localStorage)

Solução: Ver Solução de Problemas

Script Bloqueado por AdBlocker

Sintoma: Request para tag/js bloqueado no Network tab.

Solução: - Desabilite AdBlocker para testar - Instrua usuários a permitirem o site - Considere self-hosting do script (avançado)

Erro: "Failed to fetch template"

Causa: Template de consentimento não encontrado ou inativo.

Solução: 1. Acesse painel Complyr 2. Vá em Consentimento → Templates 3. Verifique se há um template ativo (status verde) 4. Se não houver, crie ou ative um template

🔒 Considerações de Segurança

Content Security Policy (CSP)

Se seu site usa CSP, adicione:

<meta http-equiv="Content-Security-Policy"
      content="script-src 'self' https://app.complyr.com.br;">

Subresource Integrity (SRI)

Atualmente, SRI não é suportado pois o script é gerado dinamicamente. Use async defer para carregamento seguro.

🚀 Próximos Passos

Agora que o script está instalado:

  1. Configure Integrações
  2. Google Tag Manager

  3. Facebook Pixel

  4. Personalize o Banner

  5. Ajuste cores e fontes

  6. Adicione seu logo

  7. Use a API JavaScript

  8. Identifique usuários após login

  9. Controle programático do consentimento

  10. Configure Workspace

  11. Ajuste configurações avançadas
  12. Gerencie domínios e usuários

📞 Suporte

Precisa de ajuda?