openPreferences()¶

Visão Geral¶

O método openPreferences() abre a central de preferências de consentimento, permitindo que o usuário revise e modifique suas escolhas de consentimento para diferentes finalidades (Analytics, Marketing, Personalização, etc.). Este método é essencial para conformidade com LGPD, que garante ao titular dos dados o direito de revisar e alterar seu consentimento a qualquer momento.

Para Que Serve?¶

O openPreferences() é utilizado para fornecer aos usuários controle total sobre seus dados:

Link de Privacidade no Footer: "Gerenciar Preferências de Cookies"
Página de Configurações: Seção de privacidade no perfil do usuário
Conformidade LGPD: Direito à informação e controle sobre consentimento (Art. 18, § 2º)
Revisão de Consentimento: Permitir que usuários alterem suas escolhas após aceitação inicial
Transparência: Mostrar quais finalidades foram aceitas/negadas e quando

Assinatura TypeScript¶

interface ComplyrAPI {
  /**
   * Abre a central de preferências de consentimento
   *
   * Exibe uma modal onde o usuário pode revisar e modificar suas escolhas
   * de consentimento para diferentes finalidades (Analytics, Marketing, etc.)
   *
   * @returns void
   * @throws Error se o script Complyr não estiver carregado
   */
  openPreferences(): void;
}

// Acesso via window
declare global {
  interface Window {
    complyr?: ComplyrAPI;
  }
}

Parâmetros¶

Nenhum. O método não recebe parâmetros.

Valor de Retorno¶

Tipo: void

O método não retorna nenhum valor. Sua única ação é abrir a modal de preferências de consentimento.

Exemplos Práticos¶

Adicione um link no rodapé do site para permitir que usuários gerenciem suas preferências:

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

  <!-- Carregar script Complyr -->
  <script
    src="https://app.complyr.com.br/tag/js"
    data-workspace-id="seu-workspace-id"
    data-complyr-script
    async
    defer>
  </script>
</head>
<body>
  <!-- Conteúdo da página -->
  <main>
    <h1>Bem-vindo</h1>
    <p>Conteúdo do site...</p>
  </main>

  <!-- Footer com link de preferências -->
  <footer>
    <div class="footer-links">
      <a href="/sobre">Sobre Nós</a>
      <a href="/contato">Contato</a>
      <a href="#" onclick="openCookiePreferences(event)">
        🍪 Gerenciar Preferências de Cookies
      </a>
      <a href="/politica-privacidade">Política de Privacidade</a>
    </div>

    <p>&copy; 2025 Minha Empresa. Todos os direitos reservados.</p>
  </footer>

  <script>
    function openCookiePreferences(event) {
      event.preventDefault();

      // Verificar se Complyr está carregado
      if (window.complyr) {
        window.complyr.openPreferences();
      } else {
        console.error('Complyr não está disponível');
        alert('Sistema de preferências não disponível no momento');
      }
    }

    // Também pode ser chamado diretamente
    // <a href="#" onclick="event.preventDefault(); window.complyr?.openPreferences();">
  </script>
</body>
</html>

2. Botão em Página de Configurações¶

Integrar com página de configurações do usuário:

<!-- Página de configurações do perfil -->
<div class="settings-page">
  <h1>Configurações de Privacidade</h1>

  <section class="privacy-settings">
    <h2>Gerenciar Dados e Privacidade</h2>

    <div class="setting-item">
      <h3>Preferências de Cookies</h3>
      <p>
        Controle quais tipos de cookies e tecnologias de rastreamento
        você permite em nosso site.
      </p>
      <button
        onclick="window.complyr?.openPreferences()"
        class="btn btn-secondary"
      >
        <span>🍪</span> Gerenciar Preferências de Cookies
      </button>
    </div>

    <div class="setting-item">
      <h3>Revogar Consentimento</h3>
      <p>
        Você pode revogar seu consentimento e solicitar a exclusão
        de seus dados a qualquer momento.
      </p>
      <button
        onclick="revokeAllConsent()"
        class="btn btn-danger"
      >
        <span>🗑️</span> Revogar Todo Consentimento
      </button>
    </div>
  </section>
</div>

