WebflowIncrustarFlipbookDiseño webAgencias

Flipbook incrustado en Webflow

Pon un flipbook con paso de página en un proyecto de Webflow con un elemento HTML Embed. Sube el PDF, copia el código, colócalo dentro de un div contenedor y dimensiónalo en cada punto de quiebre como cualquier otra pieza del proyecto. El documento se lee en la propia página en lugar de descargarse, y conserva tu escala tipográfica y tus colores alrededor. Pensado para diseñadores y agencias que controlan todo el frontend. Se usa gratis, sin marca de agua, sin ninguna suscripción que entregar en el lanzamiento y sin ninguna marca que explicarle a un cliente.

Folleto digital de auto deportivo abierto como flipbook en su portada

Cómo incrustar un flipbook en Webflow

1

Sube y personaliza el PDF

Sube el PDF exportado a Flipbooks AI. Define el paso de página, añade el logo, ajusta los colores de los controles a la paleta del proyecto, y añade los enlaces que necesiten las páginas. La vista previa muestra exactamente lo que va a leer un visitante.

2

Copia el código para incrustar

Abre las opciones para compartir y copia el código. Es un bloque corto de HTML, muy por debajo del límite de caracteres que acepta un elemento Embed de Webflow, y no hay nada en él que necesites editar a mano.

3

Colócalo y dimensiona el contenedor

Añade un HTML Embed dentro de un Div Block, pega el código, y dale al contenedor una clase con un ancho máximo y una altura. Revísalo en Preview, ajusta la altura en tableta y en teléfono, y luego publica.

Cómo crear el código para incrustar un flipbook en Webflow

Cómo crear el código para incrustar un flipbook en Webflow

Empieza con el PDF que el diseño ya produjo. Súbelo a Flipbooks AI y aparece de inmediato una vista previa interactiva, para que leas el documento como lo hará un visitante antes de que se acerque al proyecto. Elige el estilo de paso de página, añade un logo, ajusta los colores de los controles a tu paleta, y añade enlaces dentro de las páginas. Decide si el flipbook es público o lleva contraseña. Después abre las opciones para compartir y copia el código para incrustar. Es un bloque corto de HTML, muy por debajo del límite de cincuenta mil caracteres que acepta un elemento Embed, y nunca tienes que editarlo a mano.

¿Qué es un flipbook incrustado en Webflow?

Un flipbook incrustado en Webflow es un lector con paso de página alojado que se coloca dentro de tu propio diseño mediante un elemento HTML Embed. Subes un PDF a Flipbooks AI, este aloja el lector y te entrega un código corto. Pegas ese código en un elemento Embed, lo envuelves en un div al que puedes darle estilo, y desde ahí el documento vive dentro de tus secciones, con tu barra de navegación arriba y tu pie de página abajo. Los lectores avanzan por las dobles páginas sin salir de la página, y el archivo nunca toca tus recursos de Webflow, así que un catálogo de cien páginas no queda dentro del proyecto pesando cada publicación.

¿Qué es un flipbook incrustado en Webflow?
¿Qué es un flipbook incrustado en Webflow?
¿Qué es un flipbook incrustado en Webflow?
¿Qué es un flipbook incrustado en Webflow?

Dónde va el elemento HTML Embed

En el Designer, añade un HTML Embed desde el panel Add y colócalo dentro de un Div Block en lugar de soltarlo directo en una sección. Pega el código en el editor y guárdalo. Dale al contenedor una clase para que el tamaño viva en tu hoja de estilos en vez de en el elemento, y coloca el contenedor dentro de un Container de contenido normal para que herede el padding que usa el resto de la página. Ese único hábito es la diferencia entre un elemento incrustado que sobrevive a un rediseño y uno que hay que reposicionar cada vez que cambia la sección a su alrededor.

Dónde va el elemento HTML Embed

Con la confianza de empresas Fortune 500

Envolver el elemento incrustado para un diseño limpio

Envolver el elemento incrustado para un diseño limpio

