Como ocultar o resto da VSL por alguns minutos, com CSS e setTimeout

O que eu fiz na minha página: seis minutos de onze

A VSL que eu mostrei na tela começa fechada. Só o vídeo. Passa o tempo, o restante aparece. O vídeo tem onze minutos. Eu libero o bloco aos seis. Não é no fim. É no ponto em que eu já falei o suficiente para o botão fazer sentido. Você escolhe o minuto. O mecanismo é o mesmo.

Eu estava escrevendo o artigo com o código na hora da gravação, para colar na descrição. O raciocínio cabe aqui. CMS não importa. WordPress, HTML solto, outra plataforma. É classe, CSS, timeout. Gutenberg, Elementor, tema com gancho no header — o que você tiver para injetar HTML naquela URL.

Primeiro a div, depois a classe no bloco que já existe

Decida o que some. Página inteira menos o vídeo, ou só o botão, ou um bloco enorme que o construtor já agrupa. No editor de blocos do WordPress eu abro um HTML personalizado, abro uma div, coloco a classe — eu usei nomes como ocultar e, noutro recorte, btn — e no final da seção fecho a div. Tudo que ficou no meio herda a espera.

Se o bloco já existe, não precisa da div extra. Seleciona o bloco, Avançado, classe CSS extra. A mesma classe. O WordPress, no editor de blocos, às vezes não desenha o HTML customizado como bloco reconhecido. Na tela eu já tinha a div antiga e o editor fingia que não via. Ignore o aviso. O front lê a classe. Não salvei a página de novo só para o Gutenberg ficar feliz.

1. Na VSL, envolva o conteúdo que deve esperar com <div class="ocultar"> ... </div>, ou coloque a classe no bloco em Avançado.
2. Não feche a div no meio do vídeo. O player fica fora da classe.
3. Confira no front, pelo inspetor, que a classe está no nó certo. Classe no wrapper errado esconde o vídeo junto.

CSS no carregamento, senão o bloco pisca

O JavaScript roda depois. Se você só tiver o timeout, no primeiro segundo a página aparece inteira e some. Horror. O CSS precisa esconder no carregamento. Na folha daquela página: a classe, chaves, display: none. Se a página ainda não tem CSS próprio, abra a tag style no mesmo lugar em que você vai colar o script e coloque a regra lá.

Eu uso GeneratePress. Em Elementos eu crio um elemento da página de vendas, CSS e JS juntos, e marco para exibir só naquela URL. Não vai para o blog, não vai para o home. Plugin de “inserir header e footer” no site inteiro também funciona, e também polui as outras páginas. Vale a pena o gancho por URL. Menos CSS, menos script, menos chance de esconder um botão que não era da VSL.

setTimeout: 400 mil milissegundos e a conta de minuto

O script da gravação tem três linhas. setTimeout recebe uma função e um número. A função pega o elemento da classe e mostra — display block, ou o valor que o layout pedia. O número é milissegundo. Mil milissegundos, um segundo. Sessenta mil, um minuto. Eu coloquei 400000. São 400 segundos: seis minutos e quarenta segundos. “Cerca de seis minutos”, na fala. Se você quer cinco minutos redondos, 300000. Dez minutos, 600000. A conta na mão: minutos vezes 60 vezes 1000. Sem essa conversão, alguém cola 6 e o bloco aparece em seis milissegundos.

Na prática o JS parece isto, com a classe que você escolheu: setTimeout(function () { var blocos = document.querySelectorAll(".ocultar"); for (var i = 0; i < blocos.length; i++) { blocos[i].style.display = "block"; } }, 400000); Três linhas, sem biblioteca, sem jQuery. querySelectorAll pega todos os nós da classe, caso você tenha escondido o botão e um bloco de depoimento no mesmo timer.

Não tem cookie, na versão que eu mostrei: recarregou a página, a espera recomeça. Para VSL isso até ajuda. Quem voltou vê o vídeo de novo, não o checkout sozinho, a menos que você grave o estado. Eu não gravei. Cola no elemento da página, abaixo do CSS. Qualquer dúvida de seletor, o inspetor do navegador mostra se a classe é a que você acha que é. Se o display none estiver num filho e o script no pai, nada aparece — os dois precisam apontar para o mesmo nó.

• Classe no HTML do bloco que espera.
• display: none no CSS daquela URL, não no tema inteiro.
• setTimeout no JS daquela URL; o terceiro argumento da conta é milissegundo.
• Vídeo fora da classe, senão o player some junto.
• Gancho por página (GeneratePress Elementos, ou equivalente). Script global é tiro no pé.

Na sequência

1. Coloque o player fora da div. Teste recarregando com o CSS já ativo: só o vídeo deve aparecer.
2. Converta o minuto desejado em milissegundos antes de colar o número. Minuto × 60 × 1000.
3. Injete CSS e JS só na URL da VSL.
4. Confira no celular. display none no desktop não desculpa layout quebrado no wrap.
5. Se o bloco pisca, o CSS não está no carregamento. O timeout sozinho não basta.
6. Não use isso para esconder preço, prazo ou condição que a pessoa precisa ler para decidir.

Onde isso quebra