<script>
  async function revokeAllConsent() {
    const confirmed = confirm(
      'Tem certeza que deseja revogar todo consentimento? ' +
      'Isso bloqueará cookies de Analytics, Marketing e outras funcionalidades.'
    );

    if (!confirmed) return;

    try {
      if (window.complyr) {
        window.complyr.revokeConsent('Usuário revogou consentimento via configurações');
        alert('Consentimento revogado com sucesso.');
        window.location.reload();
      }
    } catch (error) {
      console.error('Erro ao revogar consentimento:', error);
      alert('Erro ao revogar consentimento. Tente novamente.');
    }
  }
</script>

3. Componente React¶

Componente de privacidade para aplicações React:

import React from 'react';

interface PrivacyControlsProps {
  className?: string;
}

export const PrivacyControls: React.FC<PrivacyControlsProps> = ({ className }) => {
  const handleOpenPreferences = () => {
    if (window.complyr) {
      window.complyr.openPreferences();
    } else {
      console.error('Complyr não está disponível');
      alert('Sistema de preferências não disponível');
    }
  };

  const handleRevokeConsent = async () => {
    const confirmed = window.confirm(
      'Tem certeza que deseja revogar todo consentimento? ' +
      'Isso bloqueará funcionalidades de Analytics e Marketing.'
    );

    if (!confirmed) return;

    try {
      if (window.complyr) {
        window.complyr.revokeConsent('Usuário revogou via página de privacidade');
        alert('Consentimento revogado com sucesso.');
        window.location.reload();
      }
    } catch (error) {
      console.error('Erro:', error);
      alert('Erro ao revogar consentimento.');
    }
  };

  return (
    <div className={`privacy-controls ${className || ''}`}>
      <h2>Privacidade e Dados</h2>

      <div className="control-section">
        <h3>Preferências de Cookies</h3>
        <p>
          Gerencie suas preferências de cookies e tecnologias de rastreamento.
          Você pode escolher quais finalidades aceitar ou rejeitar.
        </p>
        <button
          onClick={handleOpenPreferences}
          className="btn btn-primary"
        >
          🍪 Gerenciar Preferências
        </button>
      </div>

      <div className="control-section danger-zone">
        <h3>Revogar Consentimento</h3>
        <p>
          Revogue seu consentimento para processamento de dados pessoais.
          Esta ação bloqueará cookies não essenciais.
        </p>
        <button
          onClick={handleRevokeConsent}
          className="btn btn-danger"
        >
          🗑️ Revogar Todo Consentimento
        </button>
      </div>
    </div>
  );
};

// TypeScript declaration
declare global {
  interface Window {
    complyr?: {
      openPreferences(): void;
      revokeConsent(reason?: string): void;
    };
  }
}

4. Hook React para Preferências¶

Custom hook para gerenciar preferências de consentimento:

import { useCallback, useEffect, useState } from 'react';

interface UseConsentPreferencesResult {
  isComplyrLoaded: boolean;
  openPreferences: () => void;
  revokeConsent: (reason?: string) => void;
  hasConsent: boolean;
}

export const useConsentPreferences = (): UseConsentPreferencesResult => {
  const [isComplyrLoaded, setIsComplyrLoaded] = useState(false);
  const [hasConsent, setHasConsent] = useState(false);

  useEffect(() => {
    // Verificar se Complyr está carregado
    const checkComplyr = () => {
      if (window.complyr) {
        setIsComplyrLoaded(true);

        // Verificar se há consentimento armazenado
        const consent = localStorage.getItem('complyr_consent');
        setHasConsent(!!consent);
      }
    };

    // Verificar imediatamente
    checkComplyr();

    // Aguardar evento de carregamento
    document.addEventListener('complyr:loaded', checkComplyr);

    return () => {
      document.removeEventListener('complyr:loaded', checkComplyr);
    };
  }, []);

  const openPreferences = useCallback(() => {
    if (window.complyr) {
      window.complyr.openPreferences();
    } else {
      console.error('Complyr não está carregado');
    }
  }, []);

  const revokeConsent = useCallback((reason?: string) => {
    if (window.complyr) {
      window.complyr.revokeConsent(reason);
      setHasConsent(false);
    } else {
      console.error('Complyr não está carregado');
    }
  }, []);

  return {
    isComplyrLoaded,
    openPreferences,
    revokeConsent,
    hasConsent,
  };
};

