Pesquise "como mostrar quantas pessoas estão vendo um produto" e quase toda resposta é um snippet como este:
<div><b id="viewers"></b> people are viewing this product</div>
<script>
var min = 15, max = 60;
viewers.textContent = Math.floor(Math.random() * (max - min + 1)) + min;
</script>
O número é sorteado entre um mínimo e um máximo. Nada conta ninguém. Abra a mesma página em duas janelas e elas discordam; recarregue e aparece um terceiro número. Os compradores percebem, e nossa análise de 200 pequenas lojas Shopify encontrou contadores fazendo exatamente isso.
Este guia mostra o outro caminho: uma contagem das pessoas que realmente estiveram na página nos últimos 90 segundos, com duas linhas de código, em qualquer site.
Prefere assistir? Vídeos passo a passo: qualquer site ou WordPress (2 min) e Shopify (3 min).
Do que você precisa
- Uma conta gratuita do Provedly. Sem cartão.
- Acesso ao HTML do seu site, ou ao admin do WordPress ou do Shopify.
A contagem vem de um sinal de atividade: enquanto uma página está aberta, o navegador avisa o servidor do Provedly a cada 30 segundos que aquele visitante continua ali. O número exibido é quantos visitantes diferentes foram vistos naquela página nos últimos 90 segundos. Ninguém consegue digitar um número nele, nem você.
Passo 1: crie um site e um widget
Cadastre-se, adicione o seu site com o domínio e crie um widget. O contador ao vivo vem ativado por padrão com mínimo de 2, então, quando você é a única pessoa na página, ele fica oculto em vez de mostrar "1 pessoa está vendo isto".
Na aba Embed do widget você encontra as duas linhas necessárias: o snippet do site no topo e, em Show the live count on the page, a linha do contador em dois estilos, One line e Card.
Passo 2: adicione o snippet do site
Cole o snippet do site uma vez, logo antes da tag de fechamento </body>, em todas as páginas. Ele é assim, com a sua própria chave de site:
<script src="https://provedly.app/w/site.js" data-site="site_your_key" async></script>
Onde colar depende da sua plataforma:
| Plataforma | Onde colar o snippet do site |
|---|---|
| HTML simples | Antes de </body> na sua página ou no layout compartilhado |
| Shopify | Loja virtual, Temas, Editar código, layout/theme.liquid, antes de </body> |
| WordPress | Instale o plugin gratuito do Provedly e cole o token do widget nas configurações dele; sem código |
| React, Next.js, Vue | No layout raiz, uma vez; a aba Embed tem uma versão pronta |
Passo 3: coloque o contador onde ele deve aparecer
Adicione esta linha onde a contagem deve aparecer, normalmente logo abaixo do botão Adicionar ao carrinho ou de cadastro:
<div data-provedly-live data-style="card" data-template="{n} people are viewing this product right now"></div>
- No Shopify, abra Personalizar, mude para o modelo de produto e adicione um bloco Liquid personalizado abaixo dos botões de compra, depois cole a linha. Em temas como o Horizon, passe o mouse logo abaixo de Botões de compra na barra lateral e clique no sinal de mais.
- No WordPress, adicione um bloco HTML personalizado onde quiser e cole a linha.
- Num site simples, cole no HTML ao lado do seu botão.
Opções que você pode mudar nessa linha:
| Atributo | O que faz |
|---|---|
data-style="card" |
Uma versão em caixa, com o número grande e um link Verify. Remova para ter uma única linha de texto com a fonte do seu tema |
data-template="..." |
O seu próprio texto. {n} é onde entra o número |
data-dot="off" |
Remove o pequeno ponto laranja |
Passo 4: teste com janelas reais
Abra a página do produto. Sozinho, nada aparece, porque você está abaixo do mínimo. Abra a mesma página numa segunda janela, ou no celular: o card aparece com 2. Abra uma terceira e todas as janelas mostram 3.
Feche uma janela e a contagem cai assim que os 90 segundos daquele visitante acabam. Ela muda porque as pessoas mudam, e é exatamente essa a ideia.
O link Verify
O estilo card leva à página de verificação pública do seu widget. Quem clica vê como o número é contado: visitantes reais nos últimos 90 segundos, oculto abaixo do seu mínimo, e um aviso de que o dono do site não consegue digitar um número nele. Um snippet aleatório não teria nada para colocar ali.
Quando o contador não aparece
- Você está sozinho na página. É o mínimo fazendo seu trabalho. Abra uma segunda janela.
- Falta o snippet do site. A linha do contador só funciona se o snippet do site estiver na mesma página.
- Seu domínio não está permitido. O widget só responde a requisições dos domínios nas configurações do seu site. Adicione também os domínios de homologação.
- A página está em cache com um tema antigo. No Shopify, confira se você editou o tema publicado, não um rascunho.
Já tem um contador?
Se a sua loja mostra hoje "pessoas vendo" e você não sabe de onde vem o número, cole uma página de produto no verificador gratuito. Ele carrega a página como vários visitantes novos e diz se o número veio de um servidor ou foi inventado no navegador.
Perguntas frequentes
Um contador aleatório de "pessoas vendo" é ilegal?
Não somos advogados e isto não é aconselhamento jurídico. Órgãos de defesa do consumidor, incluindo a Competition and Markets Authority do Reino Unido, já afirmaram que popularidade e urgência inventadas podem enganar os compradores. Uma contagem de visitantes reais evita a questão.
O que a contagem inclui?
Visitantes vistos naquela página nos últimos 90 segundos, contados a partir de um sinal que o navegador deles envia a cada 30 segundos enquanto a página está aberta. Ela só aparece quando atinge o mínimo que você definiu, 2 por padrão.
Isso deixa o meu site mais lento?
O snippet do site carrega de forma assíncrona depois da sua página, e o contador são algumas linhas de texto. A sua página não espera por ele.
É grátis?
Sim. O plano gratuito inclui o contador ao vivo, um site e até 2.000 visualizações de notificações por mês, e você não precisa de cartão para se cadastrar. O contador funciona antes mesmo de você ter qualquer notificação de compra para mostrar.