Cómo Incrustar un Quiz en una Página o Embudo
Puedes llevar quizzes a campañas de dos formas comunes:
- Enlazar a una URL de quiz publicada desde un botón de página o paso del embudo.
- Incrustar la experiencia del quiz dentro de una página usando el elemento Quiz Interactivo en Page Builder.
Esta guía cubre ambos patrones para que los visitantes lleguen al quiz desde landing pages y embudos sin rutas rotas.
Antes de Empezar
Asegúrate de tener:
- Un quiz construido en AtomicQuiz (o un plan para construir pasos inline en Page Builder).
- Una página o embudo donde debe aparecer el quiz.
- URLs de quiz o página publicadas para pruebas en vivo.
- Leads / webhooks configurados si las respuestas alimentan integraciones.
Consulta Elemento Quiz Interactivo y Visión general de Quizzes.
Opción A: Enlazar a una URL de Quiz Publicada
Ideal cuando el quiz es un destino independiente (tráfico de anuncios → URL del quiz).
Paso 1: Publicar el quiz
- Termina el quiz en AtomicQuiz.
- Publica en sitio, dominio y slug. Consulta Cómo publicar un quiz.
- Copia la URL en vivo HTTPS.
Paso 2: Agregar el enlace en una página
- Abre la landing page en Page Builder.
- Agrega o edita un Botón (o enlace de texto) que apunte a la URL del quiz.
- Guarda y publica la página.
Paso 3: Agregar al embudo
- Abre Embudos y selecciona tu embudo.
- Agrega la página o pega la URL del quiz como paso del embudo según tu configuración. Consulta Agregar páginas a un embudo.
- Conecta pasos anteriores (página de anuncio → quiz → resultado/gracias) en el constructor de embudos.
Prueba la cadena completa en incógnito.
Opción B: Incrustar con el Elemento Quiz Interactivo
Ideal cuando el quiz debe vivir dentro del layout de una landing page (hero + quiz inline + oferta abajo).
Paso 1: Abrir la página en Page Builder
- Ve a Pages y edita la página objetivo.
- Selecciona la sección/contenedor donde debe aparecer el quiz.
Paso 2: Agregar Quiz Interactivo
- Desde el panel de elementos, agrega Quiz Interactivo.
- Haz clic en el elemento para abrir el drawer:
- Nombra el quiz para que sea reconocible en el builder.
- Agrega o reordena pasos antes de conectar lógica (mover campos con lógica puede mostrarte advertencias).
- Abre la configuración de cada paso para contenido anidado y estilo.
Fuera de rutas dedicadas de quiz, el drawer gestiona nombre del quiz y pasos de contenido. En rutas de quiz (rutas /quiz), los controles pueden cambiar a la interfaz de diseño de quiz (permitir volver, logo, etc.).
Consulta Quiz Interactivo.
Paso 3: Configurar pasos y lógica
- Agrega pasos para preguntas, resultados y captura de formulario opcional.
- Marca campos como obligatorios solo cuando sea necesario para el siguiente paso o resultado.
- Copia referencias de campos después de campos obligatorios para copy dinámico cuando esté soportado.
- Estiliza contenedores de pasos usando configuración anidada.
Paso 4: Guardar, publicar y probar
- Guarda la página.
- Publica en tu sitio. Consulta Publicar una página.
- Prueba en la URL en vivo:
- Cada ruta de respuesta
- Campos obligatorios y navegación hacia atrás
- Espaciado en mobile
- Leads / webhooks si están conectados
Opción C: Paso de Embudo a Página de Quiz
Combina incrustación + embudo:
- Incrusta el quiz en Página A (Quiz Interactivo) o publica quiz independiente Página B.
- Agrega Página A o URL del quiz como pasos en el embudo.
- Conecta pasos de gracias, checkout o VSL después de botones de finalización del quiz o enlaces de resultado.
Confirma que los destinos de botones en Flow (AtomicQuiz) o acciones de elementos (Quiz Interactivo) coincidan con URLs del embudo.
Mejores Prácticas
- Prefiere URLs de quiz independientes para campañas de anuncios puras de quiz (seguimiento más simple).
- Usa Quiz Interactivo cuando la página necesite contenido arriba/abajo del quiz.
- Mantén el copy de pasos corto en quizzes incrustados — scroll de página + pasos de quiz acumulan longitud.
- Republica página y quiz después de cambios de webhook o Flow.
Solución de Problemas
| Problema | Qué intentar |
|---|---|
| Quiz en blanco en página en vivo | Publica la página; confirma que Quiz Interactivo tiene pasos guardados. |
| El botón va a URL incorrecta | Revisa el href; usa enlace HTTPS del quiz publicado. |
| El embudo salta el paso del quiz | Verifica orden de pasos y enlaces salientes de la página anterior. |
| La lógica se rompió después de reordenar | Revisa advertencias al mover campos; vuelve a probar todas las rutas. |
El drawer se ve diferente en ruta /quiz | Esperado — los controles de diseño de quiz se activan en rutas de quiz. |
Resultado
Los visitantes llegan a tu quiz desde un botón de landing page, bloque Quiz Interactivo incrustado o paso del embudo — con URLs en vivo probadas e integraciones confirmadas.
Documentación Relacionada
- Elemento Quiz Interactivo
- Cómo publicar un quiz
- Agregar páginas a un embudo
- Visión general de Embudos
- Cómo conectar webhooks de quiz
FAQ
¿URL de quiz independiente vs elemento Quiz Interactivo?
Usa una URL de quiz publicada para tráfico dedicado de quiz. Usa Quiz Interactivo cuando el quiz es parte de un layout de página más amplio.
¿Publico tanto la página como el quiz?
Los quizzes independientes necesitan publicación del quiz. Quiz Interactivo incrustado necesita publicación de la página. Algunas configuraciones usan ambos si enlazas a una URL de quiz separada.
¿Un embudo puede mezclar páginas y URLs de quiz?
Sí. Agrega cada paso como página o URL siguiendo tus reglas de conexión del embudo.
¿A dónde van los leads del quiz incrustado?
A Leads y webhooks configurados como otros formularios/quizzes — prueba en la URL de página publicada.
¿Quiz Interactivo es para una pregunta simple?
No. Usa bloques de opción de quiz más simples para preguntas únicas; Quiz Interactivo es para flujos multi-paso.