Dale al contenedor una clase como embed-wrapper, define el ancho al cien por ciento, añade un ancho máximo que combine con tu columna de contenido, y céntralo con márgenes automáticos. La altura es el único valor que el lector no puede decidir por ti, así que define una que le quede bien a la forma de la página: un catálogo horizontal quiere un marco ancho y más bajo, y un folleto vertical uno más alto. Mantén los valores en la clase en lugar de en el elemento, y cualquier segundo flipbook del sitio hereda el mismo tamaño. Añade un poco de padding vertical alrededor del contenedor para que el libro no choque con la sección de arriba.

Por qué un elemento incrustado supera a un PDF enlazado como recurso
Por qué un elemento incrustado supera a un PDF enlazado como recurso
Por qué un elemento incrustado supera a un PDF enlazado como recurso
Por qué un elemento incrustado supera a un PDF enlazado como recurso

Por qué un elemento incrustado supera a un PDF enlazado como recurso

Subir el PDF a los recursos de Webflow y enlazarlo es rápido, y también es el punto donde el documento deja de ser parte del sitio. El navegador entrega el archivo a un visor con su propia interfaz, la tipografía ya no es la tuya, la barra de navegación desaparece, y en iOS buena parte de los lectores nunca vuelve. Un lector incrustado mantiene al visitante dentro del diseño que construiste, conserva activos los enlaces dentro de las páginas y reporta hasta dónde llegó la gente. Cuando un cliente pregunta qué logró la página del caso de estudio, un recurso enlazado no te da nada que responder. El elemento incrustado te da datos de lectura página por página.

Ajustar la altura en cada punto de quiebre

La altura es donde más fallan los elementos incrustados, y Webflow lo hace fácil de corregir porque los valores heredados se transmiten hacia abajo en cascada. Define primero la altura base, luego pasa a tableta y redúcela, y después al teléfono en horizontal y en vertical. Las unidades de viewport funcionan bien aquí: una altura en vh mantiene el lector proporcional a la pantalla en lugar de a un número que elegiste en un monitor grande. Revisa cada punto de quiebre en Preview en lugar de confiar en el lienzo, y presta atención al más pequeño, porque ahí es donde una doble página se vuelve ilegible y el modo de una sola página gana su lugar.

Ajustar la altura en cada punto de quiebre

Alternativas para incrustar flipbooks en Webflow

Issuu

Issuu

  • Gratis y sin límites
  • Sin marcas de agua
  • Una línea para incrustar
  • Lector adaptable
  • Listo para dispositivos móviles
  • Enlaces interactivos
  • Carga rápida
  • Protección con contraseña
  • Actualizaciones instantáneas
  • Estadísticas del lector
Flipbooks AI

Flipbooks AI

  • Gratis y sin límites
  • Sin marcas de agua
  • Una línea para incrustar
  • Lector adaptable
  • Listo para dispositivos móviles
  • Enlaces interactivos
  • Carga rápida
  • Protección con contraseña
  • Actualizaciones instantáneas
  • Estadísticas del lector
Heyzine

Heyzine

  • Gratis y sin límites
  • Sin marcas de agua
  • Una línea para incrustar
  • Lector adaptable
  • Listo para dispositivos móviles
  • Enlaces interactivos
  • Carga rápida
  • Protección con contraseña
  • Actualizaciones instantáneas
  • Estadísticas del lector
Publuu

Publuu

  • Gratis y sin límites
  • Sin marcas de agua
  • Una línea para incrustar
  • Lector adaptable
  • Listo para dispositivos móviles
  • Enlaces interactivos
  • Carga rápida
  • Protección con contraseña
  • Actualizaciones instantáneas
  • Estadísticas del lector
Por qué el lienzo del Designer muestra un marcador de posición

Por qué el lienzo del Designer muestra un marcador de posición

Webflow no ejecuta código personalizado en el lienzo, así que un elemento Embed muestra un marcador de posición en lugar del flipbook mientras diseñas. Eso es normal y no es un error del código. Usa Preview para verlo renderizado, y publica en staging cuando quieras probarlo en un teléfono real. Este es el hábito que más difiere de incrustar en Squarespace o Wix, donde el bloque se ve tal cual dentro del editor. En Webflow diseñas el contenedor a ciegas y lo confirmas en Preview, por eso definir el tamaño en una clase en lugar de en el elemento ahorra tantas idas y vueltas.