// Exemplo de uso do hook
export const PrivacySettingsPage: React.FC = () => {
  const { isComplyrLoaded, openPreferences, hasConsent } = useConsentPreferences();

  if (!isComplyrLoaded) {
    return <div>Carregando configurações de privacidade...</div>;
  }

  return (
    <div className="privacy-settings">
      <h1>Configurações de Privacidade</h1>

      <div className="consent-status">
        <p>
          Status: {hasConsent ? '✅ Consentimento ativo' : '❌ Sem consentimento'}
        </p>
      </div>

      <button onClick={openPreferences}>
        Gerenciar Preferências de Cookies
      </button>
    </div>
  );
};

5. Vue.js Composable¶

Composable para Vue 3:

import { ref, onMounted } from 'vue';

export function useConsentPreferences() {
  const isComplyrLoaded = ref(false);
  const hasConsent = ref(false);

  const checkComplyr = () => {
    if (window.complyr) {
      isComplyrLoaded.value = true;

      const consent = localStorage.getItem('complyr_consent');
      hasConsent.value = !!consent;
    }
  };

  const openPreferences = () => {
    if (window.complyr) {
      window.complyr.openPreferences();
    } else {
      console.error('Complyr não está carregado');
    }
  };

  const revokeConsent = (reason?: string) => {
    if (window.complyr) {
      window.complyr.revokeConsent(reason);
      hasConsent.value = false;
    } else {
      console.error('Complyr não está carregado');
    }
  };

  onMounted(() => {
    checkComplyr();
    document.addEventListener('complyr:loaded', checkComplyr);
  });

  return {
    isComplyrLoaded,
    hasConsent,
    openPreferences,
    revokeConsent,
  };
}

Exemplo de uso no componente Vue:

<template>
  <div class="privacy-settings">
    <h1>Configurações de Privacidade</h1>

    <div v-if="!isComplyrLoaded" class="loading">
      Carregando configurações de privacidade...
    </div>

    <div v-else class="settings-content">
      <div class="consent-status">
        <p>
          Status:
          <span v-if="hasConsent" class="status-active">
            ✅ Consentimento ativo
          </span>
          <span v-else class="status-inactive">
            ❌ Sem consentimento
          </span>
        </p>
      </div>

      <div class="setting-section">
        <h2>Preferências de Cookies</h2>
        <p>
          Controle quais tipos de cookies você permite em nosso site.
        </p>
        <button @click="openPreferences" class="btn btn-primary">
          🍪 Gerenciar Preferências
        </button>
      </div>

      <div class="setting-section danger-zone">
        <h2>Revogar Consentimento</h2>
        <p>
          Revogue seu consentimento para processamento de dados.
        </p>
        <button @click="handleRevoke" class="btn btn-danger">
          🗑️ Revogar Consentimento
        </button>
      </div>
    </div>
  </div>
</template>

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

const { isComplyrLoaded, hasConsent, openPreferences, revokeConsent } =
  useConsentPreferences();

const handleRevoke = () => {
  const confirmed = confirm(
    'Tem certeza que deseja revogar todo consentimento?'
  );

  if (confirmed) {
    revokeConsent('Usuário revogou via configurações Vue');
    alert('Consentimento revogado com sucesso');
  }
};
</script>

<style scoped>
.privacy-settings {
  max-width: 800px;
  margin: 0 auto;
  padding: 2rem;
}

.status-active {
  color: green;
  font-weight: bold;
}

.status-inactive {
  color: red;
  font-weight: bold;
}

.danger-zone {
  border: 1px solid #ff4444;
  padding: 1rem;
  border-radius: 8px;
  background-color: #fff5f5;
}
</style>

6. WordPress Plugin¶

Plugin WordPress para adicionar link de preferências:

<?php
/**
 * Plugin Name: Complyr Preferences Link
 * Description: Adiciona link "Gerenciar Cookies" no footer
 * Version: 1.0.0
 */

// Adicionar link no menu do footer
add_filter('wp_nav_menu_items', 'complyr_add_preferences_link', 10, 2);
function complyr_add_preferences_link($items, $args) {
    // Apenas no menu do footer
    if ($args->theme_location === 'footer-menu') {
        $preferences_link = '<li class="menu-item">
            <a href="#" onclick="event.preventDefault(); window.complyr?.openPreferences();">
                🍪 Gerenciar Cookies
            </a>
        </li>';

        $items .= $preferences_link;
    }

    return $items;
}

