Iubenda logo
Crie Agora

Documentação

Tabela de conteúdos

Como customizar a aparência e o comportamento do banner de cookie (guia de introdução)

Você pode modificar facilmente a aparência e a funcionalidade padrão do banner de consentimento do cookie em seu site – isso inclui cor de fundo, dimensões, conteúdo, posição, botões “Aceitar” e “Personalizar” e funcionalidade básica.

Este artigo destaca como fazer alterações básicas na aparência e na posição do aviso de cookie. Para uma análise mais aprofundada das configurações e personalização, consulte este manual completo sobre a instalação e personalização total de nossa solução de gerenciamento de cookies (que inclui como modificar extensivamente os visuais do banner, o funcionamento geral da Cookie Solution e a obtenção de consentimento).

Para começar a personalizar seu aviso de cookie, acesse o Painel > [seu site / aplicativo] e clique em Editar na área Cookie Solution. Isso o encaminhará diretamente para o painel de customização:

Banner de Cookie do iubenda - personalização Básica

Aqui você pode, instantaneamente:

  • Alterar a posição do banner (topo, base, topo esquerdo / direito flutuante, base esquerda / direita flutuante, centro flutuante ou topo / base central flutuante).
  • Adicione um efeito opcional de “lightbox” por meio do recurso de sobreposição de plano de fundo.
  • Personalize o widget de privacidade (veja abaixo).
  • Altere o visual básico do banner, como a cor do tema (escuro, claro ou personalizado).
  • Personalize o cabeçalho com as cores e o logotipo de sua marca (veja abaixo).
  • Remova a marca iubenda da segunda camada, marcando a caixa de seleção White Label.
  • Ative / desative os botões “Aceitar” e “Customizar“.
  • Ative / desative o botão “Rejeitar” ( veja abaixo ).
  • Ative / desative o botão de fechar do banner (“x”).
  • Ative / desative o consentimento na navegação contínua. Desmarque se não quiser obter consentimento na rolagem de página e na atividade de navegação continuada. Se esta opção estiver desmarcada, os consentimentos só serão registrados quando o usuário fechar precisamente o banner / modal ou clicar no botão “Continuar a navegar” (no modal).
  • Ative / desative o consentimento na rolagem. Desmarque se não quiser obter consentimento na rolagem (mais detalhes em Cookies e GDPR: o que é realmente necessário?).
  • Ativar / desativar consentimento na interação da página. Desmarque se não quiser obter consentimento ao clicar em um botão / link na página.
  • Ative / desative o consentimento por categoria. Selecione se quiser dar aos usuários um controle mais granular sobre quais categorias de cookies ou outros identificadores dar consentimento. Leia a documentação para a configuração adequada.
  • Ative a IAB Transparency and Consent Framework, recomendado se você for uma editora primária que trabalha com anunciantes terceirizados (como o Google Ads).

Widget de privacidade

Este recurso opcional permite que seus usuários acessem e editem as preferências de rastreamento a qualquer momento após definir suas preferências iniciais.

A menos que você adicione manualmente a opção de editar as preferências de consentimento como um link no rodapé, se você habilitar a IAB Transparency and Consent Framework , esse recurso será automaticamente exibido como um pequeno widget flutuante na página.

Para personalizar, clique no menu suspenso Notificação

Configurador da Cookie Solution - lista suspensa de notificações

e escolha suas opções preferidas em “Widget de privacidade”:

Configurador da Cookie Solution - widget de privacidade

Opções de customização de marca

Você pode customizar o cabeçalho do banner de cookie com as cores e o logotipo de sua marca. Por exemplo, em nosso site, usamos as cores e o logotipo de nossa empresa:

Banner de cookie personalizado com as cores e logotipo da marca

Para ativar este recurso, marque a opção Logotipo e cores customizadas no configurador:

Configurador de banner de cookie - logotipo e cores personalizadas

Após escolher e adicionar o logotipo, as cores do texto e do plano de fundo, os parâmetros brandTextColor, brandBackgroundColor e logo serão adicionados ao snippet de código da Cookie Solution.

💡 Dica de logotipo: use um SVG branco no fundo transparente para obter o melhor resultado.

Veja a demonstração no CodePen ou leia nosso guia avançado para saber mais sobre as opções de marcas personalizadas.

Botão Rejeitar

Uma vez ativado, este recurso permitirá que seus usuários recusem dar consentimento para cookies ao clicar no botão explícito de rejeição, em vez de clicar no ícone padrão de fechamento. Esta opção é especialmente relevante para usuários que operam no Reino Unido, já que a ICO exige a exibição do botão de rejeição.

Banner de cookie com botão de rejeição

Para ativar este recurso, marque a opção “Botão explícito de rejeição” no configurador:

Configurador de solução de cookie - botão Rejeitar

Consequentemente, "rejectButtonDisplay": true será adicionado ao seu snippet de código da Cookie Solution.

* Observe que, se essa opção for ativada, o ícone de fechamento no canto superior direito do banner do cookie será desativado.

Como acontece com a maioria dos outros elementos da Cookie Solution, a cor e o texto do botão são totalmente customizáveis . Veja a demonstração no CodePen ou leia nosso guia avançado para saber mais sobre personalização e callbacks.

Visualização avançada

Clicar em Visualização avançada abrirá uma lista completa de opções avançadas que permitirão a você customizar tudo, desde a animação do banner, texto do link da política de cookies, botões e conteúdo do banner, à CSS do banner, tempo de expiração do cookie e callbacks.

Painel de personalização da Cookie Solution do iubenda - visualização avançada

Gerencie o consentimento de cookie com a Cookie Solution

Gere um banner de cookie

Veja também