Marche à suivre pas à pas pour utiliser l’élément Code Embed de Webflow et placer un flipbook sur n’importe quelle page. Vous y trouverez le code iframe, les règles de dimensionnement, les réglages adaptatifs, les erreurs courantes et une comparaison des méthodes d’intégration, pour que votre PDF reste net sur chaque écran.
Vous avez un PDF soigné, un site Webflow qui correspond exactement à ce que vous voulez, et un écart gênant entre les deux. Un lien de téléchargement paraît plat, et une série d’images fixes paraît lourde. La façon la plus propre de combler cet écart est l’élément Code Embed, qui permet d’insérer directement un flipbook à effet de feuilletage dans n’importe quelle page Webflow, avec quelques lignes de HTML. Créez le flipbook avec Flipbooks AI, copiez le code d’intégration, collez-le, puis publiez. C’est toute l’idée. La suite de cet article détaille chaque point pour que rien ne vous surprenne le jour du lancement.
Webflow excelle dans la mise en page, les interactions et le contenu CMS. En revanche, il ne sait pas nativement afficher un document de plusieurs pages comme le lecteur l’attend, avec des tournes de page, un zoom, une table des matières et un bouton de partage. Un flipbook remplit ce rôle.
Un visiteur arrive sur votre page, voit une publication qui ressemble à un livre et la feuillette d’un clic, d’un glissement ou d’une pression sur une flèche. Pas de téléchargement, pas de plugin de visionneuse PDF, et aucune attente pour qu’un fichier de 40 Mo se charge. Pour les catalogues, les lookbooks, les rapports annuels et les cartes de restaurant, le rendu est bien plus proche de l’original imprimé.
Vous gardez le document dans votre propre design. Votre en-tête, votre pied de page et vos scripts d’analyse restent autour de lui. Et comme le flipbook vit à sa propre URL hébergée, vous pouvez mettre à jour le PDF plus tard sans retoucher le Designer Webflow.
💡 Astuce pro : traitez le flipbook comme n’importe quelle autre section de la page. Donnez-lui un titre, un court paragraphe d’introduction et un appel à l’action en dessous. Un flipbook seul, sans contexte, est ignoré plus souvent qu’on ne le pense.
| Cas d’usage | Page typique | Pourquoi un flipbook aide |
|---|---|---|
| Catalogue produits | Page boutique ou ressources | Les visiteurs parcourent sans quitter le site |
| Carte de restaurant | Page carte | Adapté aux appareils mobiles, facile à mettre à jour selon les saisons |
| Portfolio | Page réalisations ou étude de cas | Conserve le rythme visuel de la mise en page d’origine |
| Rapport annuel | Page investisseurs ou à propos | Lisible sur tout appareil, sans téléchargement |
| Lookbook | Page de destination de collection | Donne l’impression de tourner de vraies pages |
L’élément Code Embed est un composant de Webflow qui se trouve dans le panneau Ajouter, sous Composants. Il accepte du HTML, du CSS et du JavaScript bruts, puis affiche le résultat sur la page publiée. Dans le Designer, vous voyez en général un espace réservé ; pour prévisualiser, il faut donc publier ou utiliser le mode aperçu.
Ces deux options sont souvent confondues. L’élément Code Embed occupe un emplacement précis dans votre mise en page. Le code personnalisé, dans les paramètres de la page ou du site, injecte des scripts dans l’en-tête ou avant la balise de fermeture du body, et n’a aucun emplacement visible. Un flipbook est un contenu visible : il vous faut donc l’élément.
Webflow plafonne chaque Code Embed à 50 000 caractères. Un iframe en compte environ 300, donc la limite ne pose jamais problème ici. Elle ne devient pertinente que si vous essayez de coller un document entier intégré en ligne, ce que vous ne devriez pas faire.
Code Embed est disponible sur toutes les offres de sites Webflow, y compris l’offre gratuite Starter pour les tests en préproduction. La publication sur un domaine personnalisé exige une offre de site payante, mais l’intégration fonctionne de la même façon sur le sous-domaine de préproduction, vous pouvez donc tester avant de vous engager.
Avant d’ouvrir Webflow, produisez le flipbook lui-même. Cela prend quelques minutes, et la qualité du fichier source compte plus que n’importe quel réglage d’intégration.
Exportez votre PDF à sa taille finale, avec des images à une résolution raisonnable. Un export à 150 dpi suffit pour les écrans et garde des temps de chargement courts. Vérifiez que les polices sont intégrées et qu’aucune page ne comporte de marge parasite.
✅ Bonne pratique : faites correspondre le fond du flipbook à celui de votre section Webflow. La visionneuse se fond alors dans la page, au lieu de ressembler à une boîte posée dessus.
Bon nombre de convertisseurs impriment un logo dans le coin de chaque page. Flipbooks AI n’ajoute jamais de filigrane, ce qui compte beaucoup lorsque le flipbook se trouve sur le site d’un client ou sur une vitrine de marque. Consultez les offres pour voir comment les flipbooks illimités et la protection par mot de passe s’intègrent à chaque offre.
Voici le processus complet dans Webflow. Gardez le Designer ouvert dans un onglet et le panneau de partage de votre flipbook dans un autre.
Collez votre code d’intégration. Un iframe typique ressemble à ceci :
<iframe
src="https://your-flipbook-url-here"
width="100%"
height="700"
frameborder="0"
allowfullscreen
loading="lazy"
title="Product catalog flipbook">
</iframe>
Remplacez le src par le lien exact copié depuis votre panneau de partage. Cliquez sur Enregistrer et fermer.
Publiez d’abord sur votre domaine de préproduction. Ouvrez la page sur un ordinateur portable, puis sur un téléphone. Parcourez quelques pages, essayez le bouton plein écran et vérifiez que le son se lance si vous avez ajouté de l’audio.
⚠️ Attention : si l’intégration n’affiche rien après la publication, la cause est presque toujours une faute de frappe dans le
srcou un iframe bloqué par un réglage de sécurité du contenu. Consultez la console du navigateur avant de conclure que Webflow est en cause.
Un iframe ne sait pas quelle place reste disponible sur la page. Il faut la lui indiquer, et la lui indiquer différemment à chaque point de rupture.
Une double page de flipbook est plus large que haute ; une hauteur de 600 à 750 pixels convient donc bien sur ordinateur. Au-delà, vous créez beaucoup d’espace vide au-dessus et au-dessous des pages.
Utilisez toujours width="100%" et laissez le conteneur parent décider de la largeur réelle. Fixez une largeur maximale au conteneur, par exemple 1 100 pixels, pour un texte lisible sur les grands écrans.
Pour un flipbook qui se redimensionne proprement, enveloppez l’iframe dans un div qui conserve le ratio :
<div style="position:relative;padding-top:56.25%;">
<iframe
src="https://your-flipbook-url-here"
style="position:absolute;top:0;left:0;width:100%;height:100%;border:0;"
allowfullscreen
title="Flipbook">
</iframe>
</div>
Le padding-top de 56,25 % donne une boîte 16:9 qui rétrécit en douceur sur les tablettes et les téléphones. Pour les documents en portrait, comme les cartes, essayez plutôt 75 % voire 100 %.
| Point de rupture | Largeur du conteneur | Hauteur de l’iframe | Remarques |
|---|---|---|---|
| Ordinateur de bureau (1280 et plus) | 1 100 px max | 700 px | Affiche la double page |
| Tablette (768 à 991) | 90 % | 600 px | La double page reste lisible |
| Mobile en paysage | 100 % | 450 px | La vue une page s’active souvent |
| Mobile en portrait | 100 % | 420 px | Ajoutez une courte légende au-dessus |
💡 Si vous utilisez le wrapper au ratio d’aspect, inutile de prévoir une hauteur distincte pour chaque point de rupture. La boîte s’adapte d’elle-même.
L’approche Code Embed n’est pas la seule façon de placer un document sur une page Webflow. Voici comment elle se situe face aux alternatives courantes.
| Méthode | Effet de feuilletage | Adapté aux mobiles | Modifier sans republier | Statistiques |
|---|---|---|---|---|
| Flipbook via Code Embed | Oui | Oui | Oui | Oui (offre Professional) |
| Lien PDF direct | Non | Selon l’appareil | Oui | Limitées |
| Iframe de visionneuse PDF | Non | Mitigé | Oui | Limitées |
| Images dans un carrousel | Partiel | Oui | Non | Limitées |
| Texte enrichi avec images | Non | Oui | Non | Aucune |
Si le document est une facture d’une page ou une fiche technique que les gens impriment, un simple lien suffit. Ne surcomplexifiez pas.
Tout ce qui dépasse quelques pages, tout contenu visuel et tout ce que vous voulez suivre. Un catalogue de 60 pages dans un carrousel est pénible à construire, et plus pénible encore à maintenir. Un flipbook remplace le PDF par un nouveau, et la page est déjà mise à jour.
Voir le schéma en contexte facilite la planification.
Une petite boutique de mode publie un lookbook de saison. Avec le Créateur de flipbooks de lookbook, le propriétaire importe le nouveau PDF à chaque saison. La page Webflow ne change jamais, car l’intégration pointe toujours vers le même lien de flipbook. La mise à jour prend quelques minutes au lieu d’une séance de design.
Un café publie sa carte dans un flipbook réalisé avec le Créateur de flipbook de carte de restaurant. Les prix changent chaque mois. L’équipe remplace le fichier, et la carte du site est à jour avant le coup de feu du midi.
Un indépendant conçoit des sites clients dans Webflow et utilise le Créateur de flipbooks de rapport pour les synthèses trimestrielles. Chaque client reçoit une page privée avec un flipbook protégé par mot de passe. L’indépendant envoie un lien, pas une pièce jointe.
Avec l’outil Portfolio photo, un photographe publie un livre sélectionné de ses dernières séances. Les grandes images restent nettes, et l’intégration se place sous une courte biographie sur la page À propos.
La plupart des problèmes sont petits et prévisibles. Parcourez cette liste avant de réécrire quoi que ce soit.
src s’ouvre seule dans un nouvel onglet du navigateur.Augmentez la hauteur ou passez au wrapper au ratio d’aspect. Des pages coupées signifient presque toujours que l’iframe est plus courte que ce dont la visionneuse a besoin.
Les navigateurs bloquent la lecture automatique avec son. Les visiteurs doivent d’abord cliquer une fois. Ajoutez une courte ligne comme « Appuyez sur lecture pour écouter l’audio » près de l’intégration.
Ajoutez loading="lazy" à l’iframe pour qu’il ne se charge que lorsque le visiteur approche. Placez le flipbook sous la ligne de flottaison lorsque c’est possible, et gardez le premier écran de la page léger.
| Symptôme | Cause probable | Solution |
|---|---|---|
| Rien ne s’affiche | Faute de frappe dans src | Recopiez le lien depuis le panneau de partage |
| Case grise dans le Designer | Comportement normal | Publiez et consultez en ligne |
| La page défile dans la boîte | Hauteur trop petite | Augmentez la valeur de hauteur |
| Bouton plein écran absent | allowfullscreen supprimé | Rajoutez l’attribut |
| Premier affichage lent | L’intégration se charge immédiatement | Ajoutez loading="lazy" |
Une fois les bases en place, de petites touches donnent à la section un aspect réfléchi.
Rédigez un titre, une ou deux phrases sur le contenu et un bouton pour ceux qui préfèrent télécharger. Les téléchargements hors ligne sont proposés en option, vous pouvez donc offrir les deux possibilités.
Si vous voulez savoir combien de personnes ouvrent le flipbook et quelles pages elles lisent, l’offre Professional comprend les statistiques et la génération de prospects. Comparez les options sur la page des tarifs. Pour aller plus loin sur ce montage précis, consultez l’outil Intégrer un flipbook sur un site.
Les documents sensibles, comme les tarifs réservés aux revendeurs, peuvent être protégés par un mot de passe. La page Webflow reste publique, et le flipbook demande lui-même le mot de passe avant de s’ouvrir.
✅ Liste de contrôle finale :
srccorrect,width="100%", une hauteur adaptée,allowfullscreen,loading="lazy", untitledescriptif, et un test sur un vrai téléphone.
Vous avez maintenant tout le nécessaire : un PDF propre, un flipbook, un iframe et des règles de taille qui tiennent sur tous les points de rupture. Le processus complet prend une quinzaine de minutes la première fois, puis quelques minutes pour chaque mise à jour.
Prêt à en créer un ? Commencer gratuitement sur Flipbooks AI, puis parcourez tous les outils et modèles disponibles pour trouver la mise en page qui convient à votre contenu. Quand vous voulez des statistiques, des mots de passe et des flipbooks illimités, comparez les offres et tarifs et choisissez celle qui convient à votre site.
Choisissez votre langue