Funciones que encajan en un proyecto de Webflow

El lector es adaptable dentro del contenedor que le des, así que un envoltorio con un ancho máximo y una proporción razonable suele ser todo el CSS que necesita. Puedes elegir el estilo de paso de página, añadir un logo y ajustar los colores de los controles a las muestras que ya existen en el proyecto. Dentro de las páginas puedes colocar enlaces interactivos a una página de producto manejada por el CMS, un formulario de reserva o un mailto, incrustar un video corto y añadir un índice para un documento largo. Nada lleva marca de agua y nada tiene límite, así que una guía de marca de quince páginas y un catálogo de doscientas páginas se comportan igual.

Funciones que encajan en un proyecto de Webflow
Funciones que encajan en un proyecto de Webflow
Funciones que encajan en un proyecto de Webflow
Funciones que encajan en un proyecto de Webflow

El código personalizado necesita un plan de sitio de pago

Vale la pena saber esto antes de prometer una fecha. Webflow solo publica código personalizado, incluido lo que va dentro de un elemento HTML Embed, en sitios con un plan de sitio de pago. En el dominio de staging gratuito el elemento incrustado no aparece en absoluto, lo cual se ve exactamente como un código roto si no conoces la regla. Nada cambia en el flipbook: el mismo código funciona en cuanto el plan de sitio está activo. Si un cliente todavía está decidiendo, enlaza al flipbook alojado desde un botón mientras tanto, y cambia el botón por el elemento incrustado una vez que el plan esté activo.

El código personalizado necesita un plan de sitio de pago
Manejar flipbooks desde el CMS de Webflow

Manejar flipbooks desde el CMS de Webflow

Para un sitio con muchos documentos, pon el enlace del flipbook en un campo de texto plano de la colección en lugar de escribir un código fijo por página. Dentro de un elemento Embed en una página de colección o en una Collection List, puedes insertar ese campo en el código, así que cada elemento renderiza su propio lector sin trabajo extra de diseño. Una revista consigue una sola plantilla de número que cubre todas las ediciones anteriores. Un sitio inmobiliario consigue una sola plantilla de unidad que cubre todos los folletos. Añadir un documento se vuelve una entrada del CMS, que es el punto en el que un cliente de verdad puede llevar la sección por su cuenta.

Bueno para estudios, agencias y freelancers
Bueno para estudios, agencias y freelancers
Bueno para estudios, agencias y freelancers
Bueno para estudios, agencias y freelancers

Bueno para estudios, agencias y freelancers

Esto está pensado para la gente que construye sitios de Webflow para vivir de eso. Un estudio de marca incrusta el documento de guías en lugar de entregar un enlace de descarga. Una agencia incrusta un dosier de capacidades en la página de servicios y reporta quién lo leyó. Un sitio de una promotora inmobiliaria incrusta un folleto de especificaciones por unidad. Una revista incrusta cada número en una página con plantilla de CMS. Un sitio de contratación incrusta el manual de beneficios. El trabajo es el mismo en todos los casos: un código, un contenedor, una clase, y un documento que se comporta como parte del sistema de diseño en lugar de un archivo adjunto pegado al final.

Ajustar el lector a tu guía de estilo

Un elemento incrustado que ignora el sistema de diseño es lo primero que nota un diseñador. Define el fondo detrás de las páginas con un color de tu paleta, ajusta los colores de los controles a tus botones, añade el logo del cliente, y elige un estilo de navegación que combine con el resto de la interfaz. Mantenlo sobrio en un sitio tipográfico y deja que el color destaque en uno más atrevido. Se admiten varios idiomas, así que una marca que atiende dos mercados puede incrustar una versión localizada en cada página de idioma y mantener el diseño alrededor idéntico.

Ajustar el lector a tu guía de estilo

Quién incrusta flipbooks en Webflow

2456+

Diseñadores web

6

Agencias de diseño

13

Freelancers

24

Estudios de marca

65

Equipos de marketing

9

Editoriales

Elementos interactivos dentro de las páginas

Elementos interactivos dentro de las páginas

