Comment intégrer des flipbooks sur votre site web

Comment intégrer des flipbooks sur votre site web

Partager un lien de flipbook est la méthode de distribution la plus simple, mais intégrer un flipbook directement sur votre site web vous donne plus de contrôle sur l'expérience du lecteur. Un flipbook intégré vit à l'intérieur de votre page, entouré de votre identité visuelle et de votre contenu, créant une expérience fluide pour les visiteurs.

Ce guide couvre toutes les options d'intégration, d'un iframe rapide à une intégration JavaScript avancée.

Option 1 : intégration rapide (iframe)

Le moyen le plus rapide d'intégrer un flipbook est avec un iframe. ZenFlip fournit un code d'intégration prêt à l'emploi pour chaque flipbook publié.

Obtenir votre code d'intégration

1. Ouvrez la publication dans votre tableau de bord ZenFlip

2. Cliquez sur Partager en haut à droite

3. Sélectionnez l'onglet Intégrer

4. Copiez le code d'intégration

Le code ressemble à ceci :

`html <iframe src="https://zenflip.io/view/your-publication-id" width="100%" height="600" frameborder="0" allowfullscreen title="Your Publication Title"

`

Collez-le dans n'importe quelle page HTML, éditeur CMS ou constructeur de site web qui prend en charge le HTML personnalisé.

Le rendre responsive

Une hauteur fixe fonctionne pour les cas d'usage simples, mais une intégration responsive s'adapte à l'écran du lecteur. Encapsulez l'iframe dans un conteneur avec un rapport d'aspect basé sur les pourcentages :

`html <div style="position: relative; width: 100%; padding-bottom: 75%; overflow: hidden;"> <iframe src="https://zenflip.io/view/your-publication-id" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none;" allowfullscreen title="Your Publication Title" ></iframe> </div> `

Le padding-bottom: 75% crée un rapport d'aspect 4:3. Ajustez à 56.25% pour du 16:9, ou 100% pour une intégration carrée.

Option 2 : le widget JavaScript

Pour plus de contrôle, utilisez le widget d'intégration JavaScript ZenFlip. Cette méthode vous donne accès aux options de personnalisation et aux callbacks d'événements.

Configuration de base

Ajoutez le script d'intégration ZenFlip à votre page :

`html <div id="zenflip-embed"></div> <script src="https://zenflip.io/embed.js"></script> <script> ZenFlip.embed({ target: '#zenflip-embed', publication: 'your-publication-id', }); </script> `

Options de configuration

La fonction d'intégration accepte ces options :

Écouter les événements

Le widget JavaScript déclenche des événements que vous pouvez utiliser pour lancer des actions sur votre page :

`javascript ZenFlip.embed({ target: '#zenflip-embed', publication: 'your-publication-id', onPageChange: function(page) { console.log('Reader is on page', page); }, onReady: function() { console.log('Flipbook loaded'); }, }); `

C'est utile pour suivre des événements analytiques personnalisés, afficher du contenu contextuel aux côtés de pages spécifiques ou déclencher des animations lorsque le lecteur atteint un certain point de la publication.

Guides spécifiques par plateforme

WordPress

1. Créez ou modifiez une page dans WordPress

2. Ajoutez un bloc HTML personnalisé

3. Collez votre code d'intégration ZenFlip (iframe ou JavaScript)

4. Prévisualisez et publiez

Si votre thème WordPress restreint les iframes, utilisez la méthode d'intégration JavaScript à la place.

Webflow

1. Faites glisser un élément Embed sur votre page dans le Webflow Designer

2. Collez le code iframe

3. Ajustez la taille de l'élément dans le panneau de mise en page Webflow

4. Publiez votre site

Shopify

1. Allez à la page ou au produit où vous souhaitez le flipbook

2. Passez à la vue éditeur HTML

3. Collez le code d'intégration

4. Enregistrez

Pour les pages produit Shopify, envisagez d'intégrer votre catalogue de produits en flipbook aux côtés de vos photos produit standard. Cela offre aux clients une expérience de navigation plus riche.

React / Next.js

Pour les applications React, utilisez le widget JavaScript dans un hook useEffect :

`jsx import { useEffect, useRef } from 'react';

export default function FlipbookEmbed({ publicationId }) { const containerRef = useRef(null);

useEffect(() => { const script = document.createElement('script'); script.src = 'https://zenflip.io/embed.js'; script.onload = () => { window.ZenFlip.embed({ target: containerRef.current, publication: publicationId, }); }; document.body.appendChild(script); return () => document.body.removeChild(script); }, [publicationId]);

return <div ref={containerRef} style={{ height: 600 }} />; } `

Personnaliser le style de l'intégration

La visionneuse de flipbook hérite de certains styles de son conteneur. Vous pouvez contrôler :

• Coins arrondis : Ajoutez border-radius à l'iframe ou au conteneur pour des coins arrondis

• Ombre portée : Une ombre subtile aide le flipbook à se démarquer de la page environnante

• Largeur maximale : Définissez un max-width sur le conteneur pour empêcher le flipbook de s'étirer trop sur les grands écrans

`html <div style="max-width: 960px; margin: 0 auto; border-radius: 12px; overflow: hidden; box-shadow: 0 4px 24px rgba(0,0,0,0.15);"> <iframe src="https://zenflip.io/view/your-publication-id" width="100%" height="600" style="border: none; display: block;" allowfullscreen title="Your Publication Title" ></iframe> </div> `

Considérations de performance

Les flipbooks intégrés se chargent de manière asynchrone et ne bloquent pas le rendu de votre page. Cependant, gardez ces points en tête :

• Chargement différé : Si le flipbook est sous la ligne de flottaison, ajoutez loading="lazy" à l'iframe pour qu'il ne se charge que lorsque le lecteur fait défiler jusqu'à lui

• Une seule intégration par page : L'intégration de plusieurs flipbooks sur la même page est supportée, mais chacun consomme des ressources. Pour les pages listant plusieurs publications, envisagez de créer des liens vers des pages dédiées

• Bande passante mobile : La visionneuse charge des ressources optimisées en fonction de l'appareil du lecteur. Sur les connexions mobiles, les tailles de fenêtre plus petites reçoivent des images de page en résolution inférieure pour réduire le temps de chargement

Analyses et flipbooks intégrés

Les flipbooks intégrés suivent les analyses de manière identique aux flipbooks consultés directement. Les vues, la profondeur de lecture, l'engagement par page et les captures de leads fonctionnent de la même manière, quelle que soit la façon dont le lecteur accède à la publication. Le domaine référent est enregistré dans vos analyses, vous pouvez donc voir quelles pages de votre site web génèrent le plus d'engagement sur les flipbooks.