Como revelar elementos da página durante uma VSL

Configure uma ação sincronizada ao vídeo para revelar checkout, oferta, bônus ou qualquer bloco da página no momento certo da VSL.

As Ações do vídeo conectam o tempo real da VSL aos elementos da página em que o player foi incorporado. Você pode começar com um checkout, uma oferta ou uma seção de bônus ocultos e revelá-los exatamente no momento configurado no vídeo.

O gatilho acompanha o player. Se a pessoa pausar, o relógio da ação também para. Se ela avançar ou voltar o vídeo, a Moviie recalcula imediatamente se o elemento deve estar visível. Não é um temporizador independente iniciado quando a página carrega.

Antes de começar

Você precisa de:

um vídeo incorporado com o código Web completo gerado pela Moviie;
acesso ao HTML da página ou aos campos de classe CSS e ID do seu construtor;
um bloco da página que possa receber uma classe ou um ID estável;
o momento do pitch marcado em Analytics, caso queira usar esse gatilho em vez de informar um tempo manual.

Use o código Web exatamente como ele foi copiado da Moviie. Não reduza nem monte esse código manualmente, porque uma versão incompleta pode reproduzir o vídeo sem executar as Ações da página.

1. Abra Ações no Studio

Na Biblioteca, abra o vídeo usado na VSL.
Na navegação do Studio, selecione Ações.
Abra Revelar página.
Selecione Criar primeira ação.

Tela Ações do Studio da Moviie com o player real e o botão Criar primeira ação

A configuração fica dentro do Studio do próprio vídeo e usa o player real como referência de tempo.

2. Prepare o elemento na página

Escolha uma classe para um ou mais elementos, ou um ID para um único elemento. O exemplo abaixo prepara uma seção de oferta usando a classe oferta-vsl:

<style>
  .moviie-hidden-until-reveal {
    display: none !important;
  }
</style>

<section class="oferta-vsl moviie-hidden-until-reveal">
  <!-- seu checkout, bônus ou bloco de oferta -->
</section>

Coloque a regra .moviie-hidden-until-reveal no <head> da página, ou no recurso de CSS global do construtor. Isso impede que a oferta apareça por alguns milissegundos antes de a integração terminar de carregar.

Se preferir um ID, use esta forma:

<section id="oferta-vsl" class="moviie-hidden-until-reveal">
  <!-- seu checkout, bônus ou bloco de oferta -->
</section>

Quando usar classe ou ID

Opção	Use quando	Resultado
Classe	vários elementos devem responder à mesma ação	todos os elementos com a classe são revelados
ID	existe um único bloco de destino	o elemento com aquele ID é revelado

No campo do Studio, informe apenas oferta-vsl. Não inclua o ponto de uma classe, o # de um ID, espaços ou outros caracteres. A Moviie aceita letras, números, hífen e sublinhado.

Em Elementor, Webflow e construtores semelhantes, adicione oferta-vsl no campo CSS Classes ou Classe CSS. Para um ID, use o campo CSS ID ou ID HTML. O nome precisa ser idêntico ao que foi salvo no Studio, inclusive hífens e sublinhados.

3. Defina o alvo e o momento

Em O que será revelado:

Dê um Nome interno descritivo, como Oferta principal.
Escolha Classe ou ID.
Informe o Nome no seu HTML, sem . ou #.

Em Quando acontece, escolha uma opção:

Momento do pitch usa o instante marcado em Analytics. Se o pitch ainda não foi marcado, a Moviie impede o salvamento e orienta a configurá-lo primeiro.
Tempo manual permite informar Revela em em minutos e segundos.

O campo Oculta em (opcional) define quando o elemento volta a desaparecer. O encerramento precisa ser posterior ao início e não pode ultrapassar a duração do vídeo. Deixe-o vazio para manter o elemento visível até o fim daquela reprodução.

Formulário de ação com classe, tempo manual e linha do tempo sincronizada ao player

A linha do tempo mostra os estados aguardando, visível e encerrado sem substituir o player da VSL.

4. Configure a experiência depois da revelação

Ative Levar até o conteúdo quando quiser rolar a página automaticamente até o primeiro elemento encontrado. Em Compensar cabeçalho fixo, use um valor negativo para deixar espaço acima do bloco. Por exemplo, -80 px evita que um cabeçalho fixo de 80 pixels cubra o início da oferta. O intervalo aceito é de -1000 px a 1000 px.

A rolagem é suave por padrão. Se o visitante tiver ativado a preferência de reduzir movimentos no sistema, a Moviie respeita essa configuração e evita a animação.

