WebflowIntégrationFlipbookDesign webAgences

Intégration de flipbook Webflow

Placez un flipbook à tourne de page dans un projet Webflow avec un seul élément HTML Embed. Importez le PDF, copiez l'extrait de code, déposez-le dans une div conteneur et dimensionnez-le à chaque point de rupture comme tout autre élément du projet. Le document se lit sur la page au lieu de se télécharger, et il garde votre échelle typographique et vos couleurs autour de lui. Conçu pour les designers et les agences qui possèdent tout le front-end. Gratuit, sans filigrane, sans abonnement à transmettre au lancement, et sans marque à expliquer à un client.

Brochure numérique de voiture de sport ouverte en flipbook sur sa couverture

Comment intégrer un flipbook dans Webflow

1

Importer et styliser le PDF

Importez le PDF exporté sur Flipbooks AI. Définissez la tourne de page, ajoutez le logo, faites correspondre les couleurs des commandes à la palette du projet, et ajoutez les liens dont les pages ont besoin. L'aperçu montre exactement ce qu'un visiteur lira.

2

Copier l'extrait d'intégration

Ouvrez les options de partage et copiez l'extrait. C'est un court bloc de HTML, bien dans la limite de caractères qu'accepte un élément Embed Webflow, et il n'y a rien à modifier à la main.

3

Le placer et dimensionner le conteneur

Ajoutez un HTML Embed à l'intérieur d'un bloc div, collez l'extrait, et donnez au conteneur une classe avec une largeur maximale et une hauteur. Vérifiez en Preview, ajustez la hauteur sur tablette et mobile, puis publiez.

Comment créer un code d'intégration de flipbook Webflow

Comment créer un code d'intégration de flipbook Webflow

Partez du PDF déjà produit par le design. Importez-le sur Flipbooks AI et un aperçu interactif apparaît immédiatement, pour que vous puissiez lire le document comme le fera un visiteur avant qu'il n'approche du projet. Choisissez le style de tourne de page, ajoutez un logo, définissez les couleurs des commandes depuis votre palette, et ajoutez des liens à l'intérieur des pages. Décidez si le flipbook est public ou protégé par mot de passe. Puis ouvrez les options de partage et copiez l'extrait d'intégration. C'est un court bloc de HTML, bien en dessous de la limite de cinquante mille caractères qu'accepte un élément Embed, et vous n'avez jamais besoin de le modifier à la main.

Qu'est-ce qu'une intégration de flipbook Webflow ?

Une intégration de flipbook Webflow est une visionneuse à tourne de page hébergée, placée dans votre propre mise en page via un élément HTML Embed. Vous importez un PDF sur Flipbooks AI, il héberge la visionneuse et vous remet un court extrait de code. Vous collez cet extrait dans un élément Embed, l'enveloppez dans une div que vous pouvez styliser, et à partir de là le document vit dans vos sections, avec votre navigation au-dessus et votre pied de page en dessous. Les lecteurs se déplacent entre les doubles pages sans quitter la page, et le fichier ne touche jamais vos ressources Webflow, si bien qu'un catalogue de cent pages n'alourdit pas chaque publication du projet.

Qu'est-ce qu'une intégration de flipbook Webflow ?
Qu'est-ce qu'une intégration de flipbook Webflow ?
Qu'est-ce qu'une intégration de flipbook Webflow ?
Qu'est-ce qu'une intégration de flipbook Webflow ?

Où placer l'élément HTML Embed

Dans le Designer, ajoutez un HTML Embed depuis le panneau Add et placez-le à l'intérieur d'un bloc div plutôt que directement dans une section. Collez l'extrait dans l'éditeur de code et enregistrez. Donnez au conteneur une classe pour que la taille vive dans votre feuille de style plutôt que sur l'élément, et placez le conteneur dans un conteneur de contenu normal pour qu'il hérite du remplissage utilisé par le reste de la page. Cette seule habitude fait la différence entre une intégration qui survit à une refonte et une qui doit être repositionnée à chaque changement de la section autour d'elle.

Où placer l'élément HTML Embed

Adopté par des entreprises du Fortune 500

Envelopper l'intégration pour une mise en page propre

Envelopper l'intégration pour une mise en page propre

