Ya sea que publiques un catálogo de productos, una revista digital o un manual de capacitación, incrustar un flipbook en tu sitio hace que tu contenido sea imposible de ignorar. Este artículo explica cada método, plataforma y ajuste que necesitas para publicarlo hoy mismo.
Poner un PDF estático en tu sitio web es como entregarle a alguien un folleto impreso y luego darle la espalda. Un flipbook incrustado, con sus animaciones de paso de página, su diseño adaptable a dispositivos móviles y sus controles interactivos, mantiene a los visitantes en la página, hace que hagan clic y que tu contenido realmente se lea. Flipbooks AI hace que todo el proceso tome menos de cinco minutos, tanto si tienes un blog de WordPress, una tienda en Shopify o una página HTML escrita a mano.
Este artículo cubre todos los métodos para incrustar un flipbook en tu sitio web, los ajustes que importan, los errores que rompen la incrustación y los casos de uso reales que hacen que valga la pena hacerlo bien.
Antes de pegar una sola línea de código, conviene saber con qué estás trabajando. Un flipbook incrustado no es una imagen ni una vista previa estática de un PDF. Es una publicación digital completamente interactiva e independiente que se carga dentro de tu página web, justo donde la colocas.
La mayoría de las plataformas, incluida Flipbooks AI, entregan la incrustación mediante una etiqueta <iframe>. El iframe crea una ventana aislada dentro de tu página que carga el reproductor del flipbook de forma independiente. Esto significa que:
Algunas plataformas también ofrecen incrustaciones basadas en JavaScript, que insertan el reproductor directamente en el DOM. Estas te dan más control programático (por ejemplo, para activar pasos de página mediante código), pero requieren una configuración técnica más compleja y pueden entrar en conflicto con scripts existentes.
💡 Para la mayoría de los usuarios, la incrustación con iframe es la opción correcta. Es estable, portátil y no requiere ningún conocimiento de programación.
Una incrustación de ancho fijo define dimensiones exactas en píxeles. Es simple, pero se rompe en las pantallas de los dispositivos móviles. Una incrustación adaptable usa un ancho en porcentaje y un truco de relleno para mantener la proporción en todos los dispositivos.
| Tipo de incrustación | Ideal para | Compatible con móviles |
|---|---|---|
| iframe de ancho fijo | Contextos conocidos solo de equipo de escritorio | No |
| iframe adaptable | La mayoría de los sitios web, todo tipo de público | Sí |
| Incrustación con JavaScript | Activadores controlados por desarrolladores | Depende de la implementación |
| Widget de la plataforma | Constructores de sitios web (Wix, Squarespace) | Sí (la plataforma se encarga) |
Flipbooks AI genera códigos para incrustar adaptables por defecto, así que tu flipbook se ajusta solo a cualquier ancho de pantalla.
El código para incrustar es el pequeño bloque de HTML que copias de tu plataforma de flipbooks y pegas en tu sitio web. Así se obtiene.
El código se ve así:
<iframe src="https://flipbooksai.com/view/your-flipbook-id" width="100%" height="600" frameborder="0" allowfullscreen></iframe>
Antes de copiar, puedes ajustar varias opciones directamente en el panel de incrustación:
| Ajuste | Qué controla | Valor recomendado |
|---|---|---|
| Ancho | Ancho del reproductor en la página | 100 % (adaptable) |
| Alto | Alto del reproductor en píxeles | 500-700 px según el contenido |
| Reproducción automática | Pasa las páginas al cargar | Desactivada (el usuario prefiere el control) |
| Página de inicio | Qué página se abre primero | 1 (portada) |
| Controles visibles | Muestra u oculta la barra de navegación | Activados |
| Botón de pantalla completa | Permite el modo de pantalla completa | Activado |
⚠️ Si fijas un ancho en píxeles en lugar de 100 %, la incrustación se desbordará en las pantallas de los dispositivos móviles. Prueba siempre en un teléfono antes de publicar.
WordPress es la plataforma más común para incrustar flipbooks, y el proceso toma unos 90 segundos.
Con el editor clásico:
Con el editor de bloques (Gutenberg):
💡 Algunos complementos de seguridad de WordPress (como Wordfence o iThemes) eliminan las etiquetas iframe del contenido de las entradas. Si tu incrustación desaparece después de guardar, revisa la configuración de tu complemento de seguridad y añade el dominio de Flipbooks AI a la lista de permitidos.
Con un constructor de páginas (Elementor, Divi, Beaver Builder):
Ambas plataformas usan sus propios constructores de arrastrar y soltar, pero las dos admiten incrustaciones de HTML puro.
Squarespace:
Wix:
Los minoristas suelen incrustar catálogos de productos y lookbooks directamente en las páginas de colecciones o en la página de inicio. Shopify usa un sistema de plantillas Liquid, pero incrustar sigue siendo sencillo.
En una página:
En las secciones de la página de inicio:
Necesitarás editar la plantilla de tu tema index.liquid o usar una sección de HTML personalizado si tu tema lo admite. La mayoría de los temas modernos de Shopify incluyen una sección de Contenido personalizado donde puedes colocar HTML directamente.
✅ Para las tiendas en Shopify, las herramientas Creador de catálogos digitales gratis y Generador de catálogos de productos de Flipbooks AI son especialmente adecuadas para incrustar lookbooks de temporada y escaparates de productos.
Si trabajas con un archivo HTML escrito a mano o con un generador de sitios estáticos, este es el caso más sencillo:
<div class="flipbook-container" style="width:100%; max-width:900px; margin:0 auto;">
<iframe
src="https://flipbooksai.com/view/your-flipbook-id"
width="100%"
height="600"
frameborder="0"
allowfullscreen>
</iframe>
</div>
Envuélvelo en un div con un max-width para evitar que se estire demasiado en monitores grandes.
Elegir bien el tamaño es clave, porque ahí fallan la mayoría de las incrustaciones. El flipbook se ve bien en el equipo de escritorio, pero se reduce a una caja diminuta en un teléfono o se estira de forma extraña en un monitor ancho.
La configuración más segura para cualquier sitio web:
<div style="position:relative; padding-bottom:56.25%; height:0; overflow:hidden;">
<iframe
src="https://flipbooksai.com/view/your-flipbook-id"
style="position:absolute; top:0; left:0; width:100%; height:100%;"
frameborder="0"
allowfullscreen>
</iframe>
</div>
El valor padding-bottom: 56.25% crea un contenedor con proporción 16:9. El iframe lo llena por completo. Cambia 56.25% por 75% para una proporción 4:3, que funciona mejor con publicaciones en formato vertical.
Flipbooks AI optimiza automáticamente el reproductor del flipbook para pantallas táctiles: los gestos de deslizar reemplazan la navegación con clic, la interfaz se reduce y el zoom con dos dedos funciona en las páginas de la publicación. No necesitas crear una versión móvil aparte.
✅ Prueba tu incrustación en un dispositivo móvil real, no solo en el modo de emulación del navegador. Las herramientas para desarrolladores del navegador no simulan los eventos táctiles igual que un dispositivo real.
Antes de incrustar nada, necesitas el flipbook en sí. Así se crea uno en Flipbooks AI desde cero:
💡 Las herramientas Conversor de PDF a flipbook y Incrustar flipbook en sitio web simplifican todo este flujo en un solo lugar.
Funciones incluidas por plan:
| Función | Free | Standard | Professional |
|---|---|---|---|
| Flipbooks por cuenta | 3 | Ilimitados | Ilimitados |
| Marca personalizada | Parcial | Completa | Completa |
| Protección con contraseña | No | Sí | Sí |
| Panel de estadísticas | No | No | Sí |
| Formularios de generación de contactos | No | No | Sí |
| Descargas sin conexión | No | No | Sí |
| Incrustar en sitio web | Sí | Sí | Sí |
| Sin marcas de agua | No | Sí | Sí |
Compara todos los planes para ver cuál se ajusta a tu forma de trabajar.
La incrustación no es solo una función técnica, es una herramienta de conversión. Así la usan distintos negocios:
Comercio minorista y comercio electrónico: Los catálogos de productos incrustados en las páginas de colecciones aumentan el tiempo en el sitio y reducen la tasa de rebote. Los compradores hojean el catálogo como un lookbook físico y luego hacen clic en las páginas de productos. El Diseñador de lookbooks interactivos está pensado exactamente para este caso de uso.
Restaurantes: Un menú digital incrustado en la página de inicio del restaurante reemplaza las galerías de imágenes estáticas. Es más fácil de actualizar (subes un PDF nuevo y la incrustación se actualiza sola) y más atractivo que una página larga con desplazamiento. Usa el Creador de flipbooks de menú de restaurante para diseñarlo.
Bienes raíces: Los folletos de propiedades incrustados en las páginas de inmuebles permiten a los compradores hojear planos, fotos e información del vecindario sin salir del sitio. El Creador de folletos inmobiliarios produce PDF listos para imprimir que se convierten sin problemas.
Educación y capacitación: Los materiales de curso, los manuales de capacitación y los documentos de incorporación incrustados en un portal de aprendizaje resultan mucho más atractivos que los PDF descargables. El Flipbook de manual de capacitación y el Publicador interactivo de material de curso respaldan este flujo de trabajo de forma directa.
Marketing y relaciones públicas: Los informes anuales incrustados en las páginas de relaciones con inversionistas, los kits de prensa en las secciones de medios y las presentaciones de ventas en las páginas de destino se benefician del formato interactivo. El Creador de informes anuales interactivos maneja sin problemas documentos complejos de varias páginas.
Si tu flipbook está configurado como Privado o Protegido con contraseña, la incrustación mostrará un aviso de inicio de sesión o un área en blanco a los visitantes anónimos. Antes de incrustarlo, asegúrate de que la opción para compartir esté en Público, o entrega la contraseña a tu público por separado.
Algunos temas aplican restricciones de overflow: hidden o max-height a las áreas de contenido, lo que recorta u oculta el iframe. Si tu flipbook aparece cortado, prueba esto:
.your-content-area {
overflow: visible !important;
}
O envuelve el iframe en un contenedor con alto explícito para que los estilos del tema no lo compriman.
En WordPress y editores similares, si pegas el código iframe en el editor Visual (WYSIWYG) en lugar del editor HTML/Texto, la plataforma eliminará la etiqueta iframe por motivos de seguridad. Cambia siempre a la vista HTML sin formato antes de pegar.
Los borradores y las vistas previas a veces se comportan de forma distinta a las páginas publicadas, sobre todo con complementos de caché activos. Después de publicar, abre la URL en vivo en una ventana de incógnito para confirmar que la incrustación se muestra correctamente a un visitante que llega por primera vez.
⚠️ Los complementos de caché (WP Super Cache, W3 Total Cache) a veces muestran una versión en caché de tu página sin la incrustación si se guardó antes de que añadieras el flipbook. Borra la caché después de añadir el código para incrustar.
| Plataforma | Método de incrustación | Nivel técnico | Tiempo necesario |
|---|---|---|---|
| WordPress (editor de bloques) | Bloque de HTML personalizado | Principiante | 2 minutos |
| WordPress (editor clásico) | Pestaña Texto, pegar HTML | Principiante | 1 minuto |
| Elementor / Divi | Widget HTML | Principiante | 2 minutos |
| Squarespace | Bloque de código | Principiante | 2 minutos |
| Wix | Widget iframe HTML | Principiante | 3 minutos |
| Shopify | Código fuente de la página | Intermedio | 5 minutos |
| Webflow | Elemento de incrustación HTML | Principiante | 2 minutos |
| HTML puro | Pegar directamente | Principiante | 1 minuto |
Una vez que el flipbook esté publicado en tu sitio, el plan Professional de Flipbooks AI te da acceso al panel de estadísticas. Puedes ver cuántos visitantes abrieron la incrustación, en qué páginas pasaron más tiempo, hasta dónde leyeron y si hicieron clic en algún enlace interno.
Estos datos te dicen más que un simple conteo de visitas. Si los lectores abandonan con regularidad en la página 4 de un catálogo de 20 páginas, esa página necesita trabajo. Si la última página recibe más tiempo de lectura, tu llamada a la acción está haciendo su trabajo.
Los formularios de generación de contactos, disponibles en el plan Professional, te permiten reservar el flipbook para quienes llenen un formulario de registro, y recopilar correos directamente de los lectores que interactúan con tu publicación incrustada.
¿Listo para poner un flipbook en tu sitio? Crea tu primer flipbook en Flipbooks AI gratis, toma el código para incrustar del panel Compartir y pégalo donde tu audiencia ya pasa el tiempo. Explora todas las herramientas y plantillas para encontrar el formato adecuado para tu contenido, o consulta los planes y precios si necesitas flipbooks ilimitados, marca personalizada y estadísticas desde el primer día.
Elige tu idioma