Una vez que el lector está en la página, el documento puede hacer cosas que la versión impresa jamás pudo. Enlaza la foto de un producto a su elemento del CMS, pon un enlace de reserva en una doble página de servicios, coloca un correo en la contraportada, o incrusta un video corto dentro de una página. Un índice deja que alguien salte directo a la sección que buscaba, y la búsqueda ayuda en un catálogo largo. Estos son los detalles que deciden si un visitante llega a la última página o se va en la tercera, y no cuestan nada de añadir una vez que el archivo está subido.

Adaptable en cada punto de quiebre de Webflow

Webflow te da un punto de quiebre base, además de tableta, teléfono en horizontal y teléfono en vertical, y cualquier punto de quiebre ancho que hayas añadido por encima. El lector es fluido dentro de su contenedor, así que el trabajo está en el envoltorio y no en el elemento incrustado. Define un ancho máximo y una altura en el punto de quiebre base, revisa después la tableta y los dos anchos de teléfono, y ajusta la altura donde una doble página empiece a sentirse apretada. En pantallas angostas, cambiar el flipbook al modo de una sola página suele funcionar mejor que reducir una doble página. El pellizco para hacer zoom funciona, deslizar funciona, y nada le pide al visitante que instale algo.

Adaptable en cada punto de quiebre de Webflow
Adaptable en cada punto de quiebre de Webflow
Adaptable en cada punto de quiebre de Webflow
Adaptable en cada punto de quiebre de Webflow

La velocidad de carga y el lector incrustado

Los proyectos de Webflow suelen ya cargar webfonts, interacciones y mucha imaginería, así que cualquier cosa pesada se lleva la culpa de toda la página. El lector está alojado por separado y carga en su propio marco, así que no le suma megabytes a tus recursos de Webflow ni ralentiza el resto de la página. Las páginas se comprimen con cuidado, la primera doble página aparece rápido y el resto se carga detrás. En un teléfono con señal débil, esa diferencia decide si un documento se lee o si el visitante vuelve a los resultados de búsqueda.

La velocidad de carga y el lector incrustado
SEO alrededor de un documento incrustado

SEO alrededor de un documento incrustado

Sé realista sobre lo que un elemento incrustado hace por el buscador: el lector es un marco, así que trata la página que lo rodea como lo que en verdad se indexa. Dale a la página un encabezado adecuado, una introducción corta, un resumen de lo que cubre el documento, y uno o dos párrafos de texto real con las palabras que la gente de verdad busca. Completa el título de página y la meta descripción en la configuración de la página en lugar de dejar los valores por defecto. Hecho así, un folleto incrustado le da contenido genuino a una página delgada y una razón para que un visitante se quede, que es la parte que los buscadores realmente pueden ver.

Un elemento incrustado gratis que puedes entregarle a un cliente
Un elemento incrustado gratis que puedes entregarle a un cliente
Un elemento incrustado gratis que puedes entregarle a un cliente
Un elemento incrustado gratis que puedes entregarle a un cliente

Un elemento incrustado gratis que puedes entregarle a un cliente

Flipbooks AI es completamente gratis, y las cosas que normalmente tendrías que justificar en una propuesta ya están incluidas: sin marca de agua sobre las dobles páginas, sin límite de páginas, sin límite de cuántos lectores incrustas en todo un sitio, y sin costo por la protección con contraseña ni por las estadísticas. Eso importa sobre todo en la entrega. Un cliente que acaba de contratar un plan de sitio de Webflow no quiere una segunda suscripción atada a una sola página de su sitio, y tú no quieres ser quien eligió la herramienta que empieza a molestarlo al séptimo mes. Constrúyelo, entrégalo, y nada caduca.

Encaja con las herramientas de tu stack de diseño

Nada nuevo entra en el flujo de trabajo. Exporta el PDF desde Figma, Adobe InDesign, Affinity Publisher, Canva o Google Slides y súbelo tal cual. Enlaza desde dentro de las páginas a una página del CMS de Webflow, una reserva de Calendly, un Typeform, un producto de Shopify o un registro a un boletín. Pon el mismo código en un segundo proyecto de Webflow, el sitio de un cliente en otra plataforma, o una página de destino construida en otro lugar. El flipbook es una página alojada con un enlace y un código, así que encaja en cualquier flujo de trabajo que el estudio ya tenga en marcha.