Donnez au conteneur une classe telle que embed wrapper, définissez la largeur à cent pour cent, ajoutez une largeur maximale qui correspond à votre colonne de contenu, et centrez-le avec des marges automatiques. La hauteur est la seule valeur que la visionneuse ne peut pas décider pour vous, définissez donc une valeur adaptée à la forme de la page : un catalogue paysage veut un cadre large et moins haut, un carnet portrait un cadre plus haut. Gardez les valeurs sur la classe plutôt que sur l'élément, et tout second flipbook du site hérite du même dimensionnement. Ajoutez un peu de remplissage vertical autour du conteneur pour que le livre ne se batte pas avec la section au-dessus.

Pourquoi une intégration l'emporte sur un fichier PDF lié
Pourquoi une intégration l'emporte sur un fichier PDF lié
Pourquoi une intégration l'emporte sur un fichier PDF lié
Pourquoi une intégration l'emporte sur un fichier PDF lié

Pourquoi une intégration l'emporte sur un fichier PDF lié

Importer le PDF dans les ressources Webflow et le lier est rapide, et c'est aussi le moment où le document cesse de faire partie du site. Le navigateur transmet le fichier à une visionneuse avec sa propre interface, la typographie n'est plus la vôtre, la navigation disparaît, et sur iOS une bonne part des lecteurs ne reviennent jamais. Une visionneuse intégrée garde le visiteur dans la mise en page que vous avez construite, garde les liens des pages fonctionnels, et renvoie des données sur jusqu'où les gens sont allés. Quand un client demande ce que la page étude de cas a accompli, un fichier lié ne vous donne rien à dire. L'intégration donne des données de lecture page par page.

Définir la hauteur à chaque point de rupture

La hauteur est ce qui pose le plus de problèmes dans les intégrations, et Webflow facilite la correction car les valeurs héritées se propagent vers le bas. Définissez d'abord la hauteur de base, puis passez à la tablette et réduisez-la, puis au mobile paysage et au mobile portrait. Les unités de fenêtre d'affichage fonctionnent bien ici : une hauteur en vh garde la visionneuse proportionnelle à l'écran plutôt qu'à un chiffre choisi sur un grand écran. Vérifiez chaque point de rupture en Preview plutôt que de vous fier au canevas, et faites attention au plus petit, car c'est là qu'une double page devient illisible et que le mode page unique trouve sa place.

Définir la hauteur à chaque point de rupture

Alternatives à l'intégration de flipbook Webflow

Issuu

Issuu

  • Gratuit et illimité
  • Sans filigrane
  • Intégration en une ligne
  • Visionneuse adaptative
  • Prêt pour mobile
  • Liens cliquables
  • Chargement rapide
  • Protection par mot de passe
  • Mises à jour instantanées
  • Statistiques de lecture
Flipbooks AI

Flipbooks AI

  • Gratuit et illimité
  • Sans filigrane
  • Intégration en une ligne
  • Visionneuse adaptative
  • Prêt pour mobile
  • Liens cliquables
  • Chargement rapide
  • Protection par mot de passe
  • Mises à jour instantanées
  • Statistiques de lecture
Heyzine

Heyzine

  • Gratuit et illimité
  • Sans filigrane
  • Intégration en une ligne
  • Visionneuse adaptative
  • Prêt pour mobile
  • Liens cliquables
  • Chargement rapide
  • Protection par mot de passe
  • Mises à jour instantanées
  • Statistiques de lecture
Publuu

Publuu

  • Gratuit et illimité
  • Sans filigrane
  • Intégration en une ligne
  • Visionneuse adaptative
  • Prêt pour mobile
  • Liens cliquables
  • Chargement rapide
  • Protection par mot de passe
  • Mises à jour instantanées
  • Statistiques de lecture
Pourquoi le canevas du Designer affiche un espace réservé

Pourquoi le canevas du Designer affiche un espace réservé

Webflow n'exécute pas de code personnalisé sur le canevas, un élément Embed affiche donc un espace réservé plutôt que le flipbook pendant que vous concevez. C'est attendu et non un défaut de l'extrait. Utilisez Preview pour le voir rendu, et publiez sur le domaine de préproduction quand vous voulez le tester sur un vrai téléphone. C'est l'habitude qui diffère le plus de l'intégration sur Squarespace ou Wix, où le bloc s'affiche directement dans l'éditeur. Sur Webflow vous concevez le conteneur à l'aveugle et confirmez en Preview, ce qui explique pourquoi définir la taille sur une classe plutôt que sur l'élément fait gagner tant d'allers-retours.

