Incrusta un flipbook con efecto de paso de página en una página de embudo de GoHighLevel mediante un elemento HTML personalizado. Este tutorial explica cómo convertir tu PDF, copiar el código para incrustarlo, ajustar su tamaño para móviles, añadir captación de contactos a su alrededor y solucionar los problemas de visualización más comunes.
La mayoría de las páginas de embudo piden a los visitantes que descarguen un PDF, y la mayoría de los visitantes nunca lo abre. Si quieres saber cómo añadir un flipbook a una página de embudo de GoHighLevel, la respuesta es sorprendentemente corta: convierte el PDF en un flipbook con Flipbooks AI, copia el código para incrustarlo y pégalo en un elemento HTML personalizado dentro del creador de embudos. El visitante se queda en tu página, hojea tu catálogo, lookbook o imán de prospectos como una revista de verdad y ve tu llamada a la acción en todo momento.
Este tutorial recorre toda la configuración, desde preparar el PDF hasta publicar el paso del embudo. También verás dónde encaja un flipbook en un embudo, cómo ajustarlo para dispositivos móviles y cómo solucionar los problemas habituales cuando una incrustación no aparece.
Un enlace a un PDF estático aleja a la gente de la página que te llevó horas construir. Un flipbook la mantiene ahí. El documento se carga dentro de la página, las hojas pasan con un efecto suave y tu formulario, botón o calendario de reservas queda justo al lado.
Cada clic para salir de un paso del embudo es una oportunidad de perder un contacto. Un PDF descargado se abre en otra pestaña o aplicación, y el visitante rara vez vuelve. Un flipbook incrustado se comporta como parte de la propia página, así que el recorrido del embudo se mantiene intacto.
Algunas ofertas convierten mejor cuando la gente puede verlas antes. Un flipbook te permite mostrar las primeras páginas de un ebook, una lista de precios o un portafolio, y luego pedir una dirección de correo electrónico para desbloquear el resto en un segundo paso del embudo.
| Tipo de embudo | Contenido del flipbook | Objetivo |
|---|---|---|
| Embudo de imán de prospectos | Vista previa de un ebook gratuito o de una lista de verificación | Captar correos electrónicos |
| Embudo de producto | Catálogo digital o lista de precios | Impulsar compras |
| Embudo inmobiliario | Folleto de la propiedad | Agendar visitas |
| Embudo de coaching | Resumen del programa o cuaderno de trabajo | Agendar llamadas de descubrimiento |
| Embudo de evento | Programa digital del evento | Registrar asistentes |
💡 Consejo profesional: Los mejores embudos con flipbook muestran primero el valor y piden los datos de contacto después. Coloca el flipbook por encima del formulario, no debajo.
La configuración toma unos diez minutos si tienes esto listo.
Exporta el PDF con un tamaño razonable. Los archivos de menos de 30 MB se convierten rápido y cargan más rápido para los visitantes. Mantén el texto en 10 puntos o más para que se lea bien en un teléfono, y usa dimensiones de página uniformes para que el efecto de paso de página se vea limpio.
Los documentos más cortos convierten mejor dentro de los embudos. Un flipbook de 12 a 24 páginas parece una lectura rápida. Un catálogo de 100 páginas también funciona, pero añade un gancho claro en la primera página para que el visitante sepa dónde mirar.
No necesitas software de diseño. El Conversor de PDF a flipbook hace el trabajo pesado.
Haz que el fondo del flipbook coincida con el fondo de tu página de embudo para que se integre. Usa tu color de marca para la barra de herramientas. Mantén los efectos sencillos, porque los visitantes están ahí por el contenido, no por la animación. Flipbooks AI nunca añade una marca de agua, así que el resultado final se ve como tuyo.
Si el flipbook es un recurso de pago o un bono con registro, activa la protección con contraseña. Para una vista previa pública de un imán de prospectos, déjalo abierto para que la incrustación cargue para todos. Puedes comparar lo que incluye cada plan en la página de precios.
Una vez publicado el flipbook, abre sus opciones para compartir y selecciona Incrustar. Verás un fragmento de iframe con este aspecto:
<iframe src="YOUR-FLIPBOOK-LINK" width="100%" height="650" frameborder="0" allowfullscreen></iframe>
Copia todo el fragmento. La página Incrustar flipbook en un sitio web explica con más detalle las opciones disponibles.
| Método | Ideal para | El visitante se queda en la página |
|---|---|---|
| Código para incrustar (iframe) | Pasos del embudo, páginas de destino | Sí |
| Botón con enlace directo | Correos, SMS, publicaciones en redes | No |
| Ventana emergente con incrustación | Ofertas que se abren con un clic | Sí |
Para los embudos, el código para incrustar gana casi siempre. Usa el enlace directo en tus correos de seguimiento y en los mensajes de texto desde GoHighLevel.
Ahora viene lo principal. Sigue estos pasos dentro del creador de embudos.
Configura la sección en ancho completo o en un ancho de caja amplio para que el libro tenga espacio. Una columna estrecha aprieta las páginas y hace que el texto sea difícil de leer. En equipo de escritorio, una altura de entre 600 y 700 píxeles funciona bien para la mayoría de los documentos.
En los teléfonos, una doble página se vuelve diminuta. La mayoría de los visores de flipbook cambian automáticamente a una vista de una sola página, pero aun así deberías comprobarlo. Configura la altura del iframe en unos 500 píxeles dentro de una sección específica para móviles, o usa un valor mayor en el código principal si solo quieres una versión.
⚠️ Advertencia: No pegues el iframe en un elemento de texto simple. GoHighLevel mostrará el código sin procesar en lugar del flipbook. Usa siempre el elemento Custom JS/HTML.
Un flipbook por sí solo no es un embudo. Acompáñalo de una acción clara y de una razón para llevarla a cabo.
Este orden permite que el visitante pruebe el contenido, se sienta seguro y actúe sin tener que buscar el siguiente paso.
Muestra un flipbook de vista previa en el primer paso con un botón que diga "Obtén la versión completa". Envía al visitante al segundo paso, que contiene un formulario de GoHighLevel. Después de que envíe el formulario, redirígelo a un paso de agradecimiento con el flipbook completo incrustado. La vista previa genera interés, el formulario captura al prospecto y el documento completo lo recompensa.
Mantén tu píxel de Facebook, tu etiqueta de Google y el seguimiento de GoHighLevel en el paso del embudo. Si estás en el plan Professional de Flipbooks AI, también obtienes herramientas de analítica y generación de contactos dentro del propio flipbook, para que veas qué páginas captan la atención.
La misma técnica sirve para muchos negocios. Así la aplican distintos usuarios.
Un agente incrusta un folleto digital de la propiedad en un embudo de inmueble. Los compradores ven fotos, planos y detalles del vecindario, y luego agendan una visita en un calendario que aparece debajo. El Creador de folletos inmobiliarios está pensado para esto.
Una entrenadora convierte un plan de entrenamiento en una vista previa en flipbook y lo usa como imán de prospectos. Los visitantes leen la primera semana de entrenamiento y luego escriben su correo para acceder al programa completo de ocho semanas. Prueba el Publicador de ebooks interactivos para este tipo de oferta.
Una dueña de boutique publica un lookbook de temporada o un catálogo de productos y dirige tráfico de pago a una página de embudo donde los clientes navegan antes de hacer clic para comprar. El Generador de catálogos de productos funciona muy bien aquí.
| Negocio | Documento | Siguiente paso ideal |
|---|---|---|
| Inmobiliaria | Folleto de la propiedad | Agendar una visita |
| Entrenador de fitness | Ebook de entrenamiento | Unirse a la lista de correo |
| Tienda de retail | Catálogo de productos | Visitar la tienda o comprar |
| Consultor | Informe de estudio de caso | Agendar una llamada |
| Restaurante | Menú | Reservar una mesa |
La mayoría de los problemas de incrustación se deben a unas pocas causas.
Comprueba que el flipbook esté publicado y que no esté configurado como privado sin protección con contraseña. Pega el enlace directo en una nueva pestaña del navegador. Si se abre ahí, el problema está en el fragmento de incrustación, así que cópialo de nuevo desde el panel para compartir.
Usaste el elemento equivocado. Elimínalo y añade el elemento Custom JS/HTML en su lugar.
Aumenta la altura del iframe y amplía la sección. Confirma también que la fila no tenga un relleno que reduzca la columna.
Comprime las imágenes grandes del PDF antes de subirlo y elimina las páginas que no uses. Un archivo más ligero se abre más rápido, sobre todo con conexiones de datos móviles.
| Problema | Causa probable | Solución |
|---|---|---|
| Recuadro en blanco | Flipbook no publicado o privado | Publícalo o comparte el enlace correcto |
| Código sin procesar visible | Tipo de elemento incorrecto | Usa Custom JS/HTML |
| Páginas cortadas | Altura demasiado pequeña | Aumenta la altura del iframe |
| Carga lenta | PDF pesado | Comprime las imágenes |
✅ Buena práctica: Prueba siempre la URL del embudo publicado en una ventana de incógnito y en un teléfono real. La vista previa del editor puede ser distinta de la página publicada.
Ya tienes todo lo necesario para poner un flipbook dentro de un embudo: un PDF convertido, un fragmento para incrustar, un elemento HTML personalizado y un diseño que guía al visitante hacia una sola acción.
¿Listo para crear el tuyo? Empieza gratis en Flipbooks AI, convierte tu primer PDF en un minuto y pega el código en tu embudo. Explora la lista completa de herramientas de flipbook para encontrar la plantilla adecuada para tu oferta, y compara los planes de precios si quieres analítica, generación de prospectos y flipbooks ilimitados.
Elige tu idioma