Encaja con las herramientas de tu stack de diseño

Qué dicen los diseñadores sobre el elemento incrustado de Webflow

Construimos sitios de Webflow para marcas de consumo, y el lookbook siempre fue un recurso enlazado que nadie podía medir. Un elemento Embed dentro de una clase contenedora lo resolvió. El lector hereda el contenedor, el cliente cambia el PDF por su cuenta, y por primera vez el informe mensual tiene un número en la sección de documentos.

Equipo de marketing
Equipo de marketing

Catálogos de productos

El truco del CMS fue lo que me convenció. Puse el enlace del flipbook en un campo de texto de la colección de números y lo inserté en el Embed de la plantilla. Ahora doce ediciones anteriores se renderizan desde una sola página, y el editor añade una nueva sin abrir jamás el Designer ni pedirme un favor.

Dueño del estudio
Dueño del estudio

Lookbooks de clientes

Una vez perdí una tarde entera preguntándome por qué el elemento incrustado aparecía en blanco en el dominio de staging, hasta que entendí que Webflow no publica código personalizado sin un plan de sitio. En cuanto el plan estuvo activo, apareció al instante. Vale la pena saberlo antes de mostrar un proyecto, y no tiene nada que ver con el código en sí.

Oficina escolar
Oficina escolar

Boletines y programas

Como freelancer, entregar algo con una tarifa mensual atada es una conversación que prefiero evitar. Esto no tiene plan ni marca de agua, así que la guía de marca queda en la página del estudio pareciendo parte del sistema de diseño, y no hay nada que el cliente tenga que renovar en seis meses.

Diseñador independiente
Diseñador independiente

Flipbooks de portafolio

Flipbooks privados para revisión del cliente

Flipbooks privados para revisión del cliente

No todo documento debería ser público mientras todavía se está discutiendo. Publícalo con protección por contraseña, y solo las personas a las que les envíes la contraseña podrán abrirlo, lo cual es una forma ordenada de compartir una colección aún no lanzada, un documento de propuesta o una lista de precios pensada para el gremio. También puedes desactivar la descarga para que las páginas se queden en el lector en lugar de circular como un archivo. Cuando quede aprobado, quita la contraseña y el mismo enlace se vuelve el público, sin volver a subir nada y sin un código nuevo.

Comparte el mismo flipbook fuera del sitio

El elemento incrustado es una vía, no la única. Todo flipbook también tiene un enlace alojado sencillo, así que el mismo documento puede ir en un boletín, una propuesta, un mensaje directo o la biografía de Instagram sin exportar nada de nuevo. Imprime un código QR para un puesto en un evento o un folleto impreso, y abre el mismo libro. Pon el lector en una segunda página, en una página de destino de campaña, o en un sitio que hayas construido en otro lugar completamente distinto. Como hay un solo archivo detrás de todo esto, corregir una página corrige a la vez cada ruta que lleva a ella, lo que ahorra tiempo en una campaña que ya está publicada.

Comparte el mismo flipbook fuera del sitio
Comparte el mismo flipbook fuera del sitio
Comparte el mismo flipbook fuera del sitio
Comparte el mismo flipbook fuera del sitio

Construir una biblioteca de números pasados

Cada flipbook que publicas queda publicado, así que un sitio puede llevar un archivo real en lugar de una carpeta de descargas. Conserva cada número de la revista, cada informe trimestral, cada catálogo de temporada, cada uno con su propio enlace, y lístalos desde una colección del CMS para que la página de archivo se arme sola. Los visitantes recorren el trabajo hacia atrás, y el estudio tiene un registro de qué se publicó y cuándo. Relanzar una edición popular significa duplicar un flipbook y cambiar unas pocas páginas en lugar de reconstruirlo desde el archivo original.

Construir una biblioteca de números pasados

Compara formas de publicar un flipbook

AplicaciónCalificaciónCréditos ilimitadosCalificación de usoDescripción
10/101

