Como Adicionar Notificações de Compra na Sua Página

Notificações de compra são pequenos alertas que aparecem na tela do visitante mostrando que outras pessoas acabaram de comprar o seu produto. Elas funcionam como gatilho de prova social, transmitindo confiança e criando urgência ao mostrar que existe demanda real pela sua oferta. Com um script simples usando jQuery e Toastr, você adiciona esse recurso em minutos.

"Quando o visitante vê que outras pessoas estão comprando, a decisão de compra deixa de ser racional e passa a ser emocional -- ninguém quer ficar de fora."

Resumo rápido:

• Notificações de compra usam prova social para aumentar conversões
• O script usa jQuery e Toastr (bibliotecas gratuitas via CDN)
• Você personaliza nomes, intervalo, posição e mensagens
• Funciona em qualquer página HTML sem necessidade de backend

O que são notificações de compra e por que funcionam?

As notificações de compra são popups discretos, geralmente posicionados no canto inferior da tela, que simulam alertas de vendas recentes. Elas ativam dois gatilhos mentais poderosos: prova social (se outros estão comprando, deve ser bom) e urgência (preciso agir antes que acabe).

Esse tipo de recurso é muito usado em páginas de vendas com escassez e funciona especialmente bem em páginas com vídeos de vendas (VSL), onde o visitante precisa de um empurrão extra para tomar a decisão.

Como adicionar o script na sua página?

O código completo usa duas dependências carregadas via CDN: jQuery para manipulação do DOM e Toastr para exibir as notificações. Cole o seguinte bloco antes do fechamento da tag </html> na sua página:

<!-- Carrega jQuery e Toastr via CDN -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/css/toastr.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/2.1.4/toastr.min.js"></script>

<script>
    $(document).ready(function () {
        // URL de destino ao clicar na notificação (# = topo da página)
        var urlDestino = '#';

        // Lista de nomes exibidos nas notificações
        var nomes = [
            'Ana Paula', 'Marcos Silva', 'Juliana Costa',
            'Roberto M.', 'Fernanda Souza', 'Carlos Eduardo',
            'Patricia R.', 'Lucas Oliveira', 'Camila Dias',
            'Rafael Santos', 'Beatriz Lima', 'Thiago Alves'
        ];

        // Embaralha os nomes para variar a ordem
        nomes.sort(function() { return Math.random() - 0.5; });

        var i = 0, total = nomes.length;

        // Exibe notificações em intervalos regulares
        setInterval(function () {
            // Limita o total de notificações exibidas
            if (i >= 11) return;

            // Exibe notificação de quantidade em posições específicas
            if (i == 1 || i == 8 || i == 10) {
                toastr.info(
                    '<a href="' + urlDestino + '">Garanta a sua vaga também!</a> '
                    + (total + (i * 3)) + ' pessoas compraram nos últimos 30 minutos.',
                    { timeOut: 5000, positionClass: "toast-bottom-right" }
                );
            }

            // Exibe notificação de compra individual
            toastr.success(
                '<a href="' + urlDestino + '">Garanta a sua vaga também!</a> '
                + nomes[i++] + ' acabou de comprar.',
                { timeOut: 5000, positionClass: "toast-bottom-right" }
            );
        }, 10 * 1000); // Intervalo de 10 segundos entre notificações
    });
</script>

Como personalizar as notificações?

O script oferece vários pontos de personalização. Veja o que você pode alterar:

Nomes dos compradores: edite o array nomes com nomes realistas. Use nomes comuns e evite celebridades ou nomes obviamente falsos. Misture nomes completos com abreviações (ex: "Patricia R.") para parecer mais autêntico.

Intervalo entre notificações: altere o valor 10 * 1000 no setInterval. O número representa milissegundos -- para 15 segundos, use 15 * 1000. Intervalos entre 8 e 15 segundos funcionam bem.

Posição na tela: troque toast-bottom-right por uma das opções do Toastr:

• toast-bottom-right -- canto inferior direito (recomendado para desktop)
• toast-bottom-left -- canto inferior esquerdo
• toast-top-right -- canto superior direito
• toast-top-left -- canto superior esquerdo

URL de destino: altere a variável urlDestino para redirecionar o visitante ao clicar na notificação. Use #checkout para rolar até o botão de compra, por exemplo.

Limite de notificações: o if (i >= 11) define o máximo. Não exagere -- 8 a 12 notificações é o ideal para não parecer spam.

Onde colocar o código na página?

Cole o bloco inteiro antes da tag </html> da sua página. Se estiver usando um builder como Elementor, WordPress ou plataformas de página de vendas, procure a seção de "scripts personalizados" ou "código HTML" nas configurações da página. O importante é que o jQuery carregue antes do script do Toastr.

Se a sua página de vendas precisa de monitoramento de campanhas em tempo real, o Trafius envia alertas de performance direto no WhatsApp para você reagir rápido.

---

Perguntas frequentes

As notificações funcionam em dispositivos móveis?

Sim. O Toastr é responsivo e as notificações aparecem corretamente em celulares e tablets. Em telas menores, a posição toast-bottom-right se adapta automaticamente.

Preciso de um servidor para rodar o script?

Não. O script roda inteiramente no navegador do visitante. As bibliotecas jQuery e Toastr são carregadas via CDN, então basta colar o código HTML na sua página.

As notificações afetam a velocidade da página?

O impacto é mínimo. jQuery tem cerca de 30KB comprimido e o Toastr menos de 5KB. O carregamento via CDN é rápido e as bibliotecas ficam em cache no navegador.

Posso usar nomes reais de compradores?

O ideal é usar nomes fictícios mas realistas. Usar dados reais de clientes sem autorização pode violar a LGPD. Nomes comuns brasileiros geram o mesmo efeito de credibilidade.