Incrustar un flipbook en tu sitio web convierte los PDF estáticos en experiencias interactivas de paso de página que mantienen a los visitantes atentos mucho más tiempo. Este artículo te guía paso a paso para obtener tu código para incrustar, pegarlo en WordPress, Wix, Squarespace o cualquier sitio HTML personalizado, ajustar su tamaño para dispositivos móviles, resolver problemas comunes y publicarlo en cuestión de minutos.
Pegar un enlace de descarga de PDF en el pie de una página web no es una estrategia de contenidos. Los visitantes lo ignoran, los navegadores móviles lo manejan mal y no tienes ningún dato sobre si alguien leyó el documento. Incrustar un flipbook directamente en tu página resuelve los tres problemas a la vez y convierte un archivo pasivo en una experiencia de lectura activa e interactiva que se queda dentro de tu sitio. Flipbooks AI hace posible todo el proceso en minutos, sin escribir una sola línea de código personalizado.
Este artículo explica exactamente cómo funciona el código para incrustar, los pasos para crear e incrustar tu flipbook, cómo hacerlo en WordPress, Wix, Squarespace y sitios HTML personalizados, trucos de tamaño adaptable, casos de uso reales y los problemas más comunes que aparecen después de pegar el código.
La mayoría de los dueños de sitios web subestiman la fricción que crea un enlace a PDF. Un visitante hace clic en el enlace, espera a que el navegador abra un visor, quizá recibe un cuadro de descarga en lugar de una vista previa en la página y luego tiene que moverse por una interfaz completamente distinta para leer el contenido. En dispositivos móviles, la experiencia es siempre peor. Una parte importante de esa audiencia simplemente cierra la pestaña.
El contenido integrado en la página, es decir, el que vive en ella en lugar de requerir una aplicación aparte o una descarga, se lee mucho más tiempo y con más profundidad que los archivos enlazados. Cuando alguien tiene que salir de tu sitio web para ver un documento, pierdes por completo el control de la experiencia. También pierdes visibilidad sobre su comportamiento. No puedes saber si leyó una página o las veinte, si se detuvo en la sección de precios o si abandonó de inmediato.
Cada visitante que hace clic en un enlace a PDF y sale de tu sitio es un visitante cuyos datos de sesión, comportamiento de desplazamiento y probabilidad de volver desaparecen de tus analíticas. Un flipbook incrustado lo mantiene en tu dominio. Su comportamiento se puede rastrear. Si inviertes en tráfico de pago hacia una página de destino y esa página enlaza a un folleto en PDF, cada clic en ese PDF es una señal de conversión perdida.
Un flipbook incrustado se sitúa dentro del diseño de tu página. El visitante nunca sale de ella. Pasa las páginas sin ningún complemento, aplicación ni descarga. Puedes ver qué páginas alcanzó, cuánto tiempo pasó en ellas y si completó un formulario de contacto. Esos datos están disponibles en el plan Professional y cambian por completo la forma en que evalúas el rendimiento de tu contenido.
| Formato | Experiencia móvil | Analíticas | Se queda en la página | Interactivo |
|---|---|---|---|---|
| Enlace de descarga de PDF | Deficiente | Ninguna | No | No |
| Visor de PDF incrustado | Variable | Ninguna | Sí | No |
| Flipbook incrustado | Excelente | Completas (plan Pro) | Sí | Sí |
| Galería de imágenes | Moderada | Parcial | Sí | Limitada |
Cuando publicas un flipbook en Flipbooks AI, la plataforma genera un fragmento de código único para ese documento. El fragmento es un bloque corto de HTML que copias una sola vez y pegas donde quieras que aparezca el flipbook en tu sitio.
El tipo de incrustación más común usa un elemento iframe. Crea una ventana aislada dentro de tu página que carga el flipbook desde los servidores de Flipbooks AI. Tu página gestiona el diseño que la rodea y el iframe gestiona todo lo que hay dentro del visor. El código se ve así:
<iframe
src="https://flipbooksai.com/view/your-flipbook-id"
width="100%"
height="600"
frameborder="0"
allowfullscreen>
</iframe>
Configurar width="100%" indica al iframe que ocupe su contenedor principal, que es el valor predeterminado correcto para casi cualquier diseño. El valor de height es lo que la mayoría de las personas necesita ajustar según el diseño de su página y las proporciones del documento.
Algunas plataformas y configuraciones de seguridad bloquean los iframes sin procesar en sus editores de página, pero permiten incrustaciones con JavaScript. El panel para compartir de Flipbooks AI también ofrece una versión con etiqueta script del código para incrustar, que inserta el visor de forma dinámica. Ambas opciones están disponibles en el panel Compartir de cualquier flipbook. Si tu CMS bloquea el código iframe, cambia a la versión con etiqueta script.
💡 Prueba siempre la incrustación en un dispositivo móvil real o con DevTools del navegador justo después de publicar. Lo que se ve bien en un equipo de escritorio de 1440px puede desbordarse o colapsar en una pantalla de teléfono de 375px si el contenedor principal tiene un ancho fijo en píxeles.
El proceso siguiente usa Flipbooks AI. Desde la subida del PDF hasta la incrustación publicada tarda menos de cinco minutos.
Ve a flipbooksai.com y crea una cuenta si todavía no lo has hecho. Desde el panel, haz clic en Nuevo flipbook y sube tu PDF. La conversión se hace automáticamente. En segundos tendrás un flipbook de paso de página con todo el contenido de tu documento intacto.
En esta etapa puedes personalizar el flipbook antes de incrustarlo:
Ninguna de estas personalizaciones es obligatoria antes de incrustar. Cualquier ajuste que hagas aquí se reflejará automáticamente en la incrustación publicada, incluso después de que el código ya esté en tu sitio.
Desde el editor de flipbooks, abre la pestaña Diseño. Estas son las opciones disponibles:
Aquí también activas los formularios de contacto si estás en el plan Professional. El formulario aparece cuando el lector llega a una página específica que tú elijas, recoge nombre y correo electrónico, y registra las respuestas en tu panel de analíticas automáticamente.
Abre Compartir desde el menú de acciones de tu flipbook. Selecciona la pestaña Incrustar. Verás el código iframe generado para ese documento específico. Haz clic en Copiar. El fragmento completo ya está en tu portapapeles, listo para pegarse donde quieras.
Puedes ajustar las dimensiones predeterminadas directamente en este panel antes de copiar, si ya sabes qué tamaño necesita la incrustación en tu página.
Abre el editor de tu sitio web, ve a la página donde debe aparecer el flipbook y pega el código para incrustar en un bloque HTML, una sección de código personalizado o un editor de texto en modo de código fuente/HTML. Guarda la página y publícala. El flipbook ya está publicado.
El mismo código para incrustar funciona en todas las plataformas. Lo único que cambia es la forma de acceder al editor HTML en cada una.
WordPress usa por defecto el editor de bloques Gutenberg. Para incrustar un flipbook:
Si usas el Editor clásico, cambia a la pestaña Texto (no Visual) y pega el código directamente en el cuerpo, en la posición exacta donde quieres que aparezca el flipbook.
✅ Usa el bloque HTML personalizado, no el bloque Incrustar. El bloque Incrustar está pensado para URL de redes sociales y servicios de video, no para código iframe personalizado.
⚠️ El plan gratuito de Squarespace restringe los bloques de código personalizado. Si el bloque Código aparece en gris o bloqueado, necesitarás un plan Business o superior para usarlo.
En Webflow, arrastra un elemento Embed desde el panel de componentes a tu lienzo y pega el código dentro. En cualquier sitio HTML personalizado, pega el fragmento directamente en el <body> de la página, donde quieras que se muestre el flipbook. En ninguna de las dos plataformas hace falta configuración adicional.
| Plataforma | Dónde encontrar el editor HTML | Tipo de bloque o elemento |
|---|---|---|
| WordPress | Editor de bloques Gutenberg | Bloque HTML personalizado |
| Wix | Panel Agregar, sección Incrustar | Widget de incrustaciones personalizadas |
| Squarespace | Menú de bloques de sección | Bloque Código |
| Webflow | Panel de componentes | Elemento Embed |
| HTML personalizado | Código fuente de la página directamente | Pegar dentro de la etiqueta body |
| Shopify | Editor de código del tema | Sección Liquid o bloque HTML |
Acertar con las medidas es donde más suelen fallar las primeras incrustaciones. El flipbook se carga bien, pero queda demasiado pequeño para leerlo o se desborda en dispositivos móviles.
Definir width="100%" casi siempre es la opción correcta. Le indica al iframe que ocupe todo el contenedor en el que esté, así que se adapta automáticamente a diseños con barra lateral, secciones de ancho completo y columnas estrechas en dispositivos móviles.
El alto es distinto. Por defecto, el alto no se ajusta automáticamente con un iframe. Un alto fijo como height="600" funciona bien en escritorio, pero puede dejar un espacio vacío excesivo o recortar el flipbook en pantallas pequeñas. Las opciones prácticas son:
padding-bottom: 56.25% y configura el iframe para que ocupe con posición absoluta todo el espacio dentro. Así el alto se escala proporcionalmente con el ancho en cualquier tamaño de pantalla.Para un comportamiento en dispositivos móviles lo más fiable posible, usa la técnica del relleno con relación de aspecto:
<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>
Este envoltorio genera un visor de 16:9 que se escala perfectamente en cada ancho de pantalla, de 320px a 2560px.
Incrustar funciona mejor en algunos contextos que en otros. Estos son los casos de uso que generan los mejores resultados con regularidad.
Los minoristas incrustan catálogos de temporada, lookbooks de productos y folletos de colecciones directamente en páginas de categorías o páginas de destino. Un visitante que navega por un sitio de muebles puede hojear toda la colección de primavera sin salir de la página del producto. Las herramientas Creador de catálogos digitales gratis y Creador de flipbooks de catálogos de Flipbooks AI están diseñadas específicamente para este flujo de trabajo, con plantillas optimizadas para fotografía de producto.
Un enlace a un menú en PDF escondido en el pie de página es una de las decisiones que con más regularidad salen mal en el diseño web para hostelería. Incrustar el menú directamente en la página de inicio o en una página de menú dedicada hace que los visitantes lo vean en cuanto llegan, sin clics ni descargas adicionales. Los Creador de flipbooks de menú de restaurante y Diseñador de flipbooks de menú producen plantillas diseñadas en torno a la fotografía de comida y a diseños de precios claros.
Diseñadores, fotógrafos y marcas de moda incrustan flipbooks de portafolio y lookbooks editoriales en sus páginas de contacto o de trabajos. El efecto interactivo de paso de página hace que la presentación se vea deliberada y pulida, de una forma que una cuadrícula de imágenes estática simplemente no puede replicar. El Diseñador de lookbooks interactivos y el Creador de portafolios digitales ofrecen plantillas listas para profesionales creativos.
Los agentes inmobiliarios incrustan folletos de propiedades directamente en las páginas de cada inmueble, para que los posibles compradores hojeen planos y fotografías sin descargar nada. Los equipos de marketing corporativo incrustan informes anuales y presentaciones para inversores en sus páginas de relación con inversores, lo que da una impresión más profesional que un enlace a PDF. El Creador de folletos inmobiliarios y el Creador de informes anuales interactivos producen flipbooks listos para publicar en ambos casos.
| Caso de uso | Herramienta recomendada | Mejor página para la incrustación |
|---|---|---|
| Catálogo de productos | Creador de catálogos digitales gratis | Páginas de productos o de tienda |
| Menú de restaurante | Creador de flipbooks de menú de restaurante | Página de menú o de inicio |
| Lookbook de moda | Creador de flipbooks de lookbook | Página de colecciones |
| Portafolio creativo | Creador de portafolios digitales | Página de trabajos o de nosotros |
| Folleto inmobiliario | Creador de folletos inmobiliarios | Página de la propiedad en venta |
| Informe anual | Creador de informes anuales interactivos | Página de relación con inversores |
| Programa de evento | Creador de flipbooks de programas de eventos | Página de detalles del evento |
| Manual de formación | Flipbook de manual de formación | Página de recursos o de RR. HH. |
La causa más común es un error de contenido mixto. Si tu sitio funciona con HTTPS y la URL de la incrustación empieza con HTTP, el navegador la bloquea en silencio, sin ningún mensaje de error visible. Todas las URL de incrustación de Flipbooks AI usan HTTPS, así que esto solo es un problema si modificaste manualmente el atributo src después de copiar el código. Revisa que la URL empiece por https://.
Una segunda causa frecuente es el bloqueo de iframes impuesto por un plugin de seguridad de WordPress. Plugins como Wordfence o iThemes Security pueden restringir de forma predeterminada los iframes de fuentes externas. Revisa la configuración de tu política de seguridad de contenido o añade Flipbooks AI como fuente de confianza en el panel de configuración del plugin.
Si la incrustación se ve bien en escritorio pero rota en dispositivos móviles, es probable que el contenedor padre tenga un ancho fijo en píxeles. Abre las herramientas de desarrollo de tu navegador, inspecciona el elemento que envuelve el iframe y cambia su ancho, de un valor fijo en píxeles a 100%. Después confirma que el propio iframe también tiene width="100%".
💡 Usa la vista adaptable de las herramientas de desarrollo de tu navegador para simular tamaños de pantalla de teléfono antes de publicar. Tarda treinta segundos y detecta los problemas de tamaño al instante.
El atributo frameborder="0" del iframe elimina el borde predeterminado del navegador. Si aún aparece espacio alrededor de la incrustación, el problema suele ser un margen o relleno definido en el contenedor principal, en el CSS de tu página. Usa las herramientas de desarrollo para identificar el elemento y define margin: 0; padding: 0; directamente en él.
Incrustar el flipbook es el último paso, pero la plataforma te da un control considerable sobre lo que ocurre dentro del visor una vez que está publicado en tu sitio.
| Función | Plan Free | Plan Standard | Plan Professional |
|---|---|---|---|
| Flipbooks al mes | Limitados | Ilimitados | Ilimitados |
| Marca de agua en el visor | Sí | No | No |
| Personalización de marca | No | Sí | Sí |
| Protección con contraseña | No | Sí | Sí |
| Incrustar en el sitio web | Sí | Sí | Sí |
| Analíticas | No | Básicas | Completas |
| Formularios de contacto | No | No | Sí |
| Descargas sin conexión | No | No | Sí |
| Video y audio dentro del flipbook | No | Sí | Sí |
| Visor adaptable a dispositivos móviles | Sí | Sí | Sí |
Todos los planes permiten incrustar en tu sitio web. La diferencia está en cómo se ve la experiencia y qué datos recoges de ella. El plan Standard elimina las marcas de agua y añade personalización de marca completa. El plan Professional añade el panel de analíticas y las funciones de formularios de contacto que convierten tu flipbook incrustado, de una pantalla estática, en un activo de conversión medible.
Consulta el desglose completo en flipbooksai.com/pricing para encontrar el plan adecuado.
Incrustar un flipbook es uno de los cambios más rápidos y de mayor impacto que puedes hacer en una página con mucho contenido. La configuración lleva unos minutos, el resultado funciona en todos los dispositivos y plataformas, y la experiencia del visitante es muy superior a la de un enlace a PDF.
Empieza gratis en Flipbooks AI, sube tu primer PDF e incrústalo en tu sitio hoy mismo. Si ya tienes un caso de uso concreto en mente, explora el directorio de herramientas completo para encontrar la plantilla diseñada para tu tipo de contenido. Cuando estés listo para añadir analíticas, formularios de contacto y marca propia, compara los planes y elige el que mejor se ajuste a tus objetivos.
Elige tu idioma
