Proteside Selo Proteside
Exiba o selo estático opcional que mostra aos clientes que o checkout é monitorado.
O selo Proteside é um trecho de HTML estático, opcional, que você cola onde quiser no checkout (por exemplo, no rodapé). Ele mostra aos clientes que a página é monitorada e leva à página pública de verificação da loja.
O selo é independente do SDK: não tem JavaScript, não faz requisição de imagem e não depende do snippet de instalação. O SDK não exibe nenhum selo automaticamente.
Obter o selo
Abra as configurações da loja
No dashboard, vá em Configurações → Loja, seção Selo Proteside.
Confira a página de verificação
Em Página de verificação, abra o link da sua loja (https://safe.proteside.com/ seguido do identificador da loja)
e confirme que ele carrega. Use Copiar link se quiser divulgar o endereço em outro lugar.
Copie o trecho
Clique em Copiar no bloco de código, abaixo da Prévia do selo.
Cole no checkout
Cole o trecho no ponto da página em que o selo deve aparecer e publique.
O trecho
O selo é um link com estilos inline e o escudo do Proteside em SVG. O desenho do escudo foi abreviado abaixo; copie o trecho completo do dashboard.
<!-- Proteside Security Badge -->
<a href="https://safe.proteside.com/minha-loja" target="_blank" rel="noopener noreferrer"
aria-label="Protegido pela Proteside — clique para verificar" title="Protegido pela Proteside"
style="display:inline-flex;align-items:center;gap:7px;padding:6px 11px 6px 8px;background:#0D1117;border:1px solid rgba(45,140,240,.30);border-radius:9px;box-shadow:0 2px 10px rgba(0,0,0,.45);text-decoration:none;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;">
<span style="width:6px;height:6px;border-radius:50%;background:#3FB950;flex-shrink:0;"></span>
<svg width="16" height="20" viewBox="…" xmlns="http://www.w3.org/2000/svg"><!-- escudo --></svg>
<span style="font-size:11px;font-weight:700;color:#E6EDF3;letter-spacing:.10em;text-transform:uppercase;line-height:1;white-space:nowrap;">Proteside</span>
</a>- O texto acessível (
aria-labeletitle) sai no idioma em que você usa o dashboard (português, espanhol ou inglês). Se a loja atende outro idioma, ajuste esses dois atributos. - O selo tem cores fixas escuras.
Selo fixo no canto da tela
Para deixar o selo fixo no canto inferior direito, acrescente no início do atributo style do <a>:
position:fixed;bottom:0;right:0;z-index:2147483647;margin:16px;Um selo fixo, com z-index alto, fica por cima de outros elementos. Evite posicioná-lo sobre os campos de
pagamento: o SDK alerta elementos posicionados que cobrem campos sensíveis.
CSP
Como usa atributos style="…", o selo precisa de style-src 'unsafe-inline' ou style-src-attr 'unsafe-inline' na
Content Security Policy. Ele não precisa de img-src, porque o escudo é SVG inline. Veja
Content Security Policy e headers.