Opciones avanzadas de incrustación
Usa la API JavaScript programática para incrustación dinámica, integra con SPAs React/Vue/Angular, maneja eventos, personaliza estilos y configura el comportamiento de paso automático.
Opciones avanzadas de incrustación
Más allá de los enfoques básicos de etiqueta de script y div, el widget de incrustación de ZenFlip proporciona una API JavaScript programática para escenarios de incrustación dinámica. Esta guía cubre la API, la integración con aplicaciones de página única (SPA), el manejo de eventos y la configuración avanzada.
API programática
El script de incrustación expone un objeto global ZenFlip con métodos para crear y gestionar incrustaciones.
ZenFlip.embed(target, options)
Crea una instancia de incrustación programáticamente.
Parámetros:
Parámetro | Tipo | Requerido | Descripción |
| string o HTMLElement | Sí | Selector CSS o elemento DOM |
| string | Sí | Slug de la publicación |
| string o number | No | Ancho (por defecto: |
| string o number | No | Alto en píxeles (por defecto: |
| boolean | No | Habilitar paso automático (por defecto: |
| number | No | Número de página inicial (por defecto: |
| string | No | Sobreescribir URL base del visor |
Devuelve: Un objeto de instancia de incrustación con propiedades iframe, wrapper y destroy(), o null si no se encontró el objetivo.
ZenFlip.scan()
Vuelve a escanear la página en busca de nuevos contenedores .zenflip-embed que se añadieron al DOM después de la carga inicial de la página. Esto es esencial para aplicaciones de página única donde el contenido se renderiza dinámicamente.
Destruir una incrustación
Llama a destroy() en la instancia para eliminar la incrustación del DOM y liberar recursos:
Integración SPA
React
Crea un componente React reutilizable que gestiona el ciclo de vida de la incrustación:
Vue 3
Angular
Manejo de eventos
El widget de incrustación se comunica con la página padre a través de la API postMessage. Escucha mensajes del iframe de ZenFlip para responder a eventos del visor:
Eventos disponibles
Tipo de evento | Descripción | Datos |
| El flipbook ha terminado de cargar |
|
| El visor navegó a una nueva página |
|
| Se envió un formulario de lead |
|
Estilos personalizados
El widget de incrustación envuelve el iframe en un contenedor con la clase zenflip-wrapper. Puedes dirigirte a esta clase para personalizar la apariencia exterior:
El iframe en sí maneja todos los estilos del visor internamente. No puedes inyectar CSS en el iframe debido a restricciones de origen cruzado, pero el visor respeta la configuración de marca configurada en la publicación (logotipo, colores, fuentes) a través del panel de control o la API de publicaciones.
Configuración del paso automático
Cuando autoFlip está habilitado (ya sea mediante data-auto-flip="true" o autoFlip: true en la API programática), el visor avanza páginas automáticamente a un intervalo temporizado. Esto es útil para señalización digital, pantallas de vestíbulo o presentaciones desatendidas.
El intervalo de paso automático y el comportamiento (bucle vs. parar en la última página) se pueden configurar a través de los ajustes del visor de la publicación en el panel de control o mediante el endpoint PATCH /publications/:id/settings.
URL base personalizada
Si alojas el visor de ZenFlip en un dominio personalizado o un despliegue autoalojado, sobreescribe la URL base:
O programáticamente:
La URL del visor se construye como {baseUrl}/view/{slug}, así que asegúrate de que tu dominio personalizado sirve el visor de ZenFlip en esa ruta.
Información de versión
Comprueba la versión actual del widget de incrustación:
Prevención de doble inicialización
El script de incrustación incluye protección integrada contra la doble inicialización. Si el script se incluye múltiples veces en la misma página (común en entornos CMS), solo la primera instancia se ejecuta. Las cargas posteriores del script se ignoran silenciosamente.