// Adicionar script Complyr
add_action('wp_footer', 'complyr_add_preferences_script');
function complyr_add_preferences_script() {
    $workspace_id = get_option('complyr_workspace_id');

    if (!$workspace_id) {
        return;
    }
    ?>
    <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>
    // Adicionar evento ao carregar
    document.addEventListener('complyr:loaded', function() {
        console.log('✅ Complyr carregado - preferências disponíveis');
    });
    </script>
    <?php
}

// Adicionar shortcode [complyr_preferences]
add_shortcode('complyr_preferences', 'complyr_preferences_shortcode');
function complyr_preferences_shortcode($atts) {
    $atts = shortcode_atts([
        'text' => 'Gerenciar Preferências de Cookies',
        'class' => 'complyr-preferences-btn',
    ], $atts);

    return sprintf(
        '<button onclick="window.complyr?.openPreferences()" class="%s">%s</button>',
        esc_attr($atts['class']),
        esc_html($atts['text'])
    );
}

// Adicionar widget de preferências
class Complyr_Preferences_Widget extends WP_Widget {
    public function __construct() {
        parent::__construct(
            'complyr_preferences_widget',
            'Complyr - Preferências de Cookies',
            ['description' => 'Widget para gerenciar preferências de cookies']
        );
    }

    public function widget($args, $instance) {
        echo $args['before_widget'];

        if (!empty($instance['title'])) {
            echo $args['before_title'] . esc_html($instance['title']) . $args['after_title'];
        }

        ?>
        <div class="complyr-preferences-widget">
            <p>Controle suas preferências de cookies e privacidade.</p>
            <button
                onclick="window.complyr?.openPreferences()"
                class="button"
            >
                🍪 Gerenciar Preferências
            </button>
        </div>
        <?php

        echo $args['after_widget'];
    }

    public function form($instance) {
        $title = !empty($instance['title']) ? $instance['title'] : 'Privacidade';
        ?>
        <p>
            <label for="<?php echo esc_attr($this->get_field_id('title')); ?>">
                Título:
            </label>
            <input
                class="widefat"
                id="<?php echo esc_attr($this->get_field_id('title')); ?>"
                name="<?php echo esc_attr($this->get_field_name('title')); ?>"
                type="text"
                value="<?php echo esc_attr($title); ?>"
            />
        </p>
        <?php
    }

    public function update($new_instance, $old_instance) {
        $instance = [];
        $instance['title'] = (!empty($new_instance['title']))
            ? strip_tags($new_instance['title'])
            : '';
        return $instance;
    }
}

// Registrar widget
add_action('widgets_init', function() {
    register_widget('Complyr_Preferences_Widget');
});

7. Next.js App Router¶

Componente server e client para Next.js 15:

// app/components/PrivacyControls.tsx
'use client';

import { useEffect, useState } from 'react';

export default function PrivacyControls() {
  const [isComplyrLoaded, setIsComplyrLoaded] = useState(false);

  useEffect(() => {
    const checkComplyr = () => {
      if (window.complyr) {
        setIsComplyrLoaded(true);
      }
    };

    checkComplyr();
    document.addEventListener('complyr:loaded', checkComplyr);

    return () => {
      document.removeEventListener('complyr:loaded', checkComplyr);
    };
  }, []);

  const handleOpenPreferences = () => {
    if (window.complyr) {
      window.complyr.openPreferences();
    } else {
      alert('Sistema de preferências não disponível');
    }
  };

  if (!isComplyrLoaded) {
    return (
      <div className="privacy-controls loading">
        <p>Carregando preferências...</p>
      </div>
    );
  }

  return (
    <div className="privacy-controls">
      <button
        onClick={handleOpenPreferences}
        className="preferences-button"
      >
        🍪 Gerenciar Cookies
      </button>
    </div>
  );
}

// TypeScript declaration
declare global {
  interface Window {
    complyr?: {
      openPreferences(): void;
    };
  }
}

Layout com footer:

