Instrucciones paso a paso para usar el elemento Code Embed de Webflow y colocar un flipbook en cualquier página. Incluye el código iframe, las reglas de tamaño, los ajustes adaptables, los errores comunes y una comparación de métodos de incrustación para que tu PDF se vea nítido en cualquier pantalla.
Tienes un PDF pulido, un sitio en Webflow que se ve exactamente como quieres y una brecha molesta entre ambos. Un enlace de descarga resulta soso, y un montón de imágenes estáticas resulta torpe. La forma más limpia de cerrar esa brecha es el elemento Code Embed, que te permite colocar un flipbook con efecto de paso de página en cualquier página de Webflow con unas pocas líneas de HTML. Crea el flipbook con Flipbooks AI, copia el código para incrustar, pégalo y publica. Esa es la idea completa, y el resto del artículo repasa cada detalle para que nada te sorprenda el día del lanzamiento.
Webflow es excelente en diseño, interacciones y contenido CMS. Lo que no hace de forma nativa es mostrar un documento de varias páginas como espera el lector: con pasos de página, zoom, un índice y un botón para compartir. Un flipbook cumple ese papel.
Un visitante llega a tu página, ve una publicación con aspecto de libro y la hojea con un clic, un deslizamiento o una pulsación de flecha. No hay descarga, ni plugin de visor de PDF, ni esperar a que termine de cargar un archivo de 40 MB. Para catálogos, lookbooks, informes anuales y menús, esto se parece mucho más al original impreso.
Conservas el documento dentro de tu propio diseño. Tu encabezado, tu pie de página y tus scripts de analítica siguen rodeándolo. Y como el flipbook vive en su propia URL alojada, puedes actualizar el PDF más adelante sin volver a tocar el Designer de Webflow.
💡 Consejo profesional: Trata el flipbook como cualquier otra sección de la página. Ponle un título, un párrafo corto de introducción y un llamado a la acción debajo. Una incrustación sin contexto se pasa por alto más a menudo de lo que imaginas.
| Caso de uso | Página típica | Por qué ayuda un flipbook |
|---|---|---|
| Catálogo de productos | Página de tienda o de recursos | Los visitantes navegan sin salir del sitio |
| Menú de restaurante | Página del menú | Se ve bien en dispositivos móviles y es fácil de actualizar por temporada |
| Portafolio | Página de trabajos o de casos de estudio | Conserva el ritmo visual del diseño original |
| Informe anual | Página para inversores o Sobre nosotros | Se lee en cualquier dispositivo, sin necesidad de descargarlo |
| Lookbook | Página de destino de colección | Se parece a pasar páginas reales |
El elemento Code Embed es un componente de Webflow que aparece en el panel Añadir, dentro de Componentes. Acepta HTML, CSS y JavaScript en bruto, y muestra el resultado en la página publicada. Dentro de Designer normalmente ves una portada, así que para previsualizar hay que publicar o usar el modo de vista previa.
Mucha gente confunde estas dos cosas. El elemento Code Embed ocupa un lugar exacto en tu diseño. Código personalizado, en los ajustes de la página o del sitio, inyecta scripts en el head o antes de la etiqueta de cierre del body, y no tiene un lugar visible. Un flipbook es contenido visible, así que lo que necesitas es el elemento.
Webflow limita cada Code Embed a 50 000 caracteres. Un iframe ocupa unos 300 caracteres, así que el límite nunca importa aquí. Solo es relevante si intentas pegar un documento completo en línea, cosa que no deberías hacer.
Code Embed está disponible en todos los planes de sitios de Webflow, incluido el plan Starter gratuito para pruebas. Publicar en un dominio propio requiere un plan de sitio de pago, pero la incrustación funciona igual en el subdominio de pruebas, así que puedes probar antes de comprometerte.
Antes de abrir Webflow, produce el flipbook en sí. Esto toma unos minutos y la calidad del archivo de origen importa más que cualquier ajuste de incrustación.
Exporta tu PDF al tamaño final de página, con imágenes en una resolución razonable. Una exportación de 150 ppp basta para pantallas, y mantiene cortos los tiempos de carga. Revisa que las fuentes estén incrustadas y que ninguna página tenga un margen fuera de lugar.
✅ Buena práctica: Iguala el color de fondo del flipbook con el fondo de tu sección en Webflow. Así el visor se integra en la página en lugar de parecer una caja puesta encima.
Muchos conversores estampan un logotipo en la esquina de cada página. Flipbooks AI nunca añade marca de agua, y eso es muy importante cuando el flipbook está en el sitio de un cliente o en una tienda con marca propia. Consulta los planes para ver cómo los flipbooks ilimitados y la protección con contraseña encajan en cada nivel.
Este es el proceso completo dentro de Webflow. Mantén el Designer abierto en una pestaña y el panel para compartir de tu flipbook en otra.
Pega tu código para incrustar. Un iframe típico se ve así:
<iframe
src="https://your-flipbook-url-here"
width="100%"
height="700"
frameborder="0"
allowfullscreen
loading="lazy"
title="Product catalog flipbook">
</iframe>
Reemplaza el src por el enlace exacto copiado de tu panel para compartir. Haz clic en Save & Close.
Publica primero en tu dominio de pruebas. Abre la página en una laptop y luego en un teléfono. Haz clic en algunas páginas, prueba el botón de pantalla completa y comprueba que suene el audio si lo añadiste.
⚠️ Advertencia: Si la incrustación no muestra nada después de publicar, la causa casi siempre es un error de escritura en el
srco un iframe bloqueado por una configuración de seguridad de contenido. Revisa la consola del navegador antes de suponer que la falla es de Webflow.
Un iframe no sabe cuánto espacio le queda a la página. Tienes que indicárselo, y tienes que hacerlo de forma distinta en cada punto de quiebre.
Una doble página de flipbook es más ancha que alta, así que una altura de 600 a 750 píxeles funciona bien en equipo de escritorio. Si es más alta, creas mucho espacio vacío encima y debajo de las páginas.
Usa siempre width="100%" y deja que el contenedor padre decida el ancho real. Define al contenedor un ancho máximo, por ejemplo 1100 píxeles, para que el texto se lea bien en monitores grandes.
Para un flipbook que escale bien, envuelve el iframe en un div que mantenga la proporción:
<div style="position:relative;padding-top:56.25%;">
<iframe
src="https://your-flipbook-url-here"
style="position:absolute;top:0;left:0;width:100%;height:100%;border:0;"
allowfullscreen
title="Flipbook">
</iframe>
</div>
El padding-top de 56,25 % da una caja 16:9 que se encoge sin problemas en tabletas y teléfonos. Para documentos en vertical, como los menús, prueba con 75 % o incluso 100 %.
| Punto de quiebre | Ancho del contenedor | Altura del iframe | Notas |
|---|---|---|---|
| Equipo de escritorio (1280+) | 1100 px máximo | 700 px | Muestra la doble página |
| Tableta (768 a 991) | 90 % | 600 px | La doble página sigue siendo legible |
| Móvil en horizontal | 100 % | 450 px | Suele activarse la vista de una página |
| Móvil en vertical | 100 % | 420 px | Añade un pie corto encima |
💡 Si usas el contenedor con relación de aspecto, no necesitas una altura distinta para cada punto de quiebre. La caja se escala sola.
La ruta de Code Embed no es la única forma de poner un documento en una página de Webflow. Así se compara con las alternativas habituales.
| Método | Efecto de paso de página | Adaptable a móviles | Editar sin volver a publicar | Analítica |
|---|---|---|---|---|
| Flipbook con Code Embed | Sí | Sí | Sí | Sí (plan Professional) |
| Enlace directo al PDF | No | Depende del dispositivo | Sí | Limitada |
| Iframe de visor de PDF | No | Variable | Sí | Limitada |
| Imágenes en un carrusel | Parcial | Sí | No | Limitada |
| Texto enriquecido con imágenes | No | Sí | No | Ninguna |
Si el documento es una factura de una página o una ficha técnica que la gente imprime, un enlace simple está bien. No compliques de más.
Cualquier cosa con más de unas cuantas páginas, cualquier cosa visual y cualquier cosa que quieras medir. Un catálogo de 60 páginas en un carrusel es difícil de construir y difícil de mantener. Un flipbook reemplaza el PDF por uno nuevo y la página ya está actualizada.
Ver el patrón en contexto facilita planear la configuración.
Una pequeña tienda de moda publica un lookbook de temporada. Con el Creador de flipbooks de lookbook, la dueña sube el PDF nuevo cada temporada. La página de Webflow nunca cambia, porque la incrustación apunta al mismo enlace del flipbook. Actualizar toma minutos y no una sesión de diseño.
Una cafetería mantiene su menú en un flipbook hecho con el Creador de flipbooks de menú de restaurante. Los precios cambian cada mes. El personal reemplaza el archivo, y el menú del sitio queda correcto antes de la hora de mayor afluencia del almuerzo.
Una freelancer construye sitios de clientes en Webflow y usa el Creador de flipbooks de informes para los resúmenes trimestrales. Cada cliente recibe una página privada con un flipbook protegido por contraseña. La freelancer envía un enlace, no un archivo adjunto.
Con la herramienta Portafolio de fotografía, un fotógrafo publica un libro seleccionado con sus sesiones recientes. Las imágenes grandes se mantienen nítidas, y la incrustación va debajo de una biografía corta en la página Sobre nosotros.
La mayoría de los problemas son pequeños y predecibles. Revisa esta lista antes de reescribir nada.
src se abre por sí sola en una pestaña nueva del navegador.Aumenta la altura o cambia al contenedor con relación de aspecto. Las páginas cortadas casi siempre significan que el iframe es más bajo de lo que necesita el visor.
Los navegadores bloquean la reproducción automática con sonido. Los visitantes deben hacer clic una vez primero. Añade una línea corta de texto como "Pulsa play para escuchar el audio" cerca de la incrustación.
Añade loading="lazy" al iframe para que solo cargue cuando el visitante se desplaza cerca de él. Coloca el flipbook debajo del pliegue cuando sea posible, y mantén ligera la primera pantalla de la página.
| Síntoma | Causa probable | Solución |
|---|---|---|
| No se muestra nada | Error de escritura en src | Vuelve a copiar el enlace desde el panel para compartir |
| Caja gris en el Designer | Comportamiento normal | Publica y mira la versión publicada |
| La página se desplaza dentro de la caja | Altura demasiado pequeña | Aumenta el valor de la altura |
| Falta el botón de pantalla completa | Se eliminó allowfullscreen | Vuelve a añadir el atributo |
| Primera pintura lenta | La incrustación carga de inmediato | Añade loading="lazy" |
Cuando lo básico funcione, pequeños detalles hacen que la sección se vea intencionada.
Escribe un título, una o dos frases sobre lo que hay dentro y un botón para quienes prefieran descargar. Las descargas sin conexión están disponibles como opción, así que puedes ofrecer ambos caminos.
Si quieres saber cuántas personas abren el flipbook y qué páginas leen, el plan Professional incluye analítica y generación de contactos. Compara opciones en la página de precios. Para una mirada más profunda a esta configuración exacta, consulta la herramienta Incrustar flipbook en sitio web.
El material sensible, como las listas de precios para revendedores, puede quedar detrás de una contraseña. La página de Webflow sigue siendo pública, y el propio flipbook pide la contraseña antes de abrirse.
✅ Lista de verificación final:
srccorrecto,width="100%", una altura adecuada,allowfullscreen,loading="lazy", untitledescriptivo, y una prueba en un teléfono real.
Ya tienes todo lo necesario: un PDF limpio, un flipbook, un iframe y reglas de tamaño que se sostienen en todos los puntos de quiebre. Todo el proceso toma unos quince minutos la primera vez y un par de minutos por cada actualización posterior.
¿Listo para crear uno? Empieza gratis en Flipbooks AI y luego explora todas las herramientas y plantillas disponibles para encontrar el diseño adecuado para tu contenido. Cuando quieras analítica, contraseñas y flipbooks ilimitados, compara los planes de precios y elige el que encaje con tu sitio.
Elige tu idioma
