Cómo incrustar un flipbook en tu sitio web
Paso a paso para WordPress, Webflow, Squarespace, Wix y sitios HTML personalizados.
Cómo incrustar un flipbook en tu sitio web
Una de las formas más efectivas de usar un flipbook es incrustarlo directamente en tu sitio web. En lugar de enviar a los lectores a un enlace separado, puedes colocar una publicación interactiva dentro de tus páginas existentes: en una página de destino, una entrada de blog, una biblioteca de recursos o una página de producto.
Esta guía cubre cómo obtener tu código de incrustación de ZenFlip y cómo usarlo en las plataformas web más populares.
Cómo obtener tu código de incrustación
Cada publicación de ZenFlip tiene un código de incrustación que puedes copiar desde tu panel de control:
Ve a tu panel de control de ZenFlip
Haz clic en la publicación que quieres incrustar
Haz clic en el botón "Share"
Selecciona la pestaña "Embed"
Copia el código iframe
El código de incrustación se ve algo así:
Puedes ajustar los valores de ancho y alto para adaptarlos al diseño de tu página. El visor de flipbooks es responsivo y se adaptará al contenedor que le proporciones.
Incrustar en WordPress
Usando el editor de bloques (Gutenberg)
Abre la página o entrada donde quieres el flipbook
Haz clic en el botón "+" para añadir un nuevo bloque
Busca "HTML personalizado" y selecciónalo
Pega tu código de incrustación de ZenFlip en el bloque HTML
Haz clic en "Vista previa" para ver cómo queda
Publica o actualiza tu página
Usando el editor clásico
Abre tu página o entrada
Cambia a la pestaña "Texto" (no "Visual")
Pega tu código de incrustación donde quieras que aparezca el flipbook
Vuelve a "Visual" para previsualizar
Publica o actualiza
Consejos para WordPress
Si tu tema tiene un área de contenido estrecha, establece el ancho del iframe a "100%" para que ocupe todo el espacio disponible
Para un flipbook a ancho completo, considera usar un constructor de páginas como Elementor o una plantilla de página a ancho completo
Algunos plugins de seguridad pueden eliminar las etiquetas iframe. Si tu incrustación desaparece después de guardar, revisa la configuración de tu plugin de seguridad
Incrustar en Webflow
Abre tu proyecto de Webflow en el Designer
Arrastra un elemento "Embed" desde el panel Añadir a tu página
Pega tu código de incrustación de ZenFlip en el campo de código
Cierra el editor de incrustación
Ajusta el tamaño del elemento de incrustación usando el panel de Estilo
Publica tu sitio
Webflow te da control preciso sobre el dimensionamiento. Puedes establecer el contenedor de incrustación a una altura específica en píxeles o usar unidades de altura del viewport (vh) para un diseño más dinámico.
Incrustar en Squarespace
Abre tu página en el editor de Squarespace
Haz clic en el botón "+" donde quieras añadir el flipbook
Selecciona "Código" de los bloques de contenido
Pega tu código de incrustación de ZenFlip
Haz clic en "Aplicar"
Guarda y publica tu página
Squarespace envuelve las incrustaciones en un contenedor. Si el flipbook aparece demasiado pequeño, aumenta el valor de altura en tu código iframe (prueba con 700 u 800 píxeles).
Incrustar en Wix
Abre tu sitio en el Editor de Wix
Haz clic en "Añadir" en el menú izquierdo
Selecciona "Código incrustado" y luego "Incrustar HTML"
Un widget de código aparecerá en tu página
Haz clic en "Introducir código" y pega tu código de incrustación de ZenFlip
Haz clic en "Actualizar"
Arrastra y redimensiona el widget para ajustarlo a tu diseño
Publica tu sitio
Wix requiere que dimensiones manualmente el widget de incrustación en el lienzo. Asegúrate de que sea lo suficientemente grande para una lectura cómoda.
Incrustar en sitios HTML personalizados
Si gestionas tu propio HTML, pega el código de incrustación directamente en el código fuente de tu página:
El div envolvente centra el flipbook y establece un ancho máximo. Ajusta estos valores según tu diseño.
Hacer tu incrustación responsiva
Para un flipbook que se escale suavemente en todos los tamaños de pantalla, usa la técnica del contenedor responsivo:
El padding-bottom: 75% crea una relación de aspecto 4:3. Para una publicación horizontal, prueba padding-bottom: 56.25% (relación 16:9). Para una publicación vertical, prueba padding-bottom: 125%.
Mejores prácticas para flipbooks incrustados
Dale suficiente altura. Un flipbook demasiado pequeño obliga a los lectores a entrecerrar los ojos. En escritorio, 600 píxeles es una altura mínima razonable. En páginas de destino donde el flipbook es el contenido principal, considera 700-800 píxeles o incluso la altura completa del viewport.
Añade un atributo title. Incluir title="Nombre de tu publicación" en la etiqueta iframe mejora la accesibilidad. Los lectores de pantalla usan esto para describir el contenido incrustado.
Considera el tiempo de carga de la página. El flipbook se carga de forma asíncrona, por lo que no ralentizará tu página. Sin embargo, colocar la incrustación debajo del pliegue (más abajo en la página) significa que se carga después de que tu visitante vea el contenido inicial.
Proporciona un enlace alternativo. Algunas redes corporativas bloquean los iframes. Debajo de tu incrustación, considera añadir un enlace de texto: "¿Problemas para visualizar? Abrir en una nueva pestaña."
Prueba en móvil. El visor de ZenFlip es responsivo y soporta gestos táctiles, pero comprueba que el diseño de tu página no restrinja la incrustación a un tamaño inutilizable en teléfonos.
Opciones de incrustación en planes de pago
En el plan Creator y superiores, tienes opciones de incrustación adicionales:
Eliminar la marca de ZenFlip del visor
Dominio personalizado - incrustar desde tu propio dominio (ej., publicaciones.tuempresa.com)
Protección con contraseña - requerir una contraseña antes de que se cargue el flipbook (plan Business)
Solución de problemas
La incrustación muestra un espacio en blanco: Comprueba que tu publicación esté configurada con visibilidad "Pública". Las publicaciones privadas no se pueden incrustar.
El iframe está siendo eliminado: Algunas plataformas CMS o plugins de seguridad eliminan las etiquetas iframe. Busca una opción de bloque "HTML" o "Código" en lugar de pegar en un editor de texto enriquecido.
El flipbook es demasiado pequeño en móvil: Establece el ancho del iframe a "100%" y asegúrate de que el contenedor de tu página no esté restringiendo el ancho. La técnica del contenedor responsivo descrita arriba ayuda.
La incrustación está bloqueada por un firewall corporativo: Proporciona un enlace directo al flipbook como alternativa para que los lectores puedan abrirlo en una nueva pestaña.