Personalizar cores, textos e posição do banner

Tudo que o visitante vê está na aba Banner do site, com prévia ao vivo ao lado: o que você muda no formulário aparece na hora, sem publicar nada no seu site.

Cores e forma

• Modo: claro, escuro ou seguir o dispositivo. Nesta última opção o banner adota o tema que o visitante já usa no sistema dele.
• Posição: barra no rodapé ou cartão no canto.
• Paleta clara e paleta escura separadas: fundo, texto, botão principal e secundário, em hexadecimal. Quem escolhe "seguir o dispositivo" preenche as duas.
• Logo: a URL de uma imagem hospedada por você.
• Raio das bordas, para o banner combinar com o resto do site.

Textos

Título, corpo, rótulos dos botões e o link da sua política de privacidade. 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.

Onde o visitante reabre as 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. O cartão Onde o visitante reabre as preferências decide quatro coisas:

• A porta de volta: o ícone flutuante do Concedo ou um link no rodapé do seu site. Com o link, nada flutua sobre a sua interface, e o painel entrega o trecho pronto para copiar.
• 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 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é é dos planos pagos.

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.

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 rotas que os visitantes já mediram.
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 aba

A aba não é só aparência. Quatro seções decidem comportamento, e cada uma tem a sua página:

• Categorias: o nome e a descrição que o visitante lê em cada grupo.
• 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ó.

Salvar

O botão Salvar 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 snippet 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, arredondamento, estilo e ordem dos botões) entram nos planos pagos, e o painel indica na própria tela o que está travado.

O canto do acionador, as distâncias até as bordas, o desvio automático e os idiomas do banner não entram nessa conta: são de todo plano. Eles existem para o banner não colidir com a sua interface e para o visitante entender o que aceita, e cobrar por isso seria vender o próprio incômodo.

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.