// app/layout.tsx
import PrivacyControls from '@/components/PrivacyControls';

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="pt-BR">
      <head>
        {/* Complyr Script */}
        <script
          src="https://app.complyr.com.br/tag/js"
          data-workspace-id={process.env.NEXT_PUBLIC_COMPLYR_WORKSPACE_ID}
          data-complyr-script
          async
          defer
        />
      </head>
      <body>
        {children}

        <footer>
          <div className="footer-links">
            <a href="/sobre">Sobre</a>
            <a href="/contato">Contato</a>
            <PrivacyControls />
            <a href="/privacidade">Privacidade</a>
          </div>
        </footer>
      </body>
    </html>
  );
}

8. Botão Flutuante (Floating Action Button)¶

Adicione um botão flutuante sempre visível:

<style>
.floating-privacy-btn {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background-color: #4F46E5;
  color: white;
  border: none;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  font-size: 24px;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  z-index: 9999;
  transition: transform 0.2s, box-shadow 0.2s;
}

.floating-privacy-btn:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
}

.floating-privacy-btn:active {
  transform: scale(0.95);
}

/* Tooltip */
.floating-privacy-btn::before {
  content: "Gerenciar Cookies";
  position: absolute;
  right: 70px;
  top: 50%;
  transform: translateY(-50%);
  background-color: #333;
  color: white;
  padding: 8px 12px;
  border-radius: 6px;
  white-space: nowrap;
  font-size: 14px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
}

.floating-privacy-btn:hover::before {
  opacity: 1;
}

/* Mobile */
@media (max-width: 768px) {
  .floating-privacy-btn {
    bottom: 15px;
    right: 15px;
    width: 50px;
    height: 50px;
    font-size: 20px;
  }
}
</style>

<!-- Botão flutuante -->
<button
  class="floating-privacy-btn"
  onclick="window.complyr?.openPreferences()"
  aria-label="Gerenciar preferências de cookies"
>
  🍪
</button>

Fluxo de Execução¶

sequenceDiagram
    participant User as Usuário
    participant App as Aplicação
    participant Complyr as window.complyr
    participant Modal as Modal de Preferências
    participant Storage as localStorage

    User->>App: Clica em "Gerenciar Cookies"
    App->>Complyr: openPreferences()
    Complyr->>Complyr: Verifica se script está carregado
    Complyr->>Storage: Carrega consentimento atual
    Storage-->>Complyr: Dados de consentimento
    Complyr->>Modal: Renderiza modal com estado atual
    Modal->>User: Exibe preferências

    Note over Modal: Analytics: ✅ Aceito<br/>Marketing: ❌ Negado<br/>Personalização: ✅ Aceito

    User->>Modal: Altera preferências
    User->>Modal: Clica "Salvar"
    Modal->>Complyr: Atualiza consentimento
    Complyr->>Storage: Salva novas preferências
    Complyr->>Complyr: Dispara evento 'consent-updated'
    Complyr->>Modal: Fecha modal
    Modal-->>User: Feedback "Preferências salvas"

Conformidade LGPD¶

Direito à Informação e Controle (Art. 18, § 2º)¶

O método openPreferences() implementa conformidade com o artigo 18, parágrafo 2º da LGPD:

Art. 18, § 2º O titular pode opor-se a tratamento realizado com fundamento em uma das hipóteses de dispensa de consentimento, em caso de descumprimento ao disposto nesta Lei.

Como o Complyr implementa:

Transparência: Modal exibe claramente quais finalidades foram aceitas/negadas
Controle Granular: Usuário pode aceitar/negar cada finalidade individualmente
Facilidade de Acesso: Link sempre visível no footer ou configurações
Sem Fricção: Processo simples, sem necessidade de login
Confirmação Visual: Feedback imediato ao salvar alterações

Requisitos de Acessibilidade¶

A central de preferências deve ser facilmente acessível:

Obrigatório: - ✅ Link visível no footer de todas as páginas - ✅ Acessível sem necessidade de login - ✅ Funciona em dispositivos móveis - ✅ Acessível por teclado (Tab, Enter, Esc) - ✅ ARIA labels para leitores de tela

Recomendado: - Link em página de configurações do usuário - Botão flutuante sempre visível - Shortcut de teclado (ex: Ctrl+Shift+P)

Prazo para Atendimento¶

Quando usuário modifica preferências, as alterações devem ser aplicadas imediatamente:

