Cómo revelar elementos de la página durante una VSL

Configura una acción sincronizada con el video para revelar un checkout, una oferta, un bono o cualquier bloque en el momento correcto.

Las Acciones del video conectan el tiempo real de la VSL con los elementos de la página donde se incorporó el player. Puedes comenzar con un checkout, una oferta o una sección de bonos ocultos y revelarlos en el momento exacto configurado en el video.

El disparador sigue al player. Si la persona pausa, el reloj de la acción también se detiene. Si adelanta o retrocede el video, Moviie vuelve a calcular inmediatamente si el elemento debe estar visible. No es un temporizador independiente iniciado al cargar la página.

Antes de comenzar

Necesitas:

un video incorporado con el código Web completo generado por Moviie;
acceso al HTML de la página o a los campos de clase CSS e ID de tu constructor;
un bloque que pueda recibir una clase o un ID estable;
el momento del pitch marcado en Analytics si quieres usar ese disparador en lugar de ingresar un tiempo manual.

Usa el código Web exactamente como fue copiado desde Moviie. No lo reduzcas ni lo reconstruyas manualmente, porque una versión incompleta puede reproducir el video sin ejecutar las Acciones de la página.

1. Abre Acciones en Studio

En la Biblioteca, abre el video utilizado en la VSL.
En la navegación de Studio, selecciona Ações.
Abre Revelar página.
Selecciona Criar primeira ação.

Pantalla de Acciones de Moviie Studio con el player real y el botón para crear la primera acción

La configuración está dentro del Studio del video y usa su player real como referencia de tiempo.

2. Prepara el elemento en la página

Elige una clase para uno o más elementos, o un ID para un elemento único. Este ejemplo prepara una sección de oferta con la clase oferta-vsl:

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

<section class="oferta-vsl moviie-hidden-until-reveal">
  <!-- tu checkout, bono o bloque de oferta -->
</section>

Coloca la regla .moviie-hidden-until-reveal en el <head> de la página o en el CSS global de tu constructor. Esto evita que la oferta parpadee durante unos milisegundos antes de que la integración termine de cargar.

Para usar un ID:

<section id="oferta-vsl" class="moviie-hidden-until-reveal">
  <!-- tu checkout, bono o bloque de oferta -->
</section>

Clase o ID

Opción	Úsala cuando	Resultado
Clase	varios elementos deben responder a la misma acción	se revelan todos los elementos con esa clase
ID	existe un único bloque de destino	se revela el elemento con ese ID

En Studio, ingresa solamente oferta-vsl. No incluyas el punto de una clase, el # de un ID, espacios u otros caracteres. Moviie acepta letras, números, guiones y guiones bajos.

En Elementor, Webflow y constructores similares, agrega oferta-vsl en CSS Classes o Clase CSS. Para un ID, usa CSS ID o ID HTML. El nombre debe coincidir exactamente con el valor guardado en Studio.

3. Define el destino y el momento

En O que será revelado:

Escribe un Nome interno descriptivo, como Oferta principal.
Elige Classe o ID.
Ingresa el Nome no seu HTML sin . ni #.

En Quando acontece, elige:

Momento do pitch para usar el instante marcado en Analytics. Si todavía no está marcado, Moviie impide guardar y te indica que debes configurarlo primero.
Tempo manual para ingresar un valor en Revela em en minutos y segundos.

Oculta em (opcional) define cuándo el elemento vuelve a ocultarse. Debe ser posterior al inicio y no puede superar la duración del video. Déjalo vacío para mantener el elemento visible hasta el final de esa reproducción.

Formulario de acción con clase, tiempo manual y línea de tiempo sincronizada con el player

La línea de tiempo muestra los estados en espera, visible y finalizado sin sustituir al player de la VSL.

4. Configura la experiencia de revelación

Activa Levar até o conteúdo para desplazar la página hasta el primer elemento encontrado. En Compensar cabeçalho fixo, usa un valor negativo para dejar espacio encima del bloque. Por ejemplo, -80 px evita que un encabezado fijo de 80 píxeles cubra la oferta. El intervalo aceptado es de -1000 px a 1000 px.

El desplazamiento es suave por defecto. Si el visitante activó la preferencia de reducir movimiento en su sistema, Moviie respeta esa configuración y evita la animación.