Ative Manter revelado em visitas futuras para não esconder novamente o elemento quando aquela pessoa voltar à mesma página. Essa escolha:

vale somente no mesmo navegador e dispositivo;
pode ser perdida se a pessoa limpar os dados de navegação ou usar o modo privado;
não pode ser combinada com Oculta em.

Opções de rolagem e persistência, código de integração e ação para salvar

O próprio formulário gera o código inicial do elemento conforme a classe ou o ID escolhido.

Selecione Copiar no cartão Código da página, adapte o conteúdo interno da seção e cole-o no site. Depois, selecione Ativar ação.

5. Teste com o player real

Antes de publicar a página:

Use Usar tempo atual para preencher o início com a posição atual do player.
Use Ir para para posicionar o vídeo no início ou no encerramento configurado.
Reproduza alguns segundos antes do gatilho e confirme que o elemento continua oculto.
Atravesse o gatilho e confirme a revelação e, se ativada, a rolagem.
Volte o vídeo para antes do início. Sem persistência, o elemento deve ser ocultado novamente.
Avance para depois de Oculta em. O elemento deve voltar a desaparecer.
Recarregue a página para testar Manter revelado em visitas futuras.
Repita o teste em uma tela de celular e confirme que o construtor não usa outra classe ou outro bloco apenas no layout móvel.

Gerencie ações existentes

Depois de salvar, cada ação aparece em um cartão com seletor, início, encerramento, rolagem e estado de persistência. Use:

o interruptor para ativar ou desativar a ação sem apagar sua configuração;
o lápis para editar e testar novamente;
a lixeira para excluir, após a confirmação Excluir ação?;
Nova ação de página para controlar outro elemento.

Excluir uma ação não altera o HTML do seu site. Se aquele elemento não será mais controlado pela Moviie, remova também moviie-hidden-until-reveal do bloco. Caso contrário, o CSS inicial continuará mantendo o conteúdo oculto.

O que esperar durante a reprodução

Antes do momento escolhido, o bloco permanece oculto.
Ao chegar ao momento configurado, o bloco aparece e a página rola até ele se Levar até o conteúdo estiver ativo.
Ao voltar o vídeo para antes do início, o bloco volta a ficar oculto, exceto quando Manter revelado em visitas futuras está ativo.
Ao passar por Oculta em, o bloco desaparece novamente.
Uma classe pode revelar vários blocos ao mesmo tempo. Um ID deve identificar apenas um bloco.

Faça a validação na página publicada ou em uma prévia que carregue o código Web da Moviie. A prévia isolada do construtor pode não reproduzir o comportamento final.

Problemas comuns

Sintoma	Causa provável	Como corrigir
O bloco pisca antes de desaparecer	o CSS inicial carregou tarde ou não foi incluído	coloque a regra no `<head>` e mantenha `moviie-hidden-until-reveal` no elemento
O vídeo toca, mas o bloco nunca aparece	o código Web está incompleto ou o nome não corresponde ao HTML	recopie o código Web da Moviie e compare classe ou ID letra por letra
Apenas alguns blocos aparecem	a classe não foi aplicada a todos os blocos	abra cada bloco no construtor e confirme a mesma classe
A revelação acontece no momento errado	o tempo manual ou o pitch está incorreto	use o player e Usar tempo atual, ou ajuste o pitch em Analytics
O cabeçalho cobre a oferta	a compensação não considera o cabeçalho fixo	informe a altura do cabeçalho como valor negativo
O bloco reaparece oculto em outra visita	a opção está desligada ou foi testada em outro navegador	ative a opção e teste no mesmo navegador, fora do modo privado
Funciona no desktop, mas não no celular	o construtor usa outro bloco ou outra classe no layout móvel	aplique o mesmo seletor aos dois blocos ou crie ações separadas

Evite criar ações com tempos sobrepostos para o mesmo seletor. Uma única ação para cada período de exibição é mais simples de testar e manter.

Checklist antes de publicar

O site usa o código Web completo da Moviie.
O CSS de ocultação está no <head> ou no CSS global.
A classe ou o ID coincide exatamente com o valor salvo.
O início foi testado ao reproduzir, avançar e voltar o vídeo.
O encerramento, se usado, é posterior ao início.
Rolagem e persistência têm o comportamento esperado.
Desktop e celular usam o mesmo alvo ou têm ações próprias.
A página publicada foi testada antes, durante e depois do momento escolhido.