Cómo agregar un botón que abre popup o modal
Usa un evento de clic de Button cuando quieras que un CTA abra un modal o custom modal (formulario de oferta, detalles de bono, video o paso corto de calificación) sin salir de la página.
Antes de empezar
Asegúrate de tener:
- Una página abierta en el Page Builder.
- Contenido planificado para el popup (formulario, texto, imagen, CTA).
- Familiaridad con el área Modal del Navigator para editar contenido de overlay. Consulta Navigator y capas.
Paso 1: Crear el contenido modal
- Abre el Navigator.
- Trabaja en el área Modal para que el contenido del popup permanezca separado de las secciones principales de la página.
- Añade las secciones, texto, formulario o medios que deben aparecer dentro del overlay.
- Mantén el contenido modal breve — los overlays compiten con la oferta principal.
Si tu página usa un contenedor de custom modal, anota el target/class que debe referenciar el disparador.
Paso 2: Añadir el botón disparador
- En el canvas de la página principal, arrastra un Button al hero, oferta o sección de precios.
- Configura una etiqueta clara como See offer details, Open form o Watch bonus.
- Haz clic en el botón para abrir el panel de configuración.
Consulta Elemento Button (referencia).
Paso 3: Configurar el evento de clic en Modal
- Abre la configuración de click event.
- Elige modal o custom modal (la redacción puede variar según la versión de la UI).
- Para custom modal, introduce el target container / class que coincide con tu configuración modal.
- Confirma que no usas un evento de enlace simple — una URL navegaría fuera en lugar de abrir el overlay.
| Tipo de evento | Uso típico |
|---|---|
| Modal | Flujo modal compartido / global en la página |
| Custom modal | Contenedor modal específico para ese CTA |
Page Summary puede ayudarte después a auditar disparadores, clases y reglas de apertura automática. Consulta Page Summary.
Paso 4: Estilizar y comprobar conflictos
- Estiliza el botón disparador para contraste y tamaño de toque en móvil.
- Previsualiza con otros widgets a nivel de página (Cookie, WhatsApp, Notification) activados para que el overlay no choque con controles flotantes.
- Asegura que los CTAs del modal (enviar, cerrar, enlace secundario) sean obvios.
Paso 5: Publicar y probar
- Save y Publish.
- En la URL en vivo, haz clic en el botón disparador.
- Confirma que el modal se abre con el contenido correcto.
- Cierra/descarta el modal y confirma que la página sigue siendo utilizable.
- Vuelve a probar en móvil — overlays y teclados pueden cambiar la altura disponible.
Solución de problemas
| Problema | Qué probar |
|---|---|
| El botón no hace nada | Confirma que el evento de clic es modal/custom modal, no un enlace vacío. |
| Se abre contenido incorrecto | Selecciona el target modal correcto; edita contenido en Navigator → Modal. |
| Modal recortado en móvil | Reduce la altura del contenido; prueba con cabeceras fijas desactivadas si hace falta. |
| Se confunde con Notification | Notification es un aviso a nivel de página, no un overlay modal. Usa eventos de clic modal para popups. |
Resultado
Los visitantes pueden abrir tu popup desde un CTA permaneciendo en la misma página — útil para ofertas secundarias, formularios y detalles de bonos.
Documentación relacionada
Preguntas frecuentes
¿Un modal es lo mismo que Notification?
No. Notification es un aviso singular a nivel de página. Un modal es contenido de overlay activado por eventos de clic (u otras reglas modales de la página).
¿Un botón puede abrir modal e ir a una URL?
Dale al botón una función principal. Coloca un enlace secundario dentro del modal si los visitantes necesitan un destino tras el overlay.
¿Dónde edito el contenido modal después?
Usa el área Modal del Navigator para no confundir capas de overlay con secciones principales de la página.