Activa Manter revelado em visitas futuras para que el elemento no vuelva a ocultarse cuando esa persona regrese a la misma página. Esta elección:

vale solamente en el mismo navegador y dispositivo;
puede perderse si la persona borra los datos de navegación o usa el modo privado;
no se puede combinar con Oculta em.

Opciones de desplazamiento y persistencia, código de integración y acción para guardar

El formulario genera el código inicial según la clase o el ID elegido.

Selecciona Copiar en Código da página, adapta el contenido de la sección y pégalo en tu sitio. Después, selecciona Ativar ação.

5. Prueba con el player real

Antes de publicar la página:

Usa Usar tempo atual para copiar la posición actual del player al campo de inicio.
Usa Ir para para saltar al inicio o al final configurado.
Reproduce desde unos segundos antes del disparador y confirma que el elemento sigue oculto.
Cruza el disparador y verifica la revelación y el desplazamiento opcional.
Retrocede hasta antes del inicio. Sin persistencia, el elemento debe ocultarse otra vez.
Avanza hasta después de Oculta em. El elemento debe volver a ocultarse.
Recarga la página para probar Manter revelado em visitas futuras.
Repite la prueba en una pantalla de celular y confirma que el constructor no usa otra clase o bloque para el diseño móvil.

Administra las acciones existentes

Después de guardar, cada acción aparece en una tarjeta con su selector, inicio, final, desplazamiento y estado de persistencia. Usa:

el interruptor para activar o desactivar la acción sin borrar su configuración;
el lápiz para editar y probar de nuevo;
la papelera para eliminar después de confirmar Excluir ação?;
Nova ação de página para controlar otro elemento.

Eliminar una acción no modifica el HTML de tu sitio. Si Moviie ya no controlará ese elemento, elimina también moviie-hidden-until-reveal del bloque. De lo contrario, el CSS inicial mantendrá el contenido oculto.

Qué esperar durante la reproducción

Antes del momento elegido, el bloque permanece oculto.
Al llegar al momento configurado, el bloque aparece y la página se desplaza hasta él si Levar até o conteúdo está activo.
Al retroceder antes del inicio, el bloque vuelve a ocultarse, excepto cuando Manter revelado em visitas futuras está activo.
Al pasar por Oculta em, el bloque desaparece otra vez.
Una clase puede revelar varios bloques al mismo tiempo. Un ID debe identificar un solo bloque.

Haz la prueba en la página publicada o en una vista previa que cargue el código Web de Moviie. La vista aislada del constructor puede no reproducir el comportamiento final.

Problemas comunes

Síntoma	Causa probable	Cómo corregirlo
El bloque parpadea antes de ocultarse	el CSS inicial cargó tarde o no fue incluido	coloca la regla en `<head>` y conserva `moviie-hidden-until-reveal` en el destino
El video se reproduce, pero el bloque nunca aparece	el código Web está incompleto o el nombre no coincide	vuelve a copiar el código Web y compara la clase o el ID carácter por carácter
Solo aparecen algunos bloques	la clase no fue aplicada a todos los bloques	abre cada bloque en el constructor y confirma la misma clase
La revelación sucede en el momento incorrecto	el tiempo manual o el pitch es incorrecto	usa el player y Usar tempo atual, o actualiza el pitch en Analytics
El encabezado cubre la oferta	la compensación no considera el encabezado fijo	ingresa la altura del encabezado como valor negativo
El bloque vuelve oculto en otra visita	la opción está desactivada o se probó en otro navegador	actívala y prueba en el mismo navegador fuera del modo privado
Funciona en escritorio, pero no en celular	el constructor usa otro bloque o clase en el diseño móvil	aplica el mismo selector a ambos bloques o crea acciones separadas

Evita acciones con tiempos superpuestos para el mismo selector. Una sola acción para cada período de visualización es más fácil de probar y mantener.

Lista de verificación antes de publicar

El sitio usa el código Web completo de Moviie.
El CSS de ocultación está en <head> o en el CSS global.
La clase o el ID coincide exactamente con el valor guardado.
El inicio fue probado reproduciendo, adelantando y retrocediendo el video.
El final opcional es posterior al inicio.
El desplazamiento y la persistencia funcionan como se espera.
Escritorio y celular usan el mismo destino o tienen acciones separadas.
La página publicada fue probada antes, durante y después del momento elegido.