Tutoriel, Flipbooks, Site webComment intégrer un flipbook sur votre site web

Par : Robert Soares     |     Jan 31, 2026

Trois façons d’afficher un flipbook sur votre site web

Vous avez créé un flipbook. Vous voulez maintenant l’ajouter à votre site. Trois méthodes sont possibles, et la bonne dépend du niveau de contrôle dont vous avez besoin.

1. Intégration par iFrame — La plus simple. Fonctionne partout.
2. Intégration JavaScript — Adaptative par défaut. Plus de contrôle.
3. Lien direct — Aucun code, juste une URL.

Chacune a ses avantages et ses inconvénients. Le principal piège ? Le mobile. Une intégration parfaite sur votre ordinateur portable peut être complètement cassée sur un téléphone. Nous y reviendrons dans un instant.

D’un point de vue technique, il s’agit d’une intégration web classique : le comportement d’iframe est décrit dans la documentation MDN sur iframe, et l’ergonomie tactile doit respecter les recommandations WCAG sur la taille minimale des cibles.

Méthode 1 : intégration par iFrame (la plus simple)

Une iFrame est une fenêtre ouverte sur une autre page web. Vous collez quelques lignes de code et votre flipbook apparaît.

Récupérez votre code d’intégration

Dans Flipbooker, ouvrez votre flipbook et cliquez sur « Share ». Repérez l’onglet « Embed ». Vous verrez un code de ce type :

<iframe
  src="YOUR_FLIPBOOK_URL"
  width="100%"
  height="600"
  frameborder="0"
  allowfullscreen>
</iframe>

Collez-le dans votre site web

Sur votre site, repérez l’endroit où vous souhaitez afficher le flipbook. Dans la plupart des éditeurs de pages, ajoutez un bloc « HTML » ou « Code personnalisé ». Collez le code. Enregistrez, puis affichez l’aperçu.

Ajustez les dimensions

Par défaut, la largeur est de 100 % (elle remplit le conteneur) et la hauteur de 600 px. Adaptez ces valeurs selon vos besoins :

• Pleine largeur, plus haut : height="800"
• Taille fixe : width="800" height="600"
• Pleine page : width="100%" height="100vh"

Avantages : fonctionne partout. Aucune dépendance. Simple. Inconvénients : les dimensions fixes peuvent être difficiles à gérer sur mobile. Nous y revenons plus bas.

Méthode 2 : intégration JavaScript (adaptative)

L’intégration JavaScript offre davantage de contrôle et un meilleur comportement adaptatif. Si vous avez déjà bataillé avec une iFrame impeccable sur ordinateur mais affreuse sur téléphone, voici la solution.

Récupérez le code JavaScript

Dans l’onglet Share > Embed de Flipbooker, sélectionnez « JavaScript » au lieu de « iFrame ». Vous verrez :

<div id="flipbooker-embed-abc123"></div>
<script src="YOUR_EMBED_SCRIPT_URL"></script>
<script>
  Flipbooker.embed({
    container: '#flipbooker-embed-abc123',
    flipbook: 'abc123',
    responsive: true
  });
</script>

Ajoutez-le à votre page

Collez ce code à l’endroit où vous souhaitez afficher le flipbook. La balise <div> sert de conteneur et les scripts font le reste.

Configurez les options

L’intégration JavaScript prend en charge plusieurs options :

Flipbooker.embed({
  container: '#flipbooker-embed-abc123',
  flipbook: 'abc123',
  responsive: true,
  minHeight: 400,
  maxHeight: 800,
  startPage: 1,
  showToolbar: true
});

Avantages : adaptative par défaut. Plus de contrôle. Meilleur comportement sur mobile. Inconvénients : légèrement plus complexe. JavaScript doit être activé.

Méthode 3 : lien direct

L’intégration n’est pas toujours nécessaire. Vous pouvez simplement envoyer les visiteurs vers la page du flipbook.

Quand un lien direct est plus pertinent

• Campagnes par e-mail (l’intégration ne fonctionne pas dans les e-mails)
• Publications sur les réseaux sociaux
• QR codes sur des supports imprimés
• Toute situation où votre CMS limite le code personnalisé

Récupérez votre lien

Dans Flipbooker, cliquez sur Share et copiez l’URL directe :

YOUR_FLIPBOOK_URL

Utilisez-la dans vos e-mails, vos publications sur les réseaux sociaux ou partout où vous partagez des liens.

Avantages : fonctionne partout. Aucun code nécessaire. Expérience plein écran. Inconvénients : les lecteurs quittent votre site web.

Instructions selon la plateforme

WordPress

Éditeur de blocs (Gutenberg) : ajoutez un bloc « HTML personnalisé », collez votre code d’intégration, affichez l’aperçu et publiez.

Éditeur classique : passez à l’onglet « Texte » (pas « Visuel »), collez le code d’intégration, puis revenez à l’onglet Visuel pour vérifier le rendu.

Elementor : ajoutez un widget HTML, collez le code d’intégration et ajustez la taille du widget.

Squarespace

Ajoutez un bloc « Code » à votre page. Collez le code d’intégration. Pour une pleine largeur, placez-le dans une section pleine largeur.

Conseil pour Squarespace : sa gestion adaptative peut être capricieuse. En pratique, des iFrames qui s’affichent correctement sur ordinateur peuvent encore casser la mise en page de certains modèles mobiles. Testez sur un vrai téléphone avant de publier.

Wix

Ajoutez un élément « Intégrer » ou « iFrame HTML », choisissez « Code » et collez votre intégration. Redimensionnez l’élément pour l’adapter à votre mise en page.

Conseil pour Wix : vous devrez peut-être définir des dimensions précises en pixels plutôt qu’en pourcentages.

Webflow

Ajoutez un élément « Embed », collez le code et appliquez un style adaptatif au conteneur.

Conseil pour Webflow : utilisez l’intégration JavaScript pour mieux contrôler l’affichage adaptatif. Des discussions sur le forum Webflow montrent que les iFrames peuvent repousser le contenu hors de l’écran sur mobile.

Shopify

Modifiez votre page ou votre produit. Dans l’éditeur de contenu, cliquez sur « Afficher le HTML » ou <>. Collez le code d’intégration et enregistrez.

Pour une intégration au thème, modifiez les fichiers du thème et ajoutez le code dans une section.

Le problème du mobile (et comment le résoudre)

Voici ce qui surprend le plus : une iFrame qui s’affiche parfaitement sur votre ordinateur portable peut être complètement cassée sur mobile. Ce n’est pas un bug de votre flipbook. C’est lié au fonctionnement des iFrames.

Comme l’explique l’équipe technique d’Embeddable : « Les navigateurs mobiles ajoutent une difficulté supplémentaire en zoomant dans le cadre et en désactivant le défilement avec inertie. » Résultat ? Vos utilisateurs voient un petit rectangle agrandi à la place du flipbook. Ou deux barres de défilement.

Rendre l’iFrame adaptative

Placez votre iFrame dans un conteneur adaptatif :

<div style="position: relative; padding-bottom: 75%; height: 0; overflow: hidden;">
  <iframe
    src="YOUR_FLIPBOOK_URL"
    style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"
    frameborder="0"
    allowfullscreen>
  </iframe>
</div>

La valeur padding-bottom: 75% crée un format 4:3. Adaptez-la à vos besoins :

• 16:9 → padding-bottom: 56.25%
• 4:3 → padding-bottom: 75%
• Carré → padding-bottom: 100%

Ou utilisez simplement l’intégration JavaScript

Définissez responsive: true et le redimensionnement se fera automatiquement. Aucun conteneur supplémentaire ni calcul de ratio n’est nécessaire.

Flipbooker.embed({
  container: '#flipbooker-embed',
  flipbook: 'abc123',
  responsive: true,
  minHeight: 400
});

Si votre site repose sur WordPress, Squarespace ou toute plateforme sur laquelle vous maîtrisez mal le CSS, c’est le choix le plus sûr.

Problèmes courants et solutions

Le flipbook ne se charge pas

• Vérifiez que l’URL est correcte
• Vérifiez que le flipbook est publié (et non à l’état de brouillon)
• Assurez-vous que votre site web autorise les iFrames

Mauvaise taille ou contenu rogné

• Ajustez les valeurs de largeur et de hauteur
• Utilisez la technique du conteneur adaptatif
• Testez sur de vrais appareils mobiles, pas seulement en redimensionnant le navigateur

Des barres de défilement apparaissent

• Ajoutez frameborder="0" et scrolling="no" à l’iFrame
• Vérifiez que votre conteneur ne limite pas la taille

Le contenu ne se charge pas sur mobile

• Certains navigateurs mobiles limitent les iFrames dans des contextes précis
• Essayez plutôt l’intégration JavaScript
• Prévoyez un lien direct comme solution de secours

L’erreur la plus fréquente ? Intégrer le contenu, vérifier le résultat sur son ordinateur portable et considérer le travail comme terminé. Sortez votre téléphone. Ouvrez la page. Si le flipbook s’affiche mal, vos visiteurs verront la même chose. L’intégration JavaScript gère automatiquement la plupart de ces problèmes, mais même dans ce cas, une vérification de dix secondes sur téléphone vous évite de découvrir trop tard que la moitié de votre audience voit une page cassée.