Cómo incrustar flipbooks en tu sitio web

Compartir un enlace de flipbook es el método de distribución más simple, pero incrustar un flipbook directamente en tu sitio web te da más control sobre la experiencia del lector. Un flipbook incrustado vive dentro de tu página, rodeado de tu marca y contenido, creando una experiencia fluida para los visitantes.

Esta guía cubre todas las opciones de incrustación, desde un iframe rápido hasta la integración avanzada con JavaScript.

Opción 1: Incrustación rápida (iframe)

La forma más rápida de incrustar un flipbook es con un iframe. ZenFlip proporciona un código de incrustación listo para usar para cada flipbook publicado.

Obteniendo tu código de incrustación

1. Abre la publicación en tu panel de ZenFlip

2. Haz clic en Compartir en la esquina superior derecha

3. Selecciona la pestaña Incrustar

4. Copia el código de incrustación

El código se ve así:

Pega esto en cualquier página HTML, editor de CMS o constructor de sitios web que soporte HTML personalizado.

Haciéndolo responsive

Una altura fija funciona para casos de uso simples, pero una incrustación responsive se adapta a la pantalla del lector. Envuelve el iframe en un contenedor con una relación de aspecto basada en porcentaje:

El padding-bottom: 75% crea una relación de aspecto 4:3. Ajusta a 56.25% para 16:9, o 100% para una incrustación cuadrada.

Opción 2: El widget JavaScript

Para más control, usa el widget de incrustación JavaScript de ZenFlip. Este método te da acceso a opciones de personalización y callbacks de eventos.

Configuración básica

Añade el script de incrustación de ZenFlip a tu página:

Opciones de configuración

La función de incrustación acepta estas opciones:

Escuchando eventos

El widget JavaScript emite eventos que puedes usar para disparar acciones en tu página:

Esto es útil para rastrear eventos de analíticas personalizados, mostrar contenido contextual junto a páginas específicas o activar animaciones cuando el lector alcanza cierto punto en la publicación.

Guías específicas por plataforma

WordPress

1. Crea o edita una página en WordPress

2. Añade un bloque de HTML personalizado

3. Pega tu código de incrustación de ZenFlip (iframe o JavaScript)

4. Previsualiza y publica

Si tu tema de WordPress restringe iframes, usa el método de incrustación JavaScript en su lugar.

Webflow

1. Arrastra un elemento Embed a tu página en el Diseñador de Webflow

2. Pega el código de iframe

3. Ajusta el tamaño del elemento en el panel de diseño de Webflow

4. Publica tu sitio

Shopify

1. Ve a la página o producto donde quieres el flipbook

2. Cambia a la vista del editor HTML

3. Pega el código de incrustación

4. Guarda

Para las páginas de producto de Shopify, considera incrustar tu catálogo de productos como flipbook junto a tus fotos de producto estándar. Ofrece a los clientes una experiencia de navegación más rica.

React / Next.js

Para aplicaciones React, usa el widget JavaScript dentro de un hook useEffect:

Estilizando la incrustación

El visor de flipbook hereda algunos estilos de su contenedor. Puedes controlar:

• Radio de borde: Añade border-radius al iframe o contenedor para esquinas redondeadas

• Sombra: Una sombra sutil ayuda al flipbook a destacar del resto de la página

• Ancho máximo: Establece un max-width en el contenedor para evitar que el flipbook se estire demasiado en pantallas grandes

Consideraciones de rendimiento

Los flipbooks incrustados se cargan de forma asíncrona y no bloquean la renderización de tu página. Sin embargo, ten en cuenta estos puntos:

• Carga diferida: Si el flipbook está debajo del pliegue, añade loading="lazy" al iframe para que solo se cargue cuando el lector se desplace hasta él

• Una sola incrustación por página: Incrustar múltiples flipbooks en la misma página es compatible, pero cada uno consume recursos. Para páginas que listan múltiples publicaciones, considera enlazar a páginas dedicadas en su lugar

• Ancho de banda móvil: El visor carga recursos optimizados según el dispositivo del lector. En conexiones móviles, los tamaños de viewport más pequeños reciben imágenes de página de menor resolución para reducir el tiempo de carga

Analíticas y flipbooks incrustados

Los flipbooks incrustados rastrean analíticas de forma idéntica a los vistos directamente. Las vistas, la profundidad de lectura, el engagement por página y las capturas de leads funcionan de la misma manera independientemente de cómo el lector acceda a la publicación. El dominio de referencia se registra en tus analíticas, para que puedas ver qué páginas de tu sitio web generan más engagement con el flipbook.