Des fonctionnalités adaptées à un projet Webflow

La visionneuse est adaptative dans le conteneur que vous lui donnez, si bien qu'un conteneur avec une largeur maximale et un ratio d'aspect sensé est généralement tout le CSS dont elle a besoin. Vous pouvez définir le style de tourne de page, ajouter un logo, et faire correspondre les couleurs des commandes aux teintes déjà présentes dans le projet. À l'intérieur des pages, vous pouvez placer des liens cliquables vers une page produit pilotée par le CMS, un formulaire de réservation ou un lien mailto, intégrer un court film, et ajouter un sommaire pour un long document. Rien n'est filigrané et rien n'est plafonné, si bien qu'un guide de marque de quinze pages et un catalogue de deux cents pages se comportent de la même manière.

Des fonctionnalités adaptées à un projet Webflow
Des fonctionnalités adaptées à un projet Webflow
Des fonctionnalités adaptées à un projet Webflow
Des fonctionnalités adaptées à un projet Webflow

Le code personnalisé nécessite une offre de site payante

Ceci vaut la peine d'être su avant de promettre une date. Webflow ne publie du code personnalisé, y compris tout ce qui se trouve dans un élément HTML Embed, que sur les sites avec une offre de site payante. Sur le domaine de préproduction gratuit, l'intégration n'apparaîtra pas du tout, ce qui ressemble exactement à un extrait cassé si vous ne connaissez pas la règle. Rien ne change côté flipbook : le même extrait fonctionne dès que l'offre de site est active. Si un client hésite encore, renvoyez vers le flipbook hébergé depuis un bouton entre-temps et remplacez le bouton par l'intégration une fois l'offre active.

Le code personnalisé nécessite une offre de site payante
Piloter des flipbooks depuis le CMS Webflow

Piloter des flipbooks depuis le CMS Webflow

Pour un site avec de nombreux documents, mettez le lien du flipbook dans un champ texte simple de la collection plutôt que de coder un extrait en dur par page. À l'intérieur d'un élément Embed sur une page de collection ou dans une liste de collection, vous pouvez insérer ce champ dans le code, si bien que chaque élément affiche sa propre visionneuse sans travail de design supplémentaire. Un magazine obtient un modèle de numéro qui couvre chaque ancien numéro. Un site immobilier obtient un modèle de logement qui couvre chaque brochure. Ajouter un document devient une entrée CMS, ce qui est le moment où un client peut vraiment gérer la section lui-même.

Adapté aux studios, agences et indépendants
Adapté aux studios, agences et indépendants
Adapté aux studios, agences et indépendants
Adapté aux studios, agences et indépendants

Adapté aux studios, agences et indépendants

Ceci vise les personnes qui construisent des sites Webflow professionnellement. Un studio de marque intègre le guide de charte au lieu d'envoyer un lien de téléchargement. Une agence intègre une plaquette de compétences sur la page services et rend compte de qui l'a lue. Un promoteur immobilier intègre une brochure de spécifications par logement. Un magazine intègre chaque numéro sur une page modélisée par le CMS. Un site de recrutement intègre le livret des avantages. Le travail est le même à chaque fois : un extrait de code, un conteneur, une classe, et un document qui se comporte comme faisant partie du système de design plutôt qu'une pièce jointe collée à la fin.

Adapter la visionneuse à votre charte graphique

Une intégration qui ignore le système de design est ce qu'un designer remarque en premier. Définissez le fond derrière les pages sur une couleur de votre palette, faites correspondre les couleurs des commandes à vos boutons, ajoutez le logo du client, et choisissez un style de navigation adapté au reste de l'interface. Restez discret sur un site typographique et laissez la couleur porter sur un site plus audacieux. Plusieurs langues sont prises en charge, une marque présente sur deux marchés peut donc intégrer une version localisée sur chaque page de locale et garder la mise en page environnante identique.

Adapter la visionneuse à votre charte graphique

Qui intègre des flipbooks dans Webflow

2456+

Designers web

6

Agences de design

13

Indépendants

24

Studios de marque

65

Équipes marketing

9

Éditeurs