Flipbooks AI te da un código que se coloca en un elemento HTML Embed, un lector que es fluido dentro de tu contenedor, enlaces interactivos a tus páginas del CMS, protección con contraseña y datos de lectura por página, todo gratis y sin límites. Está pensado para entregárselo a un cliente sin ninguna suscripción atada.

FlipHTML5

5.2/10No2

FlipHTML5 lleva mucho tiempo convirtiendo PDF en flipbooks y su biblioteca de efectos es amplia, lo cual conviene a quien quiere ajustar el lector en sí. El plan gratuito pone su marca en tus páginas y reserva las estadísticas, así que un proyecto de cliente suele terminar en un plan de pago.

Issuu

7.1/10No3

Issuu es una plataforma de publicación con un lector que la mayoría de la gente ya reconoce y una audiencia propia, lo cual es una ventaja real para una revista. El plan gratuito envuelve tu documento con la marca de Issuu y limita las subidas, así que un elemento incrustado limpio dentro de un sitio diseñado normalmente significa pagar.

Heyzine

8.3/10No4

Heyzine es rápido y agradable de usar, y produce un libro de buen aspecto a partir de un PDF con casi ninguna configuración. El plan gratuito limita cuántos libros conservas y añade su propia marca, y el control de estilo que necesita un sistema de diseño está en los planes de pago.

Publuu

6.4/10No5

Publuu está bien construido, con enlaces de puntos interactivos limpios y seguimiento útil. Las piezas que importan en un proyecto de cliente, sobre todo las estadísticas detalladas y los documentos más largos, son parte de un plan de pago, así que es difícil de especificar en un proyecto donde nadie quiere un costo recurrente.

Flipsnack

7.8/10No6

Flipsnack es un editor capaz tanto como un conversor, y diseñar páginas dentro de él puede convenirle a un equipo sin licencia de InDesign. El uso gratuito es limitado, y quitar la marca y desbloquear las estadísticas significa una tarifa mensual que hay que justificarle a quien la paga.

Lightbox de Webflow

6.9/10No7

El lightbox nativo es confiable, no pesa nada y ya está en el proyecto, lo cual cuenta mucho. Muestra imágenes o video en una superposición en lugar de un documento, así que no hay doble página, ni paso de página, ni página interactiva, y no reporta nada sobre lo que se leyó.

PDF.js autoalojado

8.1/10No8

Construir tu propio visor con PDF.js te da control total y ningún tercero en el stack, algo que algunos equipos exigen. También significa alojar el archivo, escribir la interfaz del visor, mantenerla, y construir tú mismo cualquier estadística, lo cual es un proyecto y no una tarde.

Vista previa de Google Drive

6.5/10No9

Una vista previa de Drive es gratis, instantánea y no necesita ninguna configuración de cuenta de tu parte. El marco lleva la interfaz de Google alrededor de tus páginas, la tipografía no es la tuya, y llevar a un visitante a un producto que no tiene relación deshace el cuidado con el que se construyó el resto de la página.

Enlace directo al recurso PDF

7.6/10No10

Enlazar el recurso directo desde Webflow es la opción más rápida y no cuesta nada. También entrega al visitante a un visor del navegador, le suma el peso del archivo a tu proyecto, se ve distinto en cada dispositivo, y no reporta nada sobre si alguien leyó más allá de la portada.

Actualizaciones del cliente sin un diseñador

Actualizaciones del cliente sin un diseñador

El mejor resultado para ambas partes es un cliente que puede corregir su propio documento. Una vez que el elemento Embed está colocado, el código nunca vuelve a cambiar. Ellos suben un PDF revisado, publican el flipbook, y la página muestra la nueva versión sin que nadie abra el Designer. Un precio corregido, un artículo descontinuado, una dirección nueva en la última página: nada de eso se vuelve un ticket. Para un estudio con un contrato de mantenimiento, eso elimina toda una categoría de trabajos pequeños que nunca valía la pena facturar y siempre valía la pena hacer rápido.

Datos de lectura que puedes poner en un informe
Datos de lectura que puedes poner en un informe
Datos de lectura que puedes poner en un informe
Datos de lectura que puedes poner en un informe

Datos de lectura que puedes poner en un informe

Un PDF alojado te dice que se solicitó un archivo y nada más. Flipbooks AI muestra las aperturas, el tiempo dedicado a cada página y la página donde los lectores dejan de avanzar. Eso convierte una decisión de diseño en un argumento que puedes defender: los casos de estudio deben ir antes de la página del equipo, la lista de precios pierde gente en la página tres, la última doble página es donde debería ir el enlace de contacto. Para una agencia que escribe un informe mensual, es una sección que antes era pura suposición. Para un freelancer, es la prueba de que la página que cobraste está haciendo algo.

Un elemento incrustado que sobrevive a un rediseño del sitio

Los documentos sobreviven a los diseños. Cuando el sitio se rediseñe dentro de dos años, el enlace del flipbook y el código siguen siendo válidos, así que el lector pasa a la plantilla nueva con un copiar y pegar en lugar de una migración. El lector en sí está construido sobre estándares web actuales y se mantiene al día conforme cambian los navegadores, así que nada se degrada hasta convertirse en el recuadro gris que los visores viejos dejaron en tantos sitios. Todo está alojado, así que no hay ninguna dependencia que actualizar dentro del proyecto ni nada en el proyecto de Webflow que pueda dejar de funcionar en silencio.

Un elemento incrustado que sobrevive a un rediseño del sitio

Preguntas frecuentes
Flipbook incrustado en Webflow

¿Qué es un flipbook incrustado en Webflow?

Es un lector alojado con paso de página que se coloca dentro de tu diseño de Webflow con un elemento HTML Embed. Flipbooks AI aloja el documento gratis, así que los visitantes leen un catálogo o folleto dentro de tu propia página en lugar de descargar un archivo de tus recursos.

¿Por qué el flipbook no aparece en el Designer?

Webflow no ejecuta código personalizado en el lienzo, así que un elemento Embed muestra un marcador de posición mientras diseñas. Usa Preview para verlo renderizado, y publica en staging para probarlo en un dispositivo real. El código está bien, el lienzo simplemente no lo ejecuta.

¿Necesito un plan de sitio de pago de Webflow para publicarlo?

Sí, para el elemento incrustado. Webflow solo publica código personalizado en sitios con un plan de sitio de pago, así que en un dominio de staging gratuito el lector no aparecerá. Hasta que el plan esté activo, enlaza al flipbook alojado desde un botón y cámbialo después.

¿Flipbooks AI es realmente gratis para trabajos de cliente?

Sí. Es completamente gratis, sin marcas de agua, sin límite de páginas y sin tope de cuántos lectores incrustas. La personalización, la protección con contraseña, las opciones para compartir y las estadísticas están incluidas, así que no aparece nada nuevo en la factura del cliente en la entrega.

¿Puedo manejar flipbooks desde el CMS de Webflow?

Sí. Guarda el enlace del flipbook en un campo de texto plano de la colección e insértalo en el elemento Embed de la página de colección. Cada elemento renderiza entonces su propio lector, así que añadir un nuevo número o folleto es una entrada del CMS en lugar de un trabajo de diseño.

¿Cómo debería definir la altura en cada punto de quiebre?

Pon el tamaño en la clase del contenedor, no en el elemento. Define una altura base, y redúcela después en tableta y en los dos puntos de quiebre de teléfono. Las unidades de viewport mantienen el lector proporcional a la pantalla, y el modo de una sola página se lee mejor que una doble página reducida en un teléfono.

¿Puede el cliente actualizar el PDF sin un diseñador?

Sí. El código nunca cambia. Ellos suben un PDF revisado, publican el flipbook, y el lector incrustado muestra la nueva versión de inmediato sin que nadie abra el Designer ni vuelva a publicar el sitio de Webflow.

¿Qué datos de lectura devuelve el elemento incrustado?

Obtienes las aperturas, el tiempo dedicado a cada página y la página donde los lectores dejan de avanzar. Es suficiente para decir qué doble página está perdiendo gente y dónde debería ir una llamada a la acción, que es más de lo que un PDF enlazado como recurso jamás reportó.

¿Tienes más preguntas?

Si todavía tienes preguntas o quieres ver más detalles sobre nuestras funciones, límites y uso, te invitamos a visitar nuestra página completa de preguntas frecuentes.