Inicio rápido del widget de incrustación

Añade publicaciones de flipbooks interactivos a cualquier sitio web con una sola etiqueta de script. Cubre incrustación básica, atributos de datos y solución de problemas comunes.

On this page

Inicio rápido del widget de incrustación

El widget de incrustación de ZenFlip te permite añadir publicaciones de flipbooks interactivos a cualquier sitio web con código mínimo. El widget crea un iframe responsivo que carga el visor de ZenFlip con tu publicación.

Método 1: Etiqueta de script (el más simple)

Añade una sola etiqueta de script donde quieras que aparezca el flipbook. El widget renderiza la publicación directamente después del elemento script.

Eso es todo lo que necesitas. El widget de incrustación se inicializa automáticamente cuando la página carga e inserta un iframe que contiene tu publicación.

Método 2: Contenedor div

Para más control sobre la ubicación, usa un elemento div con la clase zenflip-embed e incluye el script de incrustación por separado. Este es el enfoque recomendado cuando tienes múltiples publicaciones en una página.

El script escanea la página en busca de todos los elementos con la clase zenflip-embed e inicializa cada uno.

Atributos de datos

Configura la incrustación usando atributos de datos HTML:

Atributo

Predeterminado

Descripción

data-pub

Requerido

Slug de la publicación (de la URL de la publicación)

data-width

100%

Ancho de la incrustación (valor CSS: 100%, 800px, 50vw)

data-height

600

Alto de la incrustación (número en píxeles o valor CSS)

data-auto-flip

false

Pasar páginas automáticamente a un intervalo temporizado

data-start-page

1

Número de página para abrir en la carga inicial

data-base-url

Auto

Sobreescribir la URL base del visor (avanzado)

Los valores numéricos de alto se tratan como píxeles. También puedes usar unidades CSS como 80vh o 500px.

Ejemplos comunes

Incrustación en entrada de blog

Una incrustación compacta adecuada para dentro del contenido de un artículo:

Incrustación a página completa

Llena todo el viewport con el flipbook:

Incrustación responsiva

Crea una incrustación responsiva que se adapta al ancho del contenedor:

El widget de incrustación siempre establece max-width: 100% en su contenedor, por lo que se ajusta naturalmente dentro de cualquier contenedor sin desbordamiento horizontal.

Presentación con paso automático

Empieza en una página específica con el paso automático habilitado (útil para pantallas de kiosco o presentaciones):

Múltiples publicaciones en una página

Usa el método div cuando incrustes más de una publicación:

Encontrar el slug de tu publicación

El slug de la publicación es el identificador compatible con URL visible en la URL de la publicación. Puedes encontrarlo en dos lugares:

  1. Panel de control: Abre la publicación y mira la URL en tu navegador: https://app.zenflip.io/publications/tu-slug-aqui

  2. API: El campo slug en el objeto de publicación devuelto por GET /publications

Solución de problemas

La incrustación no aparece

  • Verifica que el atributo data-pub coincide con un slug de publicación existente y publicada.

  • Revisa la consola del navegador en busca de errores. Un slug faltante produce la advertencia: [ZenFlip] Missing data-pub attribute. Skipping embed.

  • Confirma que el estado de la publicación es published (las publicaciones en borrador no son accesibles a través del visor público).

Errores CORS en la consola

Si ves errores de Cross-Origin Resource Sharing (CORS), el problema suele estar en las cabeceras de tu Content Security Policy (CSP). Añade el dominio de ZenFlip a la directiva frame-src de tu CSP:

Content Security Policy (CSP) bloqueando el script

Si tu sitio usa cabeceras CSP estrictas, necesitas permitir el script de incrustación:

La incrustación aparece pero las páginas no cargan

  • La publicación puede estar aún en conversión. La conversión de PDF se ejecuta de forma asíncrona después de la subida y puede tardar unos segundos a unos minutos dependiendo del número de páginas.

  • Si la publicación usa acceso private o está protegida con contraseña, el endpoint del visor público no devolverá datos de página. Establece la visibilidad a public para incrustaciones.

El alto de la incrustación no coincide con el contenido

El widget de incrustación usa un alto fijo basado en el atributo data-height. Si las páginas aparecen cortadas, aumenta el valor del alto. Para un enfoque más dinámico, usa unidades de viewport CSS como 80vh para hacer el alto relativo a la ventana del navegador.

Próximos pasos

Next →
Opciones avanzadas de incrustación