Eu queria que quem chegasse à minha página de vendas ficasse primeiro com a VSL em foco. O vídeo tinha onze minutos; escondi os outros blocos e liberei tudo depois de cerca de seis, usando uma classe CSS e um setTimeout. Sem plugin.
Escolha exatamente o que vai esperar
Se a ideia é deixar só a VSL visível, coloque o botão e o restante das informações dentro de uma div com a classe <code>ocultar</code>. O player fica fora dela. Assim, quando a classe for removida, o bloco inteiro aparece de uma vez.
<pre><code><div class="ocultar"> <!-- botão e restante do conteúdo da página --> </div></code></pre>
A div precisa começar antes do primeiro elemento que vai esperar e fechar depois do último. Se você fechar antes do botão, ele continuará visível; se colocar o player dentro dela, o vídeo também some. Para esconder somente um botão ou um bloco grande que já existe, não precisa criar outra div: no editor de blocos do WordPress, selecione o bloco, abra <strong>Avançado</strong> e escreva <code>ocultar</code> em <strong>Classes CSS adicionais</strong>.
Eu já tinha uma classe num bloco HTML que o editor não reconhecia visualmente como bloco. Como a marcação estava pronta, fechei sem salvar outra alteração só para corrigir a tela do editor. Se for uma mudança nova, confira que a classe está no elemento certo antes de contar com o temporizador.
Esconda o bloco assim que a página carregar
Antes de configurar o tempo, faça o CSS esconder o conteúdo desde o início. Se o JavaScript for a única coisa controlando a exibição, a página pode mostrar o bloco por um instante antes de escondê-lo.
<code>.ocultar { display: none; }</code>
Eu colocava a regra no CSS daquela página. Se você não tiver um campo próprio para CSS, dá para incluir a regra numa tag <code><style></code> junto do código HTML que só é carregado na página da VSL. O ponto importante é o CSS estar ativo quando a página aparece, antes de o intervalo terminar.
O nome da classe no CSS começa com ponto: <code>.ocultar</code>. No campo de classes do WordPress, escreva apenas <code>ocultar</code>, sem o ponto. A regra pode servir tanto para a div que envolve vários itens quanto para um bloco individual.
Use setTimeout para definir o momento de mostrar
O <code>setTimeout</code> recebe a função que será executada e o tempo de espera em milissegundos. No exemplo, o código encontra todos os blocos com a classe <code>ocultar</code> e remove a classe depois de 400.000 milissegundos:
<pre><code>setTimeout(function () { document.querySelectorAll('.ocultar').forEach(function (bloco) { bloco.classList.remove('ocultar') }) }, 400000)</code></pre>
O seletor procura todos os elementos que têm essa classe; o <code>forEach</code> passa por eles e remove a regra que os mantinha escondidos. Se houver só um bloco, o mesmo código continua funcionando. Como ele tira a classe, em vez de impor <code>display: block</code>, cada elemento volta ao seu próprio formato de exibição.
Cada mil milissegundos equivale a um segundo. Portanto, 400.000 são 400 segundos, ou seis minutos e quarenta segundos — o tempo que arredondei para “cerca de seis minutos”. Para cinco minutos, use 300.000; para dez, 600.000. A conta é minutos × 60 × 1.000.
Esse cronômetro começa quando o script roda; ele não acompanha o play nem a pausa do vídeo. E o navegador pode atrasar a função, principalmente se a aba ficar inativa. Eu usaria esse valor como espera aproximada desde a abertura da página, não como marcação precisa do tempo assistido. No meu caso, a VSL durava onze minutos e o restante aparecia depois de aproximadamente seis.
Carregue os códigos somente na página de vendas
Eu usava o GeneratePress e configurei CSS e JavaScript em um Elemento com exibição restrita à página de vendas. Outros temas e CMS têm seus próprios campos ou pontos de inserção; HTML puro também serve. O importante é que a regra e o temporizador sejam carregados na página em que estão os blocos com a classe, em vez de adicionar esse código às páginas que não usam a VSL.
Na página que mostrei, usei o espaço do Elemento para colocar o CSS e o JavaScript e marquei a condição da página. Em outro WordPress, o nome desse campo muda conforme o tema ou a ferramenta. Fora do WordPress, basta ter acesso ao HTML e ao local em que o navegador recebe a regra e o script. A solução não depende de plugin.
São três partes que trabalham juntas: a classe marca o conteúdo, o CSS o mantém escondido no carregamento e o <code>setTimeout</code> remove a classe depois do intervalo escolhido. Como a regra esconde o bloco antes de o script agir, uma falha no JavaScript pode deixá-lo invisível. Eu testaria a página real, com o cache ativo, e confirmaria se o botão aparece depois da espera. Recarregar a página inicia a contagem de novo.