InicioFuncionesCasos de usoPreciosHerramientas gratuitasBlogFAQContactoDesarrolladores
Código de Incrustación
Técnico e Infraestructura
Un fragmento HTML (generalmente una etiqueta iframe) que muestra un flipbook en cualquier sitio web externo.
Definición
Un código de inserción es un fragmento de HTML — generalmente una etiqueta [iframe](/glossary/iframe) — que se pega en el código fuente de una página web para mostrar contenido externo en línea dentro de esa página. Para la publicación digital, los códigos de inserción cargan un visor de [flipbook](/glossary/flipbook) o documentos directamente en la página anfitriona, de modo que los lectores interactúan con la publicación sin necesidad de navegar fuera. El contenido se sirve desde los servidores de la plataforma de publicación, lo que significa que no se requiere alojamiento de archivos en el sitio de destino. Cuando la publicación de origen se actualiza, cada instancia insertada refleja el cambio automáticamente.
Por Qué Es Importante
Los códigos de inserción conectan tus publicaciones con tu presencia web. Sin ellos, la única forma de compartir un flipbook sería mediante un enlace directo, lo que obliga a los lectores a abandonar tu sitio. La inserción mantiene a los visitantes en tu dominio, mejora las métricas de comportamiento como el tiempo en página y crea una experiencia de lectura fluida. También centraliza la gestión de contenido: actualiza el PDF una vez y cada inserción en cada sitio muestra la última versión. Esto es especialmente valioso para catálogos, listas de precios y menús que cambian frecuentemente.
Cómo Funciona en FlipLink
FlipLink genera un código de inserción listo para usar para cada flipbook o documento publicado. Desde el panel de [compartir y distribuir](/features/sharing-and-distribution), copias el fragmento de [iframe](/glossary/iframe) y lo pegas en cualquier sitio web, blog o CMS que acepte HTML. La inserción es [responsive](/glossary/responsive-embed) por defecto, adaptándose al ancho del contenedor en pantallas de escritorio y móvil. FlipLink también ofrece una opción de [imagen clicable incrustada](/features/clickable-image-embed) que muestra una miniatura estática enlazando al flipbook completo — útil para newsletters por correo electrónico o plataformas que restringen los iframes. Puedes controlar dónde aparece tu contenido usando la [lista blanca de dominios](/glossary/domain-whitelisting), que restringe la inserción solo a los dominios aprobados.
Detalles Técnicos
Un código de inserción consta de algunas partes clave:
- **La etiqueta iframe**: El elemento principal que crea una ventana al contenido externo. Incluye un atributo `src` que apunta a la URL de la publicación, más atributos `width` y `height` para el dimensionamiento.
- **Wrapper responsive**: Un `div` envolvente con dimensionamiento porcentual asegura que el iframe se escale con el diseño de la página. El código de inserción de FlipLink incluye este wrapper por defecto para que no necesites escribir tu propio CSS.
- **Atributos allow**: Los navegadores modernos requieren atributos `allow` explícitos para funciones como pantalla completa. El código de FlipLink los incluye para que todas las funciones interactivas funcionen de inmediato.
- **Contenido de respaldo**: Un enlace de texto dentro de la etiqueta iframe sirve como respaldo para los pocos navegadores o clientes de correo que no soportan iframes.
La inserción se carga de forma asíncrona, lo que significa que no bloquea la renderización de la página anfitriona. El impacto en el rendimiento es mínimo porque el visor del flipbook se inicializa solo cuando el iframe se hace visible en el [viewport](/glossary/viewport).
Preguntas Frecuentes
**¿Qué es un código de inserción?**
Un código de inserción es un fragmento HTML que pegas en tu sitio web para mostrar contenido alojado en otra plataforma. Para flipbooks, típicamente crea un iframe que carga el visor interactivo de la publicación directamente en tu página.
**¿Puedo insertar un flipbook en cualquier sitio web?**
Sí, siempre que el sitio permita HTML personalizado. Esto incluye WordPress, Shopify, Squarespace, Wix (mediante bloques HTML embed) y cualquier sitio personalizado. Algunos clientes de correo no soportan iframes — para esos, usa la opción de imagen clicable incrustada de FlipLink.
**¿El código de inserción se actualiza automáticamente cuando cambio la publicación?**
Sí. Como el código apunta a la URL de la publicación en los servidores de FlipLink, cualquier actualización — reemplazar el PDF, cambiar configuraciones o actualizar botones CTA — se refleja inmediatamente en cada instancia incrustada sin tocar el código en tu sitio.
Lista de Verificación
1. Publica tu flipbook o documento en FlipLink
2. Abre el panel de compartir y copia el código de inserción
3. En el CMS o editor de tu página, añade un bloque HTML personalizado
4. Pega el código de inserción en el bloque HTML
5. Previsualiza la página para confirmar que el flipbook se renderiza correctamente en escritorio y móvil
6. Si deseas restringir dónde puede insertarse el flipbook, configura la [lista blanca de dominios](/glossary/domain-whitelisting) en la configuración de la publicación
7. Prueba las funciones interactivas (volteo de páginas, botones CTA, [captura de leads](/glossary/lead-capture)) en la versión incrustada para verificar que funcionen como se espera
Únete a miles de empresas que usan FlipLink para crear contenido atractivo e interactivo a partir de sus PDFs. Empieza gratis — sin tarjeta de crédito.