Démarrage rapide du widget d'intégration

Ajoutez des publications flipbook interactives à n'importe quel site web avec une seule balise script. Couvre l'intégration de base, les attributs de données et le dépannage des problèmes courants.

On this page

Démarrage rapide du widget d'intégration

Le widget d'intégration ZenFlip vous permet d'ajouter des publications flipbook interactives à n'importe quel site web avec un minimum de code. Le widget crée une iframe responsive qui charge le lecteur ZenFlip avec votre publication.

Méthode 1 : balise Script (la plus simple)

Ajoutez une seule balise script là où vous souhaitez que le flipbook apparaisse. Le widget affiche la publication directement après l'élément script.

`html <script src="https://app.zenflip.io/embed.js" data-pub="your-publication-slug" data-width="100%" data-height="600"> </script> `

C'est tout ce dont vous avez besoin. Le widget d'intégration s'initialise automatiquement au chargement de la page et insère une iframe contenant votre publication.

Méthode 2 : conteneur Div

Pour plus de contrôle sur le placement, utilisez un élément div avec la classe zenflip-embed et incluez le script d'intégration séparément. C'est l'approche recommandée lorsque vous avez plusieurs publications sur une même page.

`html <div class="zenflip-embed" data-pub="your-publication-slug" data-width="100%" data-height="600"> </div>

<!-- Incluez le script une seule fois, n'importe où sur la page --> <script src="https://app.zenflip.io/embed.js"></script> `

Le script parcourt la page à la recherche de tous les éléments avec la classe zenflip-embed et initialise chacun d'entre eux.

Attributs de données

Configurez l'intégration à l'aide d'attributs de données HTML :

Attribut

Par défaut

Description

data-pub

Requis

Slug de la publication (depuis l'URL de la publication)

data-width

100%

Largeur de l'intégration (valeur CSS : 100%, 800px, 50vw)

data-height

600

Hauteur de l'intégration (nombre en pixels ou valeur CSS)

data-auto-flip

false

Défilement automatique des pages à intervalle régulier

data-start-page

1

Numéro de page à ouvrir au chargement initial

data-base-url

Auto

Remplacer l'URL de base du lecteur (avancé)

Les valeurs numériques de hauteur sont traitées comme des pixels. Vous pouvez également utiliser des unités CSS comme 80vh ou 500px.

Exemples courants

Intégration dans un article de blog

Une intégration compacte adaptée au contenu d'un article :

`html <div class="zenflip-embed" data-pub="quarterly-report-q1-2026" data-width="100%" data-height="500"> </div> `

Intégration pleine page

Remplissez l'ensemble de la fenêtre du navigateur avec le flipbook :

`html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Product Catalog</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; } body { width: 100vw; height: 100vh; overflow: hidden; } .zenflip-embed { width: 100%; height: 100vh; } </style> </head> <body> <div class="zenflip-embed" data-pub="product-catalog-2026" data-width="100%" data-height="100vh"> </div> <script src="https://app.zenflip.io/embed.js"></script> </body> </html> `

Intégration responsive

Créez une intégration responsive qui s'adapte à la largeur du conteneur :

`html <div style="max-width: 960px; margin: 0 auto;"> <div class="zenflip-embed" data-pub="company-brochure" data-width="100%" data-height="700"> </div> </div> <script src="https://app.zenflip.io/embed.js"></script> `

Le widget d'intégration définit toujours max-width: 100% sur son conteneur, de sorte qu'il s'adapte naturellement à tout conteneur sans débordement horizontal.

Présentation en défilement automatique

Démarrez sur une page spécifique avec le défilement automatique activé (utile pour les bornes interactives ou les présentations) :

`html <script src="https://app.zenflip.io/embed.js" data-pub="investor-deck" data-width="100%" data-height="700" data-auto-flip="true" data-start-page="1"> </script> `

Plusieurs publications sur une page

Utilisez la méthode div pour intégrer plus d'une publication :

`html <h2>Product Catalog</h2> <div class="zenflip-embed" data-pub="product-catalog-2026" data-width="100%" data-height="500"> </div>

<h2>Annual Report</h2> <div class="zenflip-embed" data-pub="annual-report-2025" data-width="100%" data-height="500"> </div>

<!-- Chargez le script une seule fois après tous les conteneurs --> <script src="https://app.zenflip.io/embed.js"></script> `

Trouver le slug de votre publication

Le slug de la publication est l'identifiant adapté aux URL visible dans l'URL de la publication. Vous pouvez le trouver à deux endroits :

  1. Tableau de bord : Ouvrez la publication et regardez l'URL dans votre navigateur : https://app.zenflip.io/publications/your-slug-here

  2. API : Le champ slug dans l'objet publication renvoyé par GET /publications

Dépannage

L'intégration n'apparaît pas

  • Vérifiez que l'attribut data-pub correspond au slug d'une publication existante et publiée.

  • Vérifiez la console du navigateur pour les erreurs. Un slug manquant produit l'avertissement : [ZenFlip] Missing data-pub attribute. Skipping embed.

  • Confirmez que le statut de la publication est published (les publications en brouillon ne sont pas accessibles via le lecteur public).

Erreurs CORS dans la console

Si vous voyez des erreurs Cross-Origin Resource Sharing (CORS), le problème vient généralement de vos en-têtes Content Security Policy (CSP). Ajoutez le domaine ZenFlip à votre directive CSP frame-src :

` Content-Security-Policy: frame-src 'self' https://app.zenflip.io; `

Content Security Policy (CSP) bloquant le script

Si votre site utilise des en-têtes CSP stricts, vous devez autoriser le script d'intégration :

` Content-Security-Policy: script-src 'self' https://app.zenflip.io; frame-src 'self' https://app.zenflip.io; `

L'intégration apparaît mais les pages ne se chargent pas

  • La publication est peut-être encore en cours de conversion. La conversion PDF s'exécute de manière asynchrone après le téléchargement et peut prendre de quelques secondes à quelques minutes selon le nombre de pages.

  • Si la publication utilise un accès private ou est protégée par mot de passe, l'endpoint du lecteur public ne renverra pas les données de page. Définissez la visibilité sur public pour les intégrations.

La hauteur de l'intégration ne correspond pas au contenu

Le widget d'intégration utilise une hauteur fixe basée sur l'attribut data-height. Si les pages semblent coupées, augmentez la valeur de la hauteur. Pour une approche plus dynamique, utilisez des unités viewport CSS comme 80vh pour rendre la hauteur relative à la fenêtre du navigateur.

Prochaines étapes

  • [Options d'intégration avancées](/docs/embed-advanced) --- API programmatique, intégration SPA, gestion des événements et style personnalisé.

  • [API Publications](/docs/publications-api) --- Gérez les publications et contrôlez la visibilité de manière programmatique.

← Previous
Options d'intégration avancées