Personalizar cores, textos e posição do banner

Tudo que o visitante vê está na tela Configuração do grupo, em três abas (Aparência, Textos e Privacidade), com prévia ao vivo ao lado: o que você muda aparece na hora, sem publicar nada no seu site, e um Salvar alterações grava as abas todas. Dentro de cada aba, as seções abrem uma de cada vez. É o mesmo editor do segundo passo do assistente de primeiros passos, e abre como ele, sem o menu lateral: Voltar ao Painel, no alto, sai da tela e pergunta antes se houver alteração sem salvar, e Cancelar descarta o que não foi salvo e volta ao Painel.

Aparência

A aba tem três seções: Formato, Cores e estilo e Conformidade. Em todo plano, inclusive no gratuito:

• Cor dos botões: vale nos três temas. A cor do texto dentro do botão não é escolhida por você: o banner calcula a que mantém o contraste legível sobre a cor escolhida.
• Paleta clara: o fundo e a cor do texto do banner, em hexadecimal. A paleta escura não é configurável: ela vem dos tons da identidade do Concedo, e a sua cor de botão continua valendo nela.

Nos planos pagos:

• Formato: diálogo, que é o padrão, ou barra, no rodapé ou no topo da página.
• Efeito de fundo: escurecer a página atrás do banner, que é o padrão, ou nenhum. Nos dois casos o visitante continua navegando antes de escolher: nada trava o site até ele aceitar, porque condicionar o acesso ao consentimento é o que o guia de cookies da ANPD recusa.
• Tema e arredondamento, no bloco Desenho do banner: claro, escuro ou seguir o dispositivo, que adota o tema que o visitante já usa no sistema dele; e o raio das bordas, para o banner combinar com o resto do site.
• Estilo e ordem dos botões: sólido ou contorno, e a ordem dos três. O peso visual é sempre o mesmo, em qualquer ordem.
• Logo: envie a imagem (PNG, JPEG ou WebP) ou informe o endereço https de um logo que você já hospeda. Quando há imagem enviada, ela vence o endereço.

A seção Conformidade liga e desliga as categorias e guarda três decisões que têm página própria, listadas no fim deste artigo.

Textos

A aba Textos reúne os idiomas e tudo que o visitante lê: título, corpo, rótulos dos botões, a introdução da aba Sobre do banner, o nome e a descrição de cada categoria, os rótulos do cartão que o ícone abre depois da escolha e o link da sua política de privacidade. Na aba Sobre, quem responde pelos dados e como retirar a escolha não se editam: é o que a LGPD manda informar. Se você gerou a política pelo Concedo, use o link da página hospedada, que já está em Documentos.

Escrever os próprios textos é dos planos pagos. No gratuito o banner apresenta o nosso texto revisado, o mesmo que ele já mostra a quem lê nos outros idiomas, e nunca fica sem texto. O link da sua política continua no aviso em qualquer plano: ele é o caminho do visitante até o documento, não um rótulo.

Ícone de preferências

Respondido o aviso, o banner fecha e fica na tela o acionador: o botão redondo de 48 px que reabre as preferências. É por ele que alguém volta atrás, e a LGPD cobra que retirar o consentimento seja tão fácil quanto dá-lo. Na aba Privacidade, a seção Ícone de preferências mostra na prévia o cartão que ele abre e decide seis coisas:

• A porta de volta: com Mostrar o ícone de preferências ligado, o ícone flutuante do Concedo; desligado, um link no rodapé do seu site. Com o link, nada flutua sobre a sua interface, e a tela avisa que ele passa a ser o único caminho de volta. O trecho do link fica sempre à mão, no fim da seção: dá para publicar o link junto com o ícone.
• A cor do ícone: a da marca, clara para site escuro, ou a mesma cor dos botões do banner.
• O canto onde o ícone mora: superior ou inferior, esquerdo ou direito.
• A distância da borda, em pixels, com um campo para o computador e outro para o celular. Janela de até 640 px de largura usa o campo do celular.
• Desviar sozinho quando o canto escolhido estiver ocupado. Nasce desligado.
• O tema do cartão que o ícone abre: o mesmo do banner, claro ou escuro.

A cor, o canto, as duas distâncias e o desvio valem em todos os planos, inclusive no gratuito: um botão nosso em cima do menu do seu site é um problema seu, não um recurso a vender. A porta no rodapé e o tema do cartão são dos planos pagos.

A segunda seção da aba, Declaração, decide se a declaração de cookies abre com o texto do banner, o mesmo que o visitante já leu. Nasce desligada, em todos os planos.

Posicionar o acionador na sua própria página

Escolher o canto resolve a colisão que você já conhece. Não resolve a pergunta que só a tela real responde: quantos pixels acima da barra de navegação o ícone precisa ficar? Para isso o painel abre uma página sua e deixa você arrastar o ícone dentro dela.

Na mesma seção, no bloco Posicionar na sua própria página:

1. Escreva o endereço da página que você quer ajustar. Precisa ser do domínio deste site, e o campo sugere as páginas que os seus visitantes já abriram.
2. Clique em Abrir a minha página e posicionar. Ela abre em outra janela, no seu navegador. Se ele bloquear janelas pop-up, libere para o painel e clique de novo.
3. Arraste o acionador até onde ele deve ficar. Nessa janela ele fica onde for solto e encaixa no canto mais próximo, em vez de voltar sozinho.
4. Leia o cartão que aparece na janela. Ele mostra o canto, a distância resultante em pixels, o que está embaixo do ícone naquele ponto (livre, ocupado ou botão coberto) e se a medida vale para o computador ou para o celular.
5. Clique em Salvar aqui. O painel mostra a posição nova sem você recarregar nada.

Funciona em tela logada, e é o que torna o recurso útil: quem entra na sua conta é você, no seu navegador. Nós não abrimos a sua página em servidor nenhum. Da página não sai nada: o que chega até nós é o canto, a faixa de largura e um número de pixels.

Posicione duas vezes, uma com a janela larga e outra com ela estreita. A distância do computador e a do celular são campos separados, e é a segunda que tira o ícone de cima da barra inferior no telefone.

O que o link de posicionamento pode mudar

O endereço que abre a janela carrega uma credencial curta, e ela é estreita de propósito:

• vale por 20 minutos, e morre junto com a aba;
• vale para um site só, o que estava aberto no painel;
• muda duas coisas: o canto e a distância daquela faixa de largura. Cor, texto, idioma, validade, formato e porta de volta continuam como você os deixou, e nenhum pedido por esse caminho consegue tocá-los.

É por isso que o campo só aceita endereço do seu próprio domínio: a credencial viaja no endereço, e o JavaScript da página que abrir consegue lê-la.

Fora dessa janela, o ícone volta ao canto

Se um visitante arrastar o acionador, ele volta ao canto poucos segundos depois. Isso é de propósito: o acionador é o caminho para retirar o consentimento, e um botão largado no meio da página vira um direito que depende de a pessoa lembrar onde ele ficou. A exceção é a janela de posicionamento, onde quem arrasta é você, decidindo onde ele mora para todo mundo.

O que mais mora nesta tela

A tela não é só aparência. Quatro partes decidem comportamento, e cada uma tem a sua página:

• Categorias: quais aparecem, em Aparência › Conformidade, e o nome e a descrição que o visitante lê, em Textos.
• Visitantes de fora do Brasil: qual lei o banner aplica a quem chega de outro país. Leia antes de ligar.
• Validade da escolha: por quantos dias a resposta vale antes de o banner perguntar de novo.
• Idiomas do banner: em que línguas ele aparece, e por que os textos que você escreveu valem em uma só.

O nome do grupo, o consentimento entre domínios e a renovação dos consentimentos não ficam na Configuração: em Grupos de domínios, clique no grupo para abrir a página dele.

Salvar

O botão Salvar alterações, no alto da tela, acende quando há o que salvar e publica a configuração no nosso servidor, e o banner do seu site passa a usá-la na próxima visita. Você não reinstala nada: o script busca a configuração a cada carregamento.

O que muda por plano

No plano gratuito você edita as cores do banner e o link da sua política. Os textos, o tema claro/escuro e o controle fino de forma (logotipo, formato, posição da barra, efeito de fundo, arredondamento, estilo e ordem dos botões, tema do cartão de preferências) entram nos planos pagos, e o painel indica na própria tela o que está travado.

O canto e a cor do acionador, as distâncias até as bordas e o desvio automático não entram nessa conta: são de todo plano. Eles existem para o banner não colidir com a sua interface, e cobrar por isso seria vender o próprio incômodo. O idioma padrão também é de todo plano; os idiomas além dele e o regime por região são dos planos pagos.

O selo do Concedo não entra nessa conta: ele fica no banner em todos os planos, e quem não quer vê-lo o esconde por CSS no próprio site; o seletor está em o selo do Concedo no banner.