Aceitar finalidade: Tags (GTM, Facebook Pixel) ativadas instantaneamente
Negar finalidade: Tags bloqueadas e cookies removidos
Sem reload: Alterações aplicadas sem recarregar página (quando possível)

Registro de Alterações¶

Toda mudança de preferência é registrada para auditoria:

{
  "event": "consent-updated",
  "timestamp": "2025-10-22T15:30:00Z",
  "previousConsent": {
    "analytics": true,
    "marketing": true,
    "personalization": false
  },
  "newConsent": {
    "analytics": true,
    "marketing": false,
    "personalization": true
  },
  "changedBy": "user",
  "method": "preferences-modal"
}

Tratamento de Erros¶

1. Script Complyr não carregado¶

function openPreferences() {
  if (!window.complyr) {
    console.error('Complyr não está carregado');
    alert('Sistema de preferências temporariamente indisponível. Tente novamente.');
    return;
  }

  window.complyr.openPreferences();
}

2. Aguardar carregamento do script¶

function openPreferencesWhenReady() {
  if (window.complyr) {
    // Já está carregado
    window.complyr.openPreferences();
  } else {
    // Aguardar evento de carregamento
    document.addEventListener('complyr:loaded', function() {
      window.complyr!.openPreferences();
    }, { once: true });

    // Timeout de 5 segundos
    setTimeout(() => {
      if (!window.complyr) {
        alert('Sistema de preferências não pôde ser carregado');
      }
    }, 5000);
  }
}

3. Verificação robusta¶

function safeOpenPreferences() {
  try {
    if (typeof window === 'undefined') {
      throw new Error('Window não disponível (SSR)');
    }

    if (!window.complyr) {
      throw new Error('Complyr não carregado');
    }

    if (typeof window.complyr.openPreferences !== 'function') {
      throw new Error('Método openPreferences não disponível');
    }

    window.complyr.openPreferences();
  } catch (error) {
    console.error('Erro ao abrir preferências:', error);
    alert('Não foi possível abrir as preferências. Recarregue a página e tente novamente.');
  }
}

Verificação de Debug¶

// Console do navegador
window.complyr?.openPreferences();

// Deve abrir a modal de preferências
// Verifique se modal aparece e se consentimento atual é exibido corretamente

2. Verificar evento de fechamento¶

// Escutar evento de atualização de consentimento
document.addEventListener('consent-updated', function(event) {
  console.log('✅ Consentimento atualizado:', event.detail);
});

// Abrir preferências, fazer mudanças, salvar
window.complyr.openPreferences();

3. Verificar localStorage¶

// Ver consentimento armazenado
const consent = localStorage.getItem('complyr_consent');
console.log('Consentimento atual:', JSON.parse(consent));

// Após modificar preferências, verificar novamente

4. Teste de acessibilidade¶

// Verificar se modal é acessível por teclado
// 1. Pressionar Tab até chegar no link "Gerenciar Cookies"
// 2. Pressionar Enter para abrir modal
// 3. Pressionar Tab para navegar entre opções
// 4. Pressionar Esc para fechar modal

Melhores Práticas¶

✅ DOs (Faça)¶

Sempre fornecer link no footer

<footer>
  <a href="#" onclick="event.preventDefault(); window.complyr?.openPreferences();">
    Gerenciar Cookies
  </a>
</footer>

Verificar se Complyr está carregado

if (window.complyr) {
  window.complyr.openPreferences();
} else {
  console.error('Complyr não disponível');
}

Usar event.preventDefault() em links

<a href="#" onclick="event.preventDefault(); window.complyr?.openPreferences();">
  Preferências
</a>

Tornar link acessível por teclado

<button onclick="window.complyr?.openPreferences()" aria-label="Gerenciar cookies">
  🍪 Cookies
</button>

Incluir em página de configurações

// Seção de privacidade nas configurações do usuário
<section>
  <h2>Privacidade</h2>
  <button onclick="window.complyr?.openPreferences()">
    Gerenciar Preferências de Cookies
  </button>
</section>

Logs para debug

document.addEventListener('complyr:loaded', () => {
  console.log('✅ Complyr carregado - preferências disponíveis');
});

Feedback visual ao usuário

document.addEventListener('consent-updated', () => {
  alert('Preferências salvas com sucesso!');
});

Mobile-friendly

