Como Esconder o Botão de Compra na VSL e Mostrar na Hora Certa

Esconder o botão de compra na VSL até o momento do pitch é a técnica que mais impacta a conversão em páginas de vídeo de vendas. A ideia é simples: o visitante assiste ao vídeo sem distrações e, quando o pitch revela o preço, o botão aparece automaticamente. Isso evita que o lead saia antes de entender o valor da oferta.

"Mostrar o botão de compra cedo demais é dar ao visitante um motivo para sair antes de entender o que você está vendendo."

Resumo rápido:

• VSL (Video Sales Letter) é uma página de vendas baseada em vídeo
• O botão de compra deve aparecer somente no momento do pitch
• Um script simples com jQuery esconde e revela elementos automaticamente
• Basta adicionar uma classe CSS aos elementos que você quer controlar

O que é uma VSL e por que esconder o botão?

VSL significa Video Sales Letter -- uma página de vendas onde o vídeo faz o trabalho de convencer o visitante. O fluxo funciona assim: o vídeo apresenta o problema, mostra a solução, entrega provas sociais e só no final revela o preço.

Se o botão de compra estiver visível desde o início, muitos visitantes vão olhar o preço, ignorar o vídeo e sair. Escondendo o botão até o momento certo, você força o lead a consumir o conteúdo antes de tomar uma decisão.

Como funciona o script de delay

O processo tem três etapas: adicionar a classe revelar nos elementos que devem ficar ocultos, incluir o jQuery na página e colar o script que controla o timing.

Primeiro, certifique-se de que o jQuery está carregado na página. Adicione esta linha antes do script:

<!-- Carrega o jQuery via CDN -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

Agora adicione o script que esconde e revela os elementos:

<script>
    var segundosDeEspera = 60 * 15; // 60 segundos vezes 15 minutos = 900 segundos
    // Esconde todos os elementos com a classe 'revelar'
    $('.revelar').hide();
    // Mostra os elementos após o tempo definido
    setTimeout(function () {
        $('.revelar').show();
    }, segundosDeEspera * 1000);
</script>

Qualquer elemento com a classe revelar vai ficar invisível até o tempo acabar. Pode ser um botão, uma seção de preço, uma área de bônus -- qualquer coisa.

Como adicionar a classe nos seus elementos

Na sua página de vendas, envolva o botão de compra (e qualquer outro elemento que queira esconder) em uma div com a classe revelar:

<!-- Seção que ficará oculta até o momento do pitch -->
<div class="revelar">
    <h2>Oferta especial</h2>
    <p>De R$ 497 por apenas R$ 197</p>
    <a href="https://checkout.com/produto">Quero aproveitar</a>
</div>

Você pode usar essa classe em quantas seções quiser. Todas serão escondidas e reveladas ao mesmo tempo.

Como calcular o tempo certo de delay

O tempo do delay deve coincidir com o momento em que o seu vídeo revela o preço. Assista à sua VSL, anote o minuto exato do pitch e converta para segundos.

Por exemplo:

• Pitch no minuto 10: var segundosDeEspera = 60 * 10;
• Pitch no minuto 15: var segundosDeEspera = 60 * 15;
• Pitch no minuto 20: var segundosDeEspera = 60 * 20;

Uma dica: adicione uns 30 segundos a mais. É melhor o botão aparecer um pouco depois do pitch do que antes. Se você trabalha com redirect entre páginas, lembre-se de considerar o tempo de carregamento também.

Cuidados importantes

Teste sempre no celular. Alguns builders de página carregam scripts em ordem diferente no mobile, e o botão pode piscar antes de ser escondido. Se isso acontecer, adicione um display: none direto no CSS da classe revelar como fallback.

O script depende do jQuery. Se a sua página já usa jQuery, não precisa carregar de novo. Se não usa, a linha do CDN resolve. O Trafius ajuda você a monitorar se os visitantes estão chegando até o momento do pitch -- assim você ajusta o timing com dados reais.

---

Perguntas frequentes

O script funciona em qualquer builder de página?

Sim. Desde que você consiga inserir código HTML/JavaScript customizado, o script funciona em qualquer plataforma -- WordPress, ClickFunnels, Elementor, ou HTML puro.

Posso usar uma classe diferente de "revelar"?

Pode. Basta trocar .revelar no script pelo nome da classe que você preferir, como .delay ou .oculto. O importante é que a classe no HTML e no script sejam iguais.

O que acontece se o visitante recarregar a página?

O timer reinicia do zero. Não há persistência entre recarregamentos, então o visitante precisa esperar novamente. Para persistir, seria necessário salvar o timestamp em cookie ou localStorage.

Posso usar tempos diferentes para elementos diferentes?

Sim. Crie classes separadas (por exemplo, .revelar-10 e .revelar-20) e duplique o bloco setTimeout com tempos diferentes para cada classe.