# 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. - Canonical: https://moviie.ai/help/pt-br/player/revelar-elementos-da-pagina-durante-uma-vsl - Language: pt-BR - Category: Player e experiência - Published: 2026-08-07 - Updated: 2026-08-07 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**. *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`: Coloque a regra `.moviie-hidden-until-reveal` no `` 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: ## 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. *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**. *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 `` 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 `` 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. ## Continue aprendendo Como incorporar um vídeo da Moviie no seu site Como configurar recursos de VSL em um vídeo Como adicionar botões de ação a um vídeo