Éléments interactifs à l'intérieur des pages

Éléments interactifs à l'intérieur des pages

Une fois la visionneuse sur la page, le document peut faire des choses que la version imprimée n'a jamais pu faire. Liez une photo de produit à sa fiche CMS, déposez un lien de réservation sur une double page services, mettez un courriel en quatrième de couverture, ou intégrez un court film dans une page. Un sommaire permet à quelqu'un de sauter à la section pour laquelle il est venu, et la recherche aide dans un long catalogue. Ce sont les détails qui décident si un visiteur atteint la dernière page ou part à la troisième, et ils ne coûtent rien à ajouter une fois le fichier importé.

Adaptatif à chaque point de rupture Webflow

Webflow vous donne un point de rupture de base plus tablette, mobile paysage et mobile portrait, ainsi que tout point de rupture large que vous avez ajouté au-dessus. La visionneuse est fluide dans son conteneur, le travail se fait donc sur le conteneur plutôt que sur l'intégration. Définissez une largeur maximale et une hauteur au point de rupture de base, puis vérifiez la tablette et les deux largeurs mobiles et ajustez la hauteur là où une double page commence à se sentir à l'étroit. Sur les petits écrans, basculer le flipbook en mode page unique est généralement préférable à rétrécir une double page. Le pincement pour zoomer fonctionne, glisser fonctionne, et rien ne demande au visiteur d'installer quoi que ce soit.

Adaptatif à chaque point de rupture Webflow
Adaptatif à chaque point de rupture Webflow
Adaptatif à chaque point de rupture Webflow
Adaptatif à chaque point de rupture Webflow

Vitesse de page et visionneuse intégrée

Les projets Webflow portent déjà généralement des polices web, des interactions et beaucoup d'images, si bien que tout élément lourd se voit reprocher toute la page. La visionneuse est hébergée séparément et se charge dans sa propre trame, elle n'ajoute donc pas de mégaoctets à vos ressources Webflow et ne ralentit pas le reste de la page. Les pages sont compressées avec soin, la première double page apparaît vite et le reste s'écoule discrètement derrière. Sur un téléphone avec un signal faible, c'est la différence entre un document lu et un visiteur qui retourne aux résultats de recherche.

Vitesse de page et visionneuse intégrée
Référencement autour d'un document intégré

Référencement autour d'un document intégré

Soyez réaliste sur ce que fait une intégration pour la recherche : la visionneuse est une trame, traitez donc la page qui l'entoure comme ce qui est indexé. Donnez à la page un titre correct, une courte introduction, un résumé de ce que couvre le document, et un ou deux paragraphes de texte réel utilisant les mots que les gens cherchent vraiment. Remplissez le titre de page et la méta description dans les réglages de page plutôt que de laisser les valeurs par défaut. Fait ainsi, une brochure intégrée donne à une page mince un contenu véritable et une raison pour un visiteur de rester, ce qui est la partie que les moteurs de recherche peuvent réellement voir.

Une intégration gratuite que vous pouvez remettre à un client
Une intégration gratuite que vous pouvez remettre à un client
Une intégration gratuite que vous pouvez remettre à un client
Une intégration gratuite que vous pouvez remettre à un client

Une intégration gratuite que vous pouvez remettre à un client

Flipbooks AI est totalement gratuit, et les choses que vous devriez normalement justifier dans une proposition sont incluses : aucun filigrane sur les doubles pages, aucun plafond de pages, aucune limite sur le nombre de visionneuses intégrées sur un site, et aucun coût pour la protection par mot de passe ou les statistiques. Cela compte le plus à la livraison. Un client qui vient de souscrire une offre de site Webflow ne veut pas d'un second abonnement attaché à une seule page de son site, et vous ne voulez pas être la personne qui a choisi l'outil qui se met à réclamer un paiement au septième mois. Construisez-le, remettez-le, et rien n'expire.

S'intègre aux outils de votre chaîne de design

Rien de nouveau n'entre dans le flux de travail. Exportez le PDF depuis Figma, Adobe InDesign, Affinity Publisher, Canva ou Google Slides et importez-le tel quel. Liez depuis l'intérieur des pages vers une page CMS Webflow, une réservation Calendly, un Typeform, un produit Shopify ou une inscription à une lettre d'information. Déposez le même extrait sur un second projet Webflow, un site client sur une autre plateforme, ou une page de destination construite ailleurs. Le flipbook est une page hébergée avec un lien et un extrait de code, il s'intègre donc à n'importe quel flux que le studio utilise déjà.

