Comment intégrer un flipbook sur votre site web
Étape par étape pour WordPress, Webflow, Squarespace, Wix et les sites HTML personnalisés.
Comment intégrer un flipbook sur votre site web
L'un des moyens les plus efficaces d'utiliser un flipbook est de l'intégrer directement sur votre site web. Plutôt que d'envoyer les lecteurs vers un lien séparé, vous pouvez placer une publication interactive directement dans vos pages existantes — sur une page d'atterrissage, un article de blog, une bibliothèque de ressources ou une page produit.
Ce guide explique comment obtenir votre code d'intégration ZenFlip et comment l'utiliser sur les plateformes de sites web les plus populaires.
Obtenir votre code d'intégration
Chaque publication ZenFlip dispose d'un code d'intégration que vous pouvez copier depuis votre tableau de bord :
Allez sur votre tableau de bord ZenFlip
Cliquez sur la publication que vous souhaitez intégrer
Cliquez sur le bouton « Partager »
Sélectionnez l'onglet « Intégrer »
Copiez le code iframe
Le code d'intégration ressemble à ceci :
`html <iframe src="https://zenflip.io/embed/your-publication-id" width="100%" height="600" frameborder="0" allowfullscreen></iframe> `
Vous pouvez ajuster les valeurs de largeur et de hauteur pour s'adapter à la mise en page de votre page. La visionneuse de flipbook est responsive et s'adaptera au conteneur que vous lui donnez.
Intégration sur WordPress
Utilisation de l'éditeur de blocs (Gutenberg)
Ouvrez la page ou l'article où vous souhaitez le flipbook
Cliquez sur le bouton « + » pour ajouter un nouveau bloc
Recherchez « HTML personnalisé » et sélectionnez-le
Collez votre code d'intégration ZenFlip dans le bloc HTML
Cliquez sur « Aperçu » pour voir le résultat
Publiez ou mettez à jour votre page
Utilisation de l'éditeur classique
Ouvrez votre page ou article
Passez à l'onglet « Texte » (pas « Visuel »)
Collez votre code d'intégration là où vous souhaitez que le flipbook apparaisse
Repassez en « Visuel » pour prévisualiser
Publiez ou mettez à jour
Conseils WordPress
Si votre thème a une zone de contenu étroite, définissez la largeur de l'iframe à « 100% » pour qu'il remplisse l'espace disponible
Pour un flipbook en pleine largeur, envisagez d'utiliser un constructeur de pages comme Elementor ou un modèle de page en pleine largeur
Certains plugins de sécurité peuvent supprimer les balises iframe. Si votre intégration disparaît après l'enregistrement, vérifiez les paramètres de votre plugin de sécurité
Intégration sur Webflow
Ouvrez votre projet Webflow dans le Designer
Faites glisser un élément « Embed » depuis le panneau Ajouter sur votre page
Collez votre code d'intégration ZenFlip dans le champ de code
Fermez l'éditeur d'intégration
Ajustez la taille de l'élément d'intégration à l'aide du panneau Style
Publiez votre site
Webflow vous donne un contrôle précis sur le dimensionnement. Vous pouvez définir le conteneur d'intégration à une hauteur en pixels spécifique ou utiliser des unités de hauteur de viewport (vh) pour une mise en page plus dynamique.
Intégration sur Squarespace
Ouvrez votre page dans l'éditeur Squarespace
Cliquez sur le bouton « + » à l'endroit où vous souhaitez ajouter le flipbook
Sélectionnez « Code » dans les blocs de contenu
Collez votre code d'intégration ZenFlip
Cliquez sur « Appliquer »
Enregistrez et publiez votre page
Squarespace encapsule les intégrations dans un conteneur. Si le flipbook apparaît trop petit, augmentez la valeur de hauteur dans votre code iframe (essayez 700 ou 800 pixels).
Intégration sur Wix
Ouvrez votre site dans l'éditeur Wix
Cliquez sur « Ajouter » dans le menu de gauche
Sélectionnez « Code intégré » puis « Intégrer HTML »
Un widget de code apparaîtra sur votre page
Cliquez sur « Entrer le code » et collez votre code d'intégration ZenFlip
Cliquez sur « Mettre à jour »
Faites glisser et redimensionnez le widget pour l'adapter à votre mise en page
Publiez votre site
Wix vous oblige à dimensionner manuellement le widget d'intégration sur le canevas. Assurez-vous qu'il est suffisamment grand pour une lecture confortable.
Intégration sur des sites HTML personnalisés
Si vous gérez votre propre HTML, collez le code d'intégration directement dans le code source de votre page :
`html <div style="max-width: 900px; margin: 0 auto;"> <iframe src="https://zenflip.io/embed/your-publication-id" width="100%" height="600" frameborder="0" allowfullscreen title="Your Publication Title" ></iframe> </div> `
Le div englobant centre le flipbook et définit une largeur maximale. Ajustez ces valeurs selon votre design.
Rendre votre intégration responsive
Pour un flipbook qui s'adapte harmonieusement à toutes les tailles d'écran, utilisez la technique d'encapsulation responsive :
`html <div style="position: relative; padding-bottom: 75%; height: 0; overflow: hidden;"> <iframe src="https://zenflip.io/embed/your-publication-id" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;" frameborder="0" allowfullscreen title="Your Publication Title" ></iframe> </div> `
Le padding-bottom: 75% crée un ratio d'aspect 4:3. Pour une publication en paysage, essayez padding-bottom: 56.25% (ratio 16:9). Pour une publication en portrait, essayez padding-bottom: 125%.
Bonnes pratiques pour les flipbooks intégrés
Donnez-lui suffisamment de hauteur. Un flipbook trop petit oblige les lecteurs à plisser les yeux. Sur bureau, 600 pixels est une hauteur minimale raisonnable. Sur les pages d'atterrissage où le flipbook est le contenu principal, envisagez 700-800 pixels ou même la hauteur complète du viewport.
Ajoutez un attribut title. Inclure title="Nom de votre publication" dans la balise iframe améliore l'accessibilité. Les lecteurs d'écran utilisent cet attribut pour décrire le contenu intégré.
Considérez le temps de chargement de la page. Le flipbook se charge de manière asynchrone, il ne ralentira donc pas votre page. Cependant, placer l'intégration sous la ligne de flottaison (plus bas sur la page) signifie qu'il se charge après que votre visiteur ait vu le contenu initial.
Fournissez un lien de secours. Certains réseaux d'entreprise bloquent les iframes. Sous votre intégration, envisagez d'ajouter un lien texte : « Des difficultés d'affichage ? Ouvrir dans un nouvel onglet. »
Testez sur mobile. La visionneuse ZenFlip est responsive et supporte les gestes tactiles, mais vérifiez que la mise en page de votre page ne contraint pas l'intégration à une taille inutilisable sur les téléphones.
Options d'intégration sur les forfaits payants
Sur le forfait Creator et supérieur, vous disposez d'options d'intégration supplémentaires :
Suppression du branding ZenFlip de la visionneuse
Domaine personnalisé - intégrez depuis votre propre domaine (ex. publications.votreentreprise.com)
Protection par mot de passe - exigez un mot de passe avant le chargement du flipbook (forfait Business)
Dépannage
L'intégration affiche un espace vide : Vérifiez que votre publication est définie sur la visibilité « Publique ». Les publications privées ne peuvent pas être intégrées.
L'iframe est supprimé : Certaines plateformes CMS ou plugins de sécurité suppriment les balises iframe. Cherchez une option « HTML » ou « Code » plutôt que de coller dans un éditeur de texte riche.
Le flipbook est trop petit sur mobile : Définissez la largeur de l'iframe à « 100% » et assurez-vous que le conteneur de votre page ne contraint pas la largeur. La technique d'encapsulation responsive ci-dessus est utile.
L'intégration est bloquée par un pare-feu d'entreprise : Fournissez un lien direct vers le flipbook en secours afin que les lecteurs puissent l'ouvrir dans un nouvel onglet.