/* Garantir que botão seja clicável em mobile */
.preferences-btn {
  min-width: 44px;
  min-height: 44px;
  padding: 12px 20px;
}

❌ DON'Ts (Não Faça)¶

Não ocultar link de preferências

<!-- ❌ ERRADO - link invisível ou difícil de encontrar -->
<a href="#" style="display:none;">Cookies</a>

Não usar href real sem preventDefault

<!-- ❌ ERRADO - navegará para # -->
<a href="#" onclick="window.complyr?.openPreferences();">
  Cookies
</a>

<!-- ✅ CORRETO -->
<a href="#" onclick="event.preventDefault(); window.complyr?.openPreferences();">
  Cookies
</a>

Não chamar sem verificar se script está carregado

// ❌ ERRADO - pode dar erro
window.complyr.openPreferences();

// ✅ CORRETO
window.complyr?.openPreferences();

Não exigir login para acessar preferências

// ❌ ERRADO - preferências devem ser públicas
if (!isUserLoggedIn()) {
  alert('Faça login para gerenciar cookies');
  return;
}
window.complyr.openPreferences();

Não abrir modal automaticamente em loop

// ❌ ERRADO - modal abrirá infinitamente
document.addEventListener('consent-updated', () => {
  window.complyr.openPreferences();
});

Não usar texto ambíguo

<!-- ❌ ERRADO - usuário não entende o que é -->
<a href="#">Configurações</a>

<!-- ✅ CORRETO - claro e específico -->
<a href="#">Gerenciar Preferências de Cookies</a>

Não ignorar acessibilidade

<!-- ❌ ERRADO - sem aria-label -->
<button onclick="window.complyr?.openPreferences()">
  🍪
</button>

<!-- ✅ CORRETO - acessível para leitores de tela -->
<button
  onclick="window.complyr?.openPreferences()"
  aria-label="Gerenciar preferências de cookies"
>
  🍪
</button>

Perguntas Frequentes (FAQ)¶

1. Onde devo colocar o link de preferências?¶

Obrigatório: - ✅ Footer de todas as páginas (link "Gerenciar Cookies")

Recomendado: - Página de configurações do usuário (seção de privacidade) - Página de Política de Privacidade (link contextual) - Página de Política de Cookies (link para modificar preferências)

Exemplo:

<footer>
  <a href="#" onclick="event.preventDefault(); window.complyr?.openPreferences();">
    🍪 Gerenciar Preferências de Cookies
  </a>
</footer>

2. Preciso recarregar a página após o usuário modificar preferências?¶

Não é obrigatório, mas depende da implementação:

Não precisa recarregar se: - Você escuta o evento consent-updated - Tags (GTM, Facebook Pixel) são ativadas/desativadas dinamicamente - Aplicação single-page (React, Vue, Next.js)

Precisa recarregar se: - Tags são carregadas apenas no page load - Aplicação multi-page tradicional - Scripts de terceiros não suportam ativação dinâmica

Exemplo com reload:

document.addEventListener('consent-updated', function() {
  alert('Preferências salvas! A página será recarregada.');
  window.location.reload();
});

Não é recomendado. Abrir a modal automaticamente pode ser intrusivo.

Use openPreferences() apenas quando: - Usuário clica explicitamente em link/botão - Usuário acessa página de configurações - Debug/desenvolvimento

Não use para: - ❌ Abrir automaticamente após aceitar banner - ❌ Abrir em loop após fechar modal - ❌ Abrir em intervalos de tempo

4. Como saber se o usuário salvou as preferências?¶

Escute o evento consent-updated:

document.addEventListener('consent-updated', function(event) {
  console.log('✅ Usuário atualizou preferências:', event.detail);

  // Exemplo de resposta
  // {
  //   analytics: true,
  //   marketing: false,
  //   personalization: true,
  //   essential: true,
  //   third_party: false
  // }
});

Sim! A modal é totalmente responsiva e funciona em todos os dispositivos.

Recursos mobile: - Touch-friendly (botões grandes) - Scroll vertical para lista de finalidades - Botão de fechar acessível - Não quebra layout em telas pequenas

Teste:

// Abrir em dispositivo mobile
window.complyr?.openPreferences();

// Verificar se modal é acessível

6. Posso personalizar o texto "Gerenciar Cookies"?¶

Sim! O texto do link é totalmente personalizável:

<!-- Opções de texto -->
<a href="#" onclick="event.preventDefault(); window.complyr?.openPreferences();">
  Gerenciar Preferências de Cookies
</a>

<a href="#" onclick="event.preventDefault(); window.complyr?.openPreferences();">
  Configurações de Privacidade
</a>

<a href="#" onclick="event.preventDefault(); window.complyr?.openPreferences();">
  Minhas Preferências
</a>

<button onclick="window.complyr?.openPreferences()">
  🍪 Cookies
</button>

7. Como garantir que o link de preferências seja acessível?¶

Siga as melhores práticas de acessibilidade:

Use elemento semântico (button ou link)
Adicione aria-label descritivo
Garanta contraste de cores adequado
Teste navegação por teclado (Tab, Enter, Esc)
Use texto claro (não apenas ícone)

Exemplo acessível:

<button
  onclick="window.complyr?.openPreferences()"
  aria-label="Abrir central de gerenciamento de preferências de cookies"
  class="preferences-button"
>
  🍪 Gerenciar Cookies
</button>

<style>
.preferences-button {
  /* Garantir tamanho mínimo para toque (44x44px) */
  min-width: 44px;
  min-height: 44px;

  /* Contraste adequado (WCAG AAA) */
  background-color: #4F46E5;
  color: white;

  /* Indicador de foco visível */
  outline: none;
}

.preferences-button:focus {
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.5);
}
</style>

Sim, mas com ressalvas:

Recomendado: Ícone + texto

<button onclick="window.complyr?.openPreferences()">
  🍪 Gerenciar Cookies
</button>

Aceitável: Apenas ícone com aria-label e tooltip

<button
  onclick="window.complyr?.openPreferences()"
  aria-label="Gerenciar preferências de cookies"
  title="Gerenciar Cookies"
>
  🍪
</button>

Não recomendado: Apenas ícone sem aria-label

<!-- ❌ ERRADO - inacessível para leitores de tela -->
<button onclick="window.complyr?.openPreferences()">
  🍪
</button>

9. O que acontece se chamar `openPreferences()` antes do script carregar?¶

Nada acontecerá. É importante verificar se o script está carregado:

Solução 1: Optional chaining

window.complyr?.openPreferences(); // Não dá erro se complyr não existir

Solução 2: Verificação explícita

if (window.complyr) {
  window.complyr.openPreferences();
} else {
  console.error('Complyr ainda não carregou');
}

Solução 3: Aguardar evento

function openPreferencesWhenReady() {
  if (window.complyr) {
    window.complyr.openPreferences();
  } else {
    document.addEventListener('complyr:loaded', () => {
      window.complyr!.openPreferences();
    }, { once: true });
  }
}

10. Posso abrir a modal de preferências em uma rota específica (ex: `/privacidade`)?¶

Sim! Use useEffect ou mounted:

React:

'use client';

import { useEffect } from 'react';

export default function PrivacyPage() {
  useEffect(() => {
    // Aguardar 500ms para garantir que Complyr carregou
    const timer = setTimeout(() => {
      window.complyr?.openPreferences();
    }, 500);

    return () => clearTimeout(timer);
  }, []);

  return (
    <div>
      <h1>Privacidade</h1>
      <p>Gerencie suas preferências de cookies...</p>
    </div>
  );
}

Vue:

<script setup lang="ts">
import { onMounted } from 'vue';

onMounted(() => {
  setTimeout(() => {
    window.complyr?.openPreferences();
  }, 500);
});
</script>

<template>
  <div>
    <h1>Privacidade</h1>
    <p>Gerencie suas preferências...</p>
  </div>
</template>

Suporte¶

Recursos Adicionais¶

Documentação Completa: https://docs.complyr.com.br
Customização do Banner: https://docs.complyr.com.br/customization/banner-styling
Exemplos Práticos: https://docs.complyr.com.br/examples

Contato¶

Email: contato@complyr.com.br
GitHub Issues: https://github.com/complyr/complyr/issues
LinkedIn: https://www.linkedin.com/company/complyr

Métodos Relacionados¶

loadPolicy() - Carregar e exibir políticas
identify() - Identificar usuário para rastreamento
revokeConsent() - Revogar consentimento (LGPD Art. 18, VI)
acceptPolicy() - Aceitar políticas programaticamente