Exemplos Práticos¶

Exemplos completos e prontos para produção de como integrar a API JavaScript do Complyr em diferentes cenários e frameworks.

📋 Visão Geral¶

Esta página contém exemplos práticos completos para implementar o Complyr em:

Sites HTML estáticos
E-commerce (Shopify, WooCommerce)
Aplicações SaaS
React / Next.js
Vue.js
WordPress
Landing pages

Todos os exemplos são prontos para produção e seguem melhores práticas.

🌐 Site HTML Estático¶

Exemplo: Blog Pessoal com Analytics¶

Cenário: Blog simples que usa Google Analytics apenas se usuário consentir.

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

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

  <!-- Google Analytics - SÓ carrega se consentimento dado -->
  <script>
    // Aguardar Complyr carregar
    window.addEventListener('complyr:loaded', function() {
      console.log('✅ Complyr carregado');
    });

    // Reagir a consentimento
    window.addEventListener('complyr:consent-updated', function(event) {
      const { purposes } = event.detail;

      // Carregar GA4 apenas se analytics permitido
      if (purposes.analytics && !window.gtag) {
        loadGoogleAnalytics();
      }
    });

    function loadGoogleAnalytics() {
      // Criar script tag
      const script = document.createElement('script');
      script.async = true;
      script.src = 'https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX';
      document.head.appendChild(script);

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

        console.log('✅ Google Analytics carregado');
      };
    }
  </script>
</head>
<body>
  <header>
    <h1>Meu Blog</h1>
    <nav>
      <a href="/">Home</a>
      <a href="/about">Sobre</a>
      <a href="/privacy">Privacidade</a>
      <a href="#" id="manage-cookies">Gerenciar Cookies</a>
    </nav>
  </header>

  <main>
    <article>
      <h2>Título do Artigo</h2>
      <p>Conteúdo do artigo...</p>
    </article>
  </main>

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

  <script>
    // Botão "Gerenciar Cookies" no footer
    document.getElementById('manage-cookies').addEventListener('click', function(event) {
      event.preventDefault();

      if (window.complyr) {
        window.complyr.openPreferences();
      } else {
        alert('Aguarde o carregamento da página...');
      }
    });
  </script>
</body>
</html>

🛒 E-commerce¶

Exemplo: Loja Online com Facebook Pixel e GTM¶

Cenário: E-commerce que rastreia eventos de compra, add to cart, visualização de produto.

<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="UTF-8">
  <title>Minha Loja - Produto X</title>

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

  <!-- Google Tag Manager - Gerenciado pelo Complyr -->
  <!-- Facebook Pixel - Gerenciado pelo Complyr -->

  <script>
    // Rastreamento de produto
    window.addEventListener('complyr:consent-updated', function(event) {
      const { purposes } = event.detail;

      // Enviar evento de visualização de produto apenas se marketing permitido
      if (purposes.marketing && window.fbq) {
        fbq('track', 'ViewContent', {
          content_ids: ['produto-123'],
          content_type: 'product',
          content_name: 'Tênis Nike Air Max',
          value: 499.90,
          currency: 'BRL'
        });
      }
    });
  </script>
</head>
<body>
  <div class="product">
    <h1>Tênis Nike Air Max</h1>
    <p class="price">R$ 499,90</p>
    <button id="add-to-cart" data-product-id="produto-123">
      Adicionar ao Carrinho
    </button>
  </div>

  <script>
    // Add to Cart com rastreamento
    document.getElementById('add-to-cart').addEventListener('click', function() {
      const productId = this.dataset.productId;

      // Adicionar ao carrinho (lógica da loja)
      addToCart(productId);

      // Rastrear evento no Facebook Pixel (se consentimento dado)
      const consent = JSON.parse(localStorage.getItem('complyr_consent') || '{}');

      if (consent.purposes && consent.purposes.marketing && window.fbq) {
        fbq('track', 'AddToCart', {
          content_ids: [productId],
          content_type: 'product',
          value: 499.90,
          currency: 'BRL'
        });
      }

      // Rastrear no Google Analytics via GTM (se consentimento dado)
      if (consent.purposes && consent.purposes.analytics && window.dataLayer) {
        window.dataLayer.push({
          event: 'add_to_cart',
          ecommerce: {
            items: [{
              item_id: productId,
              item_name: 'Tênis Nike Air Max',
              price: 499.90,
              quantity: 1
            }]
          }
        });
      }
    });

    function addToCart(productId) {
      // Lógica de adicionar ao carrinho
      console.log('Produto adicionado:', productId);
    }
  </script>
</body>
</html>

Exemplo: Checkout com Rastreamento de Compra¶

<script>
// checkout-success.html

window.addEventListener('complyr:loaded', function() {
  // Dados da compra (vindos do backend)
  const orderData = {
    orderId: 'ORDER-12345',
    total: 1299.70,
    items: [
      { id: 'produto-123', name: 'Tênis Nike Air Max', price: 499.90, quantity: 2 },
      { id: 'produto-456', name: 'Camiseta Adidas', price: 149.90, quantity: 2 }
    ]
  };

  // Aguardar consentimento
  window.addEventListener('complyr:consent-updated', function(event) {
    const { purposes } = event.detail;

    // Facebook Pixel: Purchase event
    if (purposes.marketing && window.fbq) {
      fbq('track', 'Purchase', {
        content_ids: orderData.items.map(item => item.id),
        content_type: 'product',
        value: orderData.total,
        currency: 'BRL',
        num_items: orderData.items.reduce((sum, item) => sum + item.quantity, 0)
      });

      console.log('✅ Facebook Pixel: Purchase enviado');
    }

    // Google Analytics: Purchase event via GTM
    if (purposes.analytics && window.dataLayer) {
      window.dataLayer.push({
        event: 'purchase',
        ecommerce: {
          transaction_id: orderData.orderId,
          value: orderData.total,
          currency: 'BRL',
          items: orderData.items.map(item => ({
            item_id: item.id,
            item_name: item.name,
            price: item.price,
            quantity: item.quantity
          }))
        }
      });

      console.log('✅ GTM: Purchase enviado');
    }
  }, { once: true });
});
</script>

💼 Aplicação SaaS¶

Exemplo: Dashboard SaaS com Identificação Automática¶

Cenário: Aplicação SaaS que identifica usuários após login para Advanced Matching.

<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="UTF-8">
  <title>Dashboard - MinhaApp SaaS</title>

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

  <script>
    // Identificar usuário automaticamente após login
    window.addEventListener('complyr:loaded', function() {
      // Obter usuário autenticado (exemplo: do localStorage ou API)
      const currentUser = getCurrentUser();

      if (currentUser && currentUser.email) {
        // Identificar no Complyr para Advanced Matching
        window.complyr.identify('email', currentUser.email);

        // Identificar também por telefone se disponível
        if (currentUser.phone) {
          window.complyr.identify('phone', currentUser.phone);
        }

        console.log('✅ Usuário identificado:', currentUser.email);
      }
    });

    // Confirmar identificação
    window.addEventListener('complyr:user-identified', function(event) {
      console.log('✅ Identificação confirmada:', event.detail.type);

      // Enviar evento personalizado para analytics
      if (window.dataLayer) {
        window.dataLayer.push({
          event: 'user_identified',
          userId: getCurrentUser().id,
          identificationType: event.detail.type
        });
      }
    });

    function getCurrentUser() {
      // Exemplo: obter usuário do localStorage
      const userJson = localStorage.getItem('currentUser');
      return userJson ? JSON.parse(userJson) : null;
    }
  </script>
</head>
<body>
  <header>
    <h1>Dashboard</h1>
    <div id="user-info"></div>
  </header>

  <main>
    <!-- Conteúdo do dashboard -->
  </main>

  <script>
    // Exibir informações do usuário
    const user = getCurrentUser();
    if (user) {
      document.getElementById('user-info').textContent = `Olá, ${user.name}!`;
    }
  </script>
</body>
</html>

Exemplo: Botão "Excluir Conta" com Revogação de Consentimento¶

<div class="settings">
  <h2>Configurações de Privacidade</h2>

  <button id="revoke-consent-btn" class="btn-danger">
    Revogar Consentimento
  </button>

  <button id="delete-account-btn" class="btn-danger">
    Excluir Conta Permanentemente
  </button>
</div>

<script>
  // Revogar consentimento (LGPD Art. 18)
  document.getElementById('revoke-consent-btn').addEventListener('click', function() {
    if (confirm('Tem certeza que deseja revogar todo o consentimento?')) {
      window.complyr.revokeConsent('Usuário solicitou revogação de consentimento');

      // Escutar confirmação
      window.addEventListener('complyr:consent-revoked', function(event) {
        alert('✅ Consentimento revogado com sucesso!');

        // Limpar dados locais
        clearUserData();

        // Recarregar página
        setTimeout(() => window.location.reload(), 1000);
      }, { once: true });
    }
  });

  // Excluir conta completamente
  document.getElementById('delete-account-btn').addEventListener('click', async function() {
    if (!confirm('Tem certeza que deseja excluir sua conta? Esta ação é irreversível.')) {
      return;
    }

    try {
      // 1. Revogar consentimento primeiro
      window.complyr.revokeConsent('Usuário solicitou exclusão de conta - LGPD Art. 18, VI');

      // 2. Aguardar confirmação de revogação
      await new Promise(resolve => {
        window.addEventListener('complyr:consent-revoked', function handler() {
          window.removeEventListener('complyr:consent-revoked', handler);
          resolve();
        });
      });

      // 3. Chamar API de exclusão de conta
      const response = await fetch('/api/account/delete', {
        method: 'DELETE',
        headers: {
          'Authorization': `Bearer ${getAuthToken()}`,
          'Content-Type': 'application/json'
        }
      });

      if (response.ok) {
        alert('✅ Conta excluída com sucesso!');

        // 4. Limpar tudo e redirecionar
        clearUserData();
        localStorage.clear();
        window.location.href = '/conta-excluida';
      } else {
        throw new Error('Erro ao excluir conta');
      }

    } catch (error) {
      console.error('Erro:', error);
      alert('Erro ao excluir conta. Tente novamente.');
    }
  });

  function clearUserData() {
    localStorage.removeItem('currentUser');
    localStorage.removeItem('authToken');
  }

  function getAuthToken() {
    return localStorage.getItem('authToken');
  }
</script>

⚛️ React / Next.js¶

Exemplo: Hook Customizado para Complyr¶

// hooks/useComplyr.ts
import { useEffect, useState } from 'react';

interface ComplyrStatus {
  loaded: boolean;
  consented: boolean;
  identified: boolean;
  purposes: {
    essential: boolean;
    analytics: boolean;
    marketing: boolean;
    personalization: boolean;
    third_party: boolean;
  } | null;
}

export function useComplyr() {
  const [status, setStatus] = useState<ComplyrStatus>({
    loaded: false,
    consented: false,
    identified: false,
    purposes: null
  });

  useEffect(() => {
    // Verificar se já carregou
    if (window.complyr) {
      setStatus(prev => ({ ...prev, loaded: true }));
    }

    // Escutar carregamento
    const handleLoaded = () => {
      setStatus(prev => ({ ...prev, loaded: true }));
    };

    // Escutar consentimento
    const handleConsentUpdated = (event: CustomEvent) => {
      setStatus(prev => ({
        ...prev,
        consented: true,
        purposes: event.detail.purposes
      }));
    };

    // Escutar identificação
    const handleUserIdentified = () => {
      setStatus(prev => ({ ...prev, identified: true }));
    };

    window.addEventListener('complyr:loaded', handleLoaded as EventListener);
    window.addEventListener('complyr:consent-updated', handleConsentUpdated as EventListener);
    window.addEventListener('complyr:user-identified', handleUserIdentified as EventListener);

    return () => {
      window.removeEventListener('complyr:loaded', handleLoaded as EventListener);
      window.removeEventListener('complyr:consent-updated', handleConsentUpdated as EventListener);
      window.removeEventListener('complyr:user-identified', handleUserIdentified as EventListener);
    };
  }, []);

  return status;
}

// hooks/useComplyrIdentify.ts
import { useEffect } from 'react';
import { useAuth } from '@/contexts/auth-context';

export function useComplyrIdentify() {
  const { user } = useAuth();

  useEffect(() => {
    if (!user?.email || !window.complyr) return;

    // Identificar usuário
    window.complyr.identify('email', user.email);

    // Identificar por telefone se disponível
    if (user.phone) {
      window.complyr.identify('phone', user.phone);
    }
  }, [user]);
}

Exemplo: Componente de Preferências¶

// components/CookiePreferencesButton.tsx
'use client';

import { useComplyr } from '@/hooks/useComplyr';

export function CookiePreferencesButton() {
  const { loaded, purposes } = useComplyr();

  const handleOpenPreferences = () => {
    if (window.complyr) {
      window.complyr.openPreferences();
    }
  };

  if (!loaded) {
    return null;
  }

  const activeCount = purposes
    ? Object.values(purposes).filter(Boolean).length
    : 0;

  return (
    <button
      onClick={handleOpenPreferences}
      className="text-sm text-gray-600 hover:text-gray-900 underline"
    >
      Gerenciar Cookies ({activeCount}/5 ativas)
    </button>
  );
}

Exemplo: Layout com Identificação Automática (Next.js App Router)¶

// app/dashboard/layout.tsx
'use client';

import { useComplyrIdentify } from '@/hooks/useComplyrIdentify';

export default function DashboardLayout({
  children
}: {
  children: React.ReactNode
}) {
  // Identificar usuário automaticamente
  useComplyrIdentify();

  return (
    <div className="min-h-screen bg-gray-50">
      {children}
    </div>
  );
}

Exemplo: Página de Registro com Aceite de Políticas¶

// app/register/page.tsx
'use client';

import { useState } from 'react';
import { useRouter } from 'next/navigation';

export default function RegisterPage() {
  const router = useRouter();
  const [formData, setFormData] = useState({
    name: '',
    email: '',
    password: '',
    acceptTerms: false,
    acceptPrivacy: false
  });
  const [loading, setLoading] = useState(false);

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();

    if (!formData.acceptTerms || !formData.acceptPrivacy) {
      alert('Você deve aceitar os Termos de Uso e Política de Privacidade');
      return;
    }

    setLoading(true);

    try {
      // 1. Criar conta
      const response = await fetch('/api/auth/register', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          name: formData.name,
          email: formData.email,
          password: formData.password
        })
      });

      const user = await response.json();

      if (!response.ok) {
        throw new Error(user.message || 'Erro ao criar conta');
      }

      // 2. Registrar aceites de políticas no Complyr
      if (window.complyr) {
        await Promise.all([
          window.complyr.acceptPolicy('terms-of-service', user.email),
          window.complyr.acceptPolicy('privacy-policy', user.email)
        ]);

        // 3. Identificar usuário
        window.complyr.identify('email', user.email);
      }

      // 4. Redirecionar
      alert('✅ Conta criada com sucesso!');
      router.push('/dashboard');

    } catch (error: any) {
      console.error('Erro no registro:', error);
      alert(error.message || 'Erro ao criar conta');
    } finally {
      setLoading(false);
    }
  };

  return (
    <div className="min-h-screen flex items-center justify-center bg-gray-100">
      <form onSubmit={handleSubmit} className="bg-white p-8 rounded shadow-md w-96">
        <h1 className="text-2xl font-bold mb-6">Criar Conta</h1>

        <input
          type="text"
          placeholder="Nome completo"
          value={formData.name}
          onChange={e => setFormData({ ...formData, name: e.target.value })}
          required
          className="w-full p-2 border rounded mb-4"
        />

        <input
          type="email"
          placeholder="Email"
          value={formData.email}
          onChange={e => setFormData({ ...formData, email: e.target.value })}
          required
          className="w-full p-2 border rounded mb-4"
        />

        <input
          type="password"
          placeholder="Senha"
          value={formData.password}
          onChange={e => setFormData({ ...formData, password: e.target.value })}
          required
          className="w-full p-2 border rounded mb-4"
        />

        <label className="flex items-center mb-2">
          <input
            type="checkbox"
            checked={formData.acceptTerms}
            onChange={e => setFormData({ ...formData, acceptTerms: e.target.checked })}
            className="mr-2"
          />
          <span className="text-sm">
            Aceito os <a href="/termos" target="_blank" className="text-blue-600 underline">Termos de Uso</a>
          </span>
        </label>

        <label className="flex items-center mb-6">
          <input
            type="checkbox"
            checked={formData.acceptPrivacy}
            onChange={e => setFormData({ ...formData, acceptPrivacy: e.target.checked })}
            className="mr-2"
          />
          <span className="text-sm">
            Aceito a <a href="/privacidade" target="_blank" className="text-blue-600 underline">Política de Privacidade</a>
          </span>
        </label>

        <button
          type="submit"
          disabled={loading}
          className="w-full bg-blue-600 text-white p-2 rounded hover:bg-blue-700 disabled:bg-gray-400"
        >
          {loading ? 'Criando conta...' : 'Criar Conta'}
        </button>
      </form>
    </div>
  );
}

🔧 Vue.js¶

Exemplo: Composable para Complyr¶

// composables/useComplyr.ts
import { ref, onMounted, onUnmounted } from 'vue';

export function useComplyr() {
  const loaded = ref(false);
  const consented = ref(false);
  const identified = ref(false);
  const purposes = ref(null);

  const handleLoaded = () => {
    loaded.value = true;
  };

  const handleConsentUpdated = (event: CustomEvent) => {
    consented.value = true;
    purposes.value = event.detail.purposes;
  };

  const handleUserIdentified = () => {
    identified.value = true;
  };

  onMounted(() => {
    if (window.complyr) {
      loaded.value = true;
    }

    window.addEventListener('complyr:loaded', handleLoaded);
    window.addEventListener('complyr:consent-updated', handleConsentUpdated as EventListener);
    window.addEventListener('complyr:user-identified', handleUserIdentified);
  });

  onUnmounted(() => {
    window.removeEventListener('complyr:loaded', handleLoaded);
    window.removeEventListener('complyr:consent-updated', handleConsentUpdated as EventListener);
    window.removeEventListener('complyr:user-identified', handleUserIdentified);
  });

  return {
    loaded,
    consented,
    identified,
    purposes
  };
}

<!-- components/Footer.vue -->
<template>
  <footer class="bg-gray-800 text-white p-8">
    <div class="container mx-auto">
      <div class="grid grid-cols-3 gap-8">
        <div>
          <h3 class="font-bold mb-4">Sobre</h3>
          <p>Informações da empresa...</p>
        </div>

        <div>
          <h3 class="font-bold mb-4">Links</h3>
          <ul>
            <li><a href="/termos">Termos de Uso</a></li>
            <li><a href="/privacidade">Política de Privacidade</a></li>
            <li>
              <button @click="openPreferences" class="text-blue-400 hover:underline">
                Gerenciar Cookies
              </button>
            </li>
          </ul>
        </div>

        <div v-if="loaded">
          <h3 class="font-bold mb-4">Consentimento</h3>
          <p class="text-sm text-gray-400">
            {{ activeCount }}/5 finalidades ativas
          </p>
        </div>
      </div>
    </div>
  </footer>
</template>

<script setup lang="ts">
import { computed } from 'vue';
import { useComplyr } from '@/composables/useComplyr';

const { loaded, purposes } = useComplyr();

const activeCount = computed(() => {
  if (!purposes.value) return 0;
  return Object.values(purposes.value).filter(Boolean).length;
});

const openPreferences = () => {
  if (window.complyr) {
    window.complyr.openPreferences();
  }
};
</script>

📝 WordPress¶

Exemplo: Plugin Customizado ou functions.php¶

<?php
// functions.php ou custom-plugin.php

// Adicionar script Complyr no header
function add_complyr_script() {
  $workspace_id = 'SEU_WORKSPACE_ID';
  ?>
  <script
    src="https://app.complyr.com.br/tag/js"
    data-workspace-id="<?php echo esc_attr($workspace_id); ?>"
    data-complyr-script
    async
    defer>
  </script>

  <script>
    // Identificar usuário WordPress após login
    window.addEventListener('complyr:loaded', function() {
      <?php if (is_user_logged_in()): ?>
        const user = {
          email: '<?php echo esc_js(wp_get_current_user()->user_email); ?>',
          name: '<?php echo esc_js(wp_get_current_user()->display_name); ?>'
        };

        if (window.complyr && user.email) {
          window.complyr.identify('email', user.email);
          console.log('✅ Usuário WordPress identificado');
        }
      <?php endif; ?>
    });

    // Rastreamento de eventos (opcional)
    window.addEventListener('complyr:consent-updated', function(event) {
      const { purposes } = event.detail;

      // Exemplo: Carregar Pixel do Facebook se consentimento dado
      if (purposes.marketing && !window.fbq) {
        loadFacebookPixel();
      }
    });

    function loadFacebookPixel() {
      !function(f,b,e,v,n,t,s)
      {if(f.fbq)return;n=f.fbq=function(){n.callMethod?
      n.callMethod.apply(n,arguments):n.queue.push(arguments)};
      if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
      n.queue=[];t=b.createElement(e);t.async=!0;
      t.src=v;s=b.getElementsByTagName(e)[0];
      s.parentNode.insertBefore(t,s)}(window, document,'script',
      'https://connect.facebook.net/en_US/fbevents.js');

      fbq('init', 'SEU_PIXEL_ID');
      fbq('track', 'PageView');
    }
  </script>
  <?php
}
add_action('wp_head', 'add_complyr_script');

// Adicionar botão "Gerenciar Cookies" no footer
function add_manage_cookies_link($items, $args) {
  if ($args->theme_location == 'footer-menu') {
    $items .= '<li><a href="#" id="manage-cookies-wp">Gerenciar Cookies</a></li>';
  }
  return $items;
}
add_filter('wp_nav_menu_items', 'add_manage_cookies_link', 10, 2);

// Script para botão de preferências
function add_preferences_script() {
  ?>
  <script>
    document.addEventListener('DOMContentLoaded', function() {
      const btn = document.getElementById('manage-cookies-wp');

      if (btn) {
        btn.addEventListener('click', function(event) {
          event.preventDefault();

          if (window.complyr) {
            window.complyr.openPreferences();
          }
        });
      }
    });
  </script>
  <?php
}
add_action('wp_footer', 'add_preferences_script');
?>

🎨 Landing Page¶

Exemplo: Landing Page com Formulário de Cadastro¶

<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Cadastre-se Grátis - MinhaApp</title>

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

  <!-- Facebook Pixel (gerenciado pelo Complyr) -->

  <style>
    body {
      font-family: system-ui, -apple-system, sans-serif;
      margin: 0;
      padding: 0;
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      min-height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .container {
      background: white;
      padding: 40px;
      border-radius: 10px;
      box-shadow: 0 10px 30px rgba(0,0,0,0.3);
      max-width: 400px;
      width: 100%;
    }
    h1 {
      margin-top: 0;
      color: #333;
    }
    input {
      width: 100%;
      padding: 12px;
      margin-bottom: 15px;
      border: 1px solid #ddd;
      border-radius: 5px;
      box-sizing: border-box;
    }
    button {
      width: 100%;
      padding: 12px;
      background: #667eea;
      color: white;
      border: none;
      border-radius: 5px;
      font-size: 16px;
      cursor: pointer;
    }
    button:hover {
      background: #5568d3;
    }
    .checkbox-group {
      margin: 15px 0;
      font-size: 14px;
    }
    .checkbox-group label {
      display: flex;
      align-items: start;
      margin-bottom: 10px;
    }
    .checkbox-group input {
      width: auto;
      margin-right: 10px;
      margin-top: 3px;
    }
  </style>
</head>
<body>
  <div class="container">
    <h1>Cadastre-se Grátis</h1>
    <p>Teste grátis por 14 dias. Sem cartão de crédito.</p>

    <form id="signup-form">
      <input type="text" id="name" placeholder="Nome completo" required>
      <input type="email" id="email" placeholder="Email" required>
      <input type="password" id="password" placeholder="Senha" required>

      <div class="checkbox-group">
        <label>
          <input type="checkbox" id="accept-terms" required>
          <span>Aceito os <a href="/termos" target="_blank">Termos de Uso</a></span>
        </label>

        <label>
          <input type="checkbox" id="accept-privacy" required>
          <span>Aceito a <a href="/privacidade" target="_blank">Política de Privacidade</a></span>
        </label>
      </div>

      <button type="submit">Criar Conta Grátis</button>
    </form>
  </div>

  <script>
    document.getElementById('signup-form').addEventListener('submit', async function(event) {
      event.preventDefault();

      // Dados do formulário
      const formData = {
        name: document.getElementById('name').value,
        email: document.getElementById('email').value,
        password: document.getElementById('password').value
      };

      try {
        // 1. Criar conta via API
        const response = await fetch('https://api.minhaapp.com/register', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify(formData)
        });

        const user = await response.json();

        if (!response.ok) {
          throw new Error(user.message || 'Erro ao criar conta');
        }

        // 2. Registrar aceites no Complyr
        if (window.complyr) {
          await Promise.all([
            window.complyr.acceptPolicy('terms-of-service', user.email),
            window.complyr.acceptPolicy('privacy-policy', user.email)
          ]);

          // 3. Identificar usuário
          window.complyr.identify('email', user.email);
        }

        // 4. Rastrear conversão (CompleteRegistration)
        const consent = JSON.parse(localStorage.getItem('complyr_consent') || '{}');

        if (consent.purposes && consent.purposes.marketing && window.fbq) {
          fbq('track', 'CompleteRegistration', {
            value: 50.00,  // Valor estimado de um lead
            currency: 'BRL',
            content_name: 'Landing Page Signup'
          });
        }

        // 5. Redirecionar
        alert('✅ Conta criada com sucesso!');
        window.location.href = '/onboarding';

      } catch (error) {
        console.error('Erro:', error);
        alert(error.message || 'Erro ao criar conta. Tente novamente.');
      }
    });
  </script>
</body>
</html>

📚 Melhores Práticas¶

✅ DO: Fazer¶

Sempre aguarde complyr:loaded antes de usar a API
Verifique consentimento antes de carregar scripts de rastreamento
Identifique usuários após login para Advanced Matching
Registre aceites de políticas em formulários de cadastro
Use eventos para reagir a mudanças de consentimento
Limpe listeners em SPAs e componentes React/Vue
Adicione botão "Gerenciar Cookies" no footer
Teste em diferentes cenários (com/sem consentimento)

❌ DON'T: Evitar¶

Não carregue scripts antes do consentimento
Não ignore falhas ao chamar a API
Não confie que window.complyr sempre existe - adicione verificações
Não bloqueie o carregamento da página aguardando Complyr
Não rastreie sem consentimento mesmo em desenvolvimento

🔗 Recursos Relacionados¶

API: - window.complyr - Objeto global e métodos - Eventos - Lista completa de eventos - identify() - Identificação de usuários - acceptPolicy() - Aceitar políticas - openPreferences() - Abrir preferências

Integrações: - Google Tag Manager - Setup GTM - Facebook Pixel - Setup Pixel

📞 Suporte¶

Dúvidas sobre os exemplos?

FAQ - Perguntas frequentes
Documentação Completa - Índice geral
Email: contato@complyr.com.br