Uma notificação de compra deve parecer produzida pelo seu site, não como se um terceiro tivesse alugado um canto da tela. A Provedly vem com cinco temas, e escolher bem se resume basicamente a duas perguntas: a sua página é clara ou escura, e a sua marca é discreta ou chamativa. Este post passa por cada tema, pelas configurações ao redor dele e pelos erros que fazem uma notificação parecer remendada.
Os cinco temas
| Tema | Personalidade | Combina com |
|---|---|---|
| Clean white | Cartão claro, texto neutro | A maioria dos sites claros, SaaS, páginas com muita documentação |
| Deep ocean | Superfície azul-escura | Marcas escuras ou em azul-marinho, fintech, ferramentas de desenvolvedor |
| Midnight | Superfície quase preta | Sites em modo escuro, fotografia, produtos premium |
| Electric violet | Destaque saturado | Marcas com identidade roxa forte ou em degradê |
| Sunset blaze | Destaque quente e enérgico | Marcas de consumo, lançamentos, gastronomia e eventos |
Como o widget é renderizado num Shadow DOM, o tema é exatamente o que você recebe. O CSS do seu site não consegue mudar o estilo dele, e os estilos dele não vazam. Isso elimina o problema do "no site no ar ficou diferente", mas também significa que a escolha do tema é toda a decisão de design; escolha com intenção.
Combine com a superfície, não com o logo
O erro mais comum é combinar a notificação com a cor do logo. Um logo violeta numa página branca não significa que o Electric violet é o certo; a notificação fica sobre a página, não sobre o logo. Combine com a superfície que a notificação vai cobrir. Se as suas páginas são brancas ou cinza-claras, o Clean white parece nativo. Se as suas páginas são escuras, o Midnight ou o Deep ocean vão parecer.
Use os temas de destaque quando a própria marca é de alto contraste em todo lugar. Uma notificação cor de pôr do sol numa página branca e contida puxa o olhar para o canto toda vez que entra animada, e isso cansa já na terceira notificação. Lembre que os visitantes veem até 5 por sessão por padrão.
As configurações em torno do tema
Posição
O canto inferior esquerdo é a convenção que a maioria dos visitantes aprendeu a ler como "atividade, não alerta". O inferior direito disputa espaço com widgets de chat e banners de cookies. As posições no topo disputam com a sua navegação e com as barras CTA. Confira a posição contra tudo o que mais estiver fixo na sua página, principalmente no mobile, onde uma notificação e um botão fixo de adicionar ao carrinho podem se sobrepor. A segmentação por dispositivo permite rodar as notificações só no desktop se o mobile estiver cheio.
Estilo do avatar
Um avatar dá ao olho um lugar para pousar. A Provedly suporta um avatar de imagem alimentado pelo campo avatar_url em registros via API e CSV; registros de webhook do Stripe e da Shopify não incluem fotos, então a maioria dos widgets usa um estilo sem foto. Não use rostos de banco de imagens para preencher a lacuna. Uma notificação sobre "Sarah M. em Austin" com a foto de uma modelo é um detalhe fabricado em cima de uma compra real, e é exatamente o tipo de coisa que a página de verificação existe para evitar.
Formatos de nome e localização
O tema define a aparência; os formatos definem o tom. Os padrões são primeiro nome mais inicial ("Sarah M.") e cidade mais país ("Austin, US"). Nomes completos parecem invasivos e geralmente são um erro de privacidade; só as iniciais ("S. M.") parecem evasivas. Cidade e país são específicos o bastante para serem críveis sem apontar para uma rua. Para um negócio local em que o nome da cidade identifica uma comunidade pequena, "country" ou "none" é mais gentil. Veja Formatos de nome e localização: privacidade por padrão.
O ritmo faz parte do design
As escolhas de tema são visuais, mas o ritmo é o que as pessoas realmente percebem. Os padrões são 3 segundos de atraso inicial, 6 segundos na tela, intervalo de 30 segundos e 5 por sessão. Numa landing page longa, um intervalo maior parece mais tranquilo. Numa vitrine de produtos em que as pessoas olham rápido, o padrão funciona. Seja qual for a configuração, mantenha a mesma em todas as páginas; uma notificação que aparece na hora numa página e depois de dez segundos em outra parece aleatória.
O selo
O plano Free mostra um pequeno selo "by Provedly" na notificação. Do Starter para cima, o selo é opcional. De qualquer forma, toda notificação leva à página de verificação pública, que lista fontes, contagens e a última compra verificada. Mesmo que você esconda o selo, mantenha o link acessível; é ele que separa uma notificação verificável de uma decoração.
Um caminho rápido de decisão
- Página clara, marca discreta: Clean white.
- Página escura: Midnight para preto neutro, Deep ocean para o lado azul.
- Marca construída sobre uma cor de destaque forte usada em todo lugar: Electric violet ou Sunset blaze.
- Na dúvida: Clean white, canto inferior esquerdo, padrões. Depois, mude uma coisa de cada vez.
Pré-visualize cada tema numa página real, não só no painel. Abra o seu site com o widget instalado, troque de tema e recarregue. A diferença entre "isso é nosso" e "isso é um anúncio" fica óbvia em duas notificações.
Perguntas frequentes
Posso personalizar cores além dos cinco temas?
Os temas são conjuntos fixos, escolhidos para que a notificação continue legível e consistente em qualquer site. As barras oferecem mais controle de cor, incluindo as cores de fundo e de texto do botão, porque são superfícies maiores.
O tema afeta o contador ao vivo?
O contador ao vivo usa o mesmo tema para que os dois elementos pareçam um único sistema. Ele também se esconde abaixo do seu mínimo em vez de mostrar um número pequeno e pouco convincente.
Os temas ficam diferentes na Shopify?
Não. O embed do app na Shopify usa o mesmo renderizador e o mesmo isolamento em Shadow DOM, então um tema fica igual na Shopify e num site estático.
Teste os cinco na sua própria página em poucos minutos: comece grátis.