Script de Notificações de Compra Para Páginas de Vendas (Copie e Cole)

Aqui está um script pronto para copiar e colar que exibe notificações de compra na sua página de vendas usando jQuery e Toastr. Basta colar o código, editar os nomes e pronto -- sua página terá alertas de prova social funcionando em menos de cinco minutos.

"O melhor script de notificação é aquele que funciona sem complicação -- copie, cole, personalize e publique."

Resumo rápido:

• Script completo pronto para uso imediato
• Personalização em 5 passos simples
• Tabela de referência com todas as opções de customização
• Funciona em qualquer página HTML, WordPress ou builder

O script completo

Copie o bloco inteiro abaixo e cole antes da tag </html> na sua página de vendas:

<!-- Bibliotecas necessárias 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
        var urlDestino = '#';

        // Nomes exibidos nos alertas de compra
        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 a ordem dos nomes aleatoriamente
        nomes.sort(function() { return Math.random() - 0.5; });

        var i = 0, total = nomes.length;

        // Exibe uma notificação a cada intervalo definido
        setInterval(function () {
            if (i >= 11) return; // Número máximo de notificações

            // Notificação de quantidade (aparece em momentos específicos)
            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" }
                );
            }

            // 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 em milissegundos (10 segundos)
    });
</script>

Passo a passo para implementar

Passo 1 -- Copie o código. Selecione todo o bloco acima, incluindo as tags <script> e <link>.

Passo 2 -- Cole antes do </html>. Abra o código-fonte da sua página e cole o bloco inteiro antes do fechamento da tag </html>. Em builders como Elementor ou plataformas de vendas, procure a opção "HTML personalizado" ou "scripts do rodapé".

Passo 3 -- Edite o array de nomes. Substitua os nomes dentro do array nomes por nomes que façam sentido para o seu público. Use entre 10 e 15 nomes para boa variedade.

Passo 4 -- Altere a URL. Troque o valor de urlDestino pela URL ou âncora desejada. Use #checkout para direcionar ao botão de compra ou # para manter no topo da página.

Passo 5 -- Ajuste o intervalo. Altere 10 * 1000 para o intervalo desejado em milissegundos. Para 12 segundos, use 12 * 1000.

Tabela de personalização rápida

Cada item do script pode ser ajustado. Veja o que alterar e onde encontrar no código:

Posições disponíveis do Toastr

O Toastr oferece quatro posições para as notificações. Altere o valor de positionClass conforme a sua necessidade:

Para entender a psicologia por trás desse tipo de notificação, vale a pena estudar os princípios de prova social e como eles se aplicam a páginas de vendas.

Dependências do script

O script precisa de duas bibliotecas externas carregadas via CDN:

jQuery (3.6.0) -- Biblioteca JavaScript para manipulação do DOM. Responsável por controlar quando e como as notificações aparecem. Se a sua página já carrega jQuery, remova a primeira linha <script> para evitar duplicação.

Toastr (2.1.4) -- Biblioteca de notificações leve. Inclui o CSS (arquivo .css) e o JavaScript (arquivo .js). Ambos são necessários para o funcionamento correto dos alertas.

Se você precisa acompanhar o desempenho das campanhas que levam tráfego para essa página, o Trafius monitora seus anúncios e envia relatórios direto no WhatsApp.

---

Perguntas frequentes

O script funciona se minha página já usa jQuery?

Sim, mas remova a linha que carrega o jQuery do CDN para evitar conflito. Mantenha apenas o Toastr (CSS e JS) e o bloco <script> com a lógica das notificações.

Posso colocar o script no <head> em vez de antes do </html>?

Não é recomendado. O script precisa que o DOM esteja carregado para funcionar. Colocá-lo antes do </html> garante que todos os elementos da página já existem quando o código executa.

Como faço para as notificações aparecerem mais rápido no início?

Adicione uma chamada toastr.success(...) logo após o $(document).ready e antes do setInterval. Isso exibirá a primeira notificação imediatamente ao carregar a página.

O script funciona em páginas AMP?

Não. Páginas AMP restringem JavaScript personalizado. O script funciona apenas em páginas HTML padrão que permitem a execução de scripts externos.