S'intègre aux outils de votre chaîne de design

Ce que disent les designers de l'intégration Webflow

Nous construisons des sites Webflow pour des marques grand public et le lookbook était toujours un fichier lié que personne ne pouvait mesurer. Un élément Embed dans une classe conteneur a tout réglé. La visionneuse hérite du conteneur, le client change le PDF lui-même, et pour une fois le rapport mensuel a un chiffre dans la section documents.

Équipe marketing
Équipe marketing

Catalogues de produits

L'astuce du CMS est ce qui m'a convaincu. J'ai mis le lien du flipbook dans un champ texte de la collection des numéros et l'ai inséré dans l'Embed du modèle. Douze anciens numéros s'affichent maintenant depuis une seule page, et l'éditeur en ajoute un nouveau sans jamais ouvrir le Designer ni me demander un service.

Propriétaire de studio
Propriétaire de studio

Lookbooks clients

J'ai perdu un après-midi à me demander pourquoi l'intégration était vide sur le domaine de préproduction avant de comprendre que Webflow ne publie pas de code personnalisé sans une offre de site. Une fois l'offre active, elle est apparue instantanément. Bon à savoir avant de faire la démo d'un projet, et cela n'a rien à voir avec l'extrait lui-même.

Secrétariat scolaire
Secrétariat scolaire

Newsletters et programmes

En tant qu'indépendant, remettre quelque chose avec un abonnement mensuel attaché est une conversation que je préfère éviter. Ceci n'a ni offre ni filigrane, le guide de marque siège donc sur la page du studio comme s'il faisait partie du système de design, et le client n'a rien à renouveler dans six mois.

Designer indépendant
Designer indépendant

Flipbooks de portfolio

Flipbooks privés pour la relecture client

Flipbooks privés pour la relecture client

Tout document ne devrait pas être public pendant qu'il est encore en discussion. Publiez-le avec une protection par mot de passe et seules les personnes à qui vous envoyez le mot de passe peuvent l'ouvrir, ce qui est une manière soignée de partager une collection non sortie, un document de présentation ou une liste de prix réservée aux professionnels. Vous pouvez aussi désactiver le téléchargement pour que les pages restent dans la visionneuse plutôt que de circuler comme fichier. Une fois validé, retirez le mot de passe et le même lien devient le lien public, sans réimport ni nouvel extrait.

Partagez le même flipbook en dehors du site

L'intégration est une surface, pas la seule. Chaque flipbook a aussi un lien hébergé simple, si bien que le même document peut aller dans une lettre d'information, une proposition, un message direct ou une bio Instagram sans rien exporter à nouveau. Imprimez un code QR pour un stand d'événement ou un dépliant imprimé et il ouvre le même livre. Placez la visionneuse sur une deuxième page, une page de destination de campagne, ou un site construit ailleurs. Comme il n'y a qu'un seul fichier derrière tout cela, corriger une page corrige toutes les routes qui y mènent en même temps, ce qui est la partie qui fait gagner du temps sur une campagne en cours.

Partagez le même flipbook en dehors du site
Partagez le même flipbook en dehors du site
Partagez le même flipbook en dehors du site
Partagez le même flipbook en dehors du site

Constituer une bibliothèque d'anciens numéros

Chaque flipbook que vous publiez reste en ligne, un site peut donc porter une vraie archive plutôt qu'un dossier de téléchargements. Gardez chaque numéro du magazine, chaque rapport trimestriel, chaque catalogue saisonnier, chacun avec son propre lien, et listez-les depuis une collection CMS pour que la page d'archive se construise elle-même. Les visiteurs parcourent le travail passé, et le studio garde une trace de ce qui a été publié et quand. Relancer une édition populaire signifie dupliquer un flipbook et changer quelques pages plutôt que le reconstruire depuis le fichier original.

Constituer une bibliothèque d'anciens numéros

Comparer les façons de publier un flipbook

ApplicationNoteCrédits illimitésNote d’utilisationDescription
10/10Oui1

Flipbooks AI vous remet un extrait qui se dépose dans un élément HTML Embed, une visionneuse fluide dans votre conteneur, des liens cliquables vers vos pages CMS, une protection par mot de passe et des données de lecture par page, le tout gratuit et illimité. Conçu pour être remis à un client sans abonnement attaché.

FlipHTML5

5.2/10Non2

FlipHTML5 convertit des PDF en flipbooks depuis longtemps et sa bibliothèque d'effets est riche, ce qui convient à ceux qui veulent régler finement la visionneuse elle-même. L'offre gratuite marque vos pages et retient les statistiques, un projet client finit donc généralement sur une offre payante.

Issuu

7.1/10Non3

Issuu est une plateforme de publication avec une visionneuse que la plupart des gens reconnaissent déjà et un public qui lui est propre, ce qui est un vrai atout pour un magazine. L'offre gratuite enveloppe votre document dans la marque Issuu et plafonne les imports, une intégration soignée dans un site conçu implique donc généralement de payer.

Heyzine

8.3/10Non4

Heyzine est rapide et agréable à utiliser, et produit un joli livre à partir d'un PDF avec presque aucune configuration. L'offre gratuite limite le nombre de livres conservés et ajoute sa propre marque, et le contrôle de style dont un système de design a besoin se trouve dans les offres payantes.

Publuu

6.4/10Non5

Publuu est bien construit, avec un liage de points interactifs propre et un suivi utile. Les éléments qui comptent sur un projet client, en particulier des statistiques détaillées et des documents plus longs, font partie d'une offre payante, difficile donc à spécifier sur un projet où personne ne veut de coût récurrent.

Flipsnack

7.8/10Non6

Flipsnack est autant un éditeur qu'un convertisseur, et concevoir des pages à l'intérieur peut convenir à une équipe sans licence InDesign. L'usage gratuit est limité, et retirer la marque tout en ouvrant les statistiques signifie un abonnement mensuel à justifier auprès de qui paie.

Lightbox Webflow

6.9/10Non7

La lightbox native est fiable, légère et déjà dans le projet, ce qui compte beaucoup. Elle affiche des images ou une vidéo dans une superposition plutôt qu'un document, il n'y a donc ni double page, ni tourne de page, ni page cliquable, et rien n'est rapporté sur ce qui a été lu.

PDF.js auto-hébergé

8.1/10Non8

Construire sa propre visionneuse avec PDF.js donne un contrôle total et aucun tiers dans la chaîne, ce que certaines équipes exigent. Cela signifie aussi héberger le fichier, écrire l'interface de la visionneuse, la maintenir, et construire toute statistique soi-même, ce qui est un projet plutôt qu'un après-midi.

Aperçu Google Drive

6.5/10Non9

Un aperçu Drive est gratuit, instantané et ne demande aucune configuration de compte de votre côté. La trame porte l'interface Google autour de vos pages, la typographie n'est pas la vôtre, et déposer un visiteur dans un produit sans rapport défait le soin apporté au reste de la page.

Lien direct vers le fichier PDF

7.6/10Non10

Lier directement le fichier depuis Webflow est l'option la plus rapide et ne coûte rien. Cela renvoie aussi le visiteur vers une visionneuse du navigateur, ajoute le poids du fichier à votre projet, s'affiche différemment sur chaque appareil, et ne rapporte rien sur le fait que quelqu'un ait lu au-delà de la couverture.

Mises à jour client sans designer

Mises à jour client sans designer

Le meilleur résultat pour les deux parties est un client qui peut corriger son propre document. Une fois l'élément Embed en place, l'extrait ne change plus jamais. Il importe un PDF révisé, publie le flipbook, et la page affiche la nouvelle version sans que personne n'ouvre le Designer. Un prix corrigé, un article discontinué, une nouvelle adresse en quatrième de couverture : rien de tout cela ne devient un ticket. Pour un studio en contrat de suivi, cela retire une catégorie de petits travaux qui ne valaient jamais la peine d'être facturés et méritaient toujours d'être faits vite.

Des données de lecture à mettre dans un rapport
Des données de lecture à mettre dans un rapport
Des données de lecture à mettre dans un rapport
Des données de lecture à mettre dans un rapport

Des données de lecture à mettre dans un rapport

Un PDF hébergé vous dit qu'un fichier a été demandé et rien de plus. Flipbooks AI montre les ouvertures, le temps passé par page, et la page où les lecteurs arrêtent de tourner. Cela transforme une décision de design en argument défendable : les études de cas doivent passer avant la page équipe, la liste de prix perd des gens page trois, la dernière double page est l'endroit où placer le lien d'appel à l'action. Pour une agence qui rédige un rapport mensuel, c'est une section qui reposait auparavant sur des suppositions. Pour un indépendant, c'est la preuve que la page facturée fait quelque chose.

Une intégration qui survit à une refonte de site

Les documents survivent aux mises en page. Quand le site est repensé dans deux ans, le lien et l'extrait du flipbook restent valides, la visionneuse passe donc au nouveau modèle par un copier-coller plutôt qu'une migration. La visionneuse elle-même est construite sur les normes web actuelles et maintenue à mesure que les navigateurs évoluent, rien ne se dégrade donc en cette case grise que les vieilles visionneuses ont laissée sur tant de sites. Tout est hébergé, il n'y a donc aucune dépendance à mettre à jour dans le projet et rien dans le projet Webflow qui puisse discrètement cesser de fonctionner.

Une intégration qui survit à une refonte de site

Questions fréquentes
Intégration de flipbook Webflow

Qu'est-ce qu'une intégration de flipbook Webflow ?

C'est une visionneuse à tourne de page hébergée, placée dans votre mise en page Webflow avec un élément HTML Embed. Flipbooks AI héberge le document gratuitement, si bien que les visiteurs lisent un catalogue ou une brochure dans votre propre page au lieu de télécharger un fichier depuis vos ressources.

Pourquoi le flipbook ne s'affiche-t-il pas dans le Designer ?

Webflow n'exécute pas de code personnalisé sur le canevas, un élément Embed affiche donc un espace réservé pendant la conception. Utilisez Preview pour le voir rendu, et publiez sur la préproduction pour le tester sur un vrai appareil. L'extrait est correct, le canevas ne fait simplement pas de l'exécuter.

Faut-il une offre de site Webflow payante pour le publier ?

Oui, pour l'intégration. Webflow ne publie du code personnalisé que sur les sites avec une offre de site payante, si bien que sur un domaine de préproduction gratuit la visionneuse n'apparaîtra pas. Tant que l'offre n'est pas active, renvoyez vers le flipbook hébergé depuis un bouton et remplacez-le ensuite.

Flipbooks AI est-il vraiment gratuit pour un travail client ?

Oui. C'est entièrement gratuit, sans filigrane, sans limite de pages, et sans plafond sur le nombre de visionneuses intégrées. La personnalisation, la protection par mot de passe, le partage et les statistiques sont tous inclus, rien de nouveau n'apparaît donc sur la facture client à la livraison.

Puis-je piloter des flipbooks depuis le CMS Webflow ?

Oui. Stockez le lien du flipbook dans un champ texte simple de la collection et insérez ce champ dans l'élément Embed sur la page de collection. Chaque élément affiche alors sa propre visionneuse, ajouter un nouveau numéro ou une nouvelle brochure devient donc une entrée CMS plutôt qu'un travail de design.

Comment définir la hauteur à chaque point de rupture ?

Placez la taille sur la classe du conteneur, pas sur l'élément. Définissez une hauteur de base, puis réduisez-la sur la tablette et les deux points de rupture mobiles. Les unités de fenêtre d'affichage gardent la visionneuse proportionnelle à l'écran, et le mode page unique se lit mieux qu'une double page rétrécie sur un téléphone.

Le client peut-il mettre à jour le PDF sans designer ?

Oui. L'extrait ne change jamais. Il importe un PDF révisé, publie le flipbook, et la visionneuse intégrée affiche aussitôt la nouvelle version sans que personne n'ouvre le Designer ni ne republie le site Webflow.

Quelles données de lecture reviennent de l'intégration ?

Vous obtenez les ouvertures, le temps passé sur chaque page, et la page où les lecteurs arrêtent de tourner. C'est suffisant pour dire quelle double page perd des gens et où l'appel à l'action doit se trouver, ce qu'un fichier PDF lié n'a jamais rapporté.

D’autres questions ?

Si vous avez encore des questions ou souhaitez en savoir plus sur nos fonctionnalités, nos limites et notre utilisation, consultez notre page FAQ complète.