Comment ajouter un flipbook à Wix avec l'élément HTML intégré

Vous avez un catalogue, une carte ou une brochure au format PDF, et vous voulez que les visiteurs le feuillettent directement sur votre page Wix, au lieu de télécharger un fichier lourd. Bonne nouvelle : il faut une dizaine de minutes. Créez le flipbook avec Flipbooks AI, copiez son code d'intégration et placez-le dans Wix grâce à l'élément HTML intégré. Ce tutoriel détaille chaque clic, ainsi que les conseils de dimensionnement et de dépannage que la plupart des tutoriels omettent.

Pourquoi utiliser un flipbook sur Wix

Wix gère très bien les textes, les galeries et les boutiques. Les PDF sont en revanche un point faible. Un visiteur qui clique sur un lien PDF quitte votre site, attend un téléchargement et ne revient souvent pas. Un flipbook le garde sur la page, avec des tournes de page réalistes, un zoom et un chargement rapide.

Voici ce que vous gagnez à intégrer plutôt qu'à créer un simple lien :

• Les visiteurs restent sur votre site, ce qui fait travailler vos pages pour vous.
• Les pages se chargent progressivement, donc un catalogue de 60 pages s'ouvre vite sur mobile.
• Vous pouvez mettre le flipbook à jour sans toucher de nouveau à votre page Wix.
• Aucun filigrane, donc votre marque reste bien en vue.

À qui profite le plus cette solution

💡 Astuce pro : Choisissez une seule page et un seul flipbook pour votre première tentative. Une fois la démarche familière, la répéter pour d'autres pages prend deux minutes.

Ce qu'il vous faut avant de commencer

Réunissez d'abord ces éléments pour ne pas vous arrêter en cours de route :

1. Un site Wix avec un accès à l'édition (toute offre qui autorise les intégrations personnalisées).
2. Un PDF finalisé, idéalement de moins de 50 Mo, avec des pages de taille homogène.
3. Un compte gratuit sur Flipbooks AI.
4. Dix minutes et une fenêtre de navigateur ouverte sur les deux outils.

Préparer votre PDF

Un fichier source propre donne un meilleur flipbook. Vérifiez ces points avant l'import :

• Exportez à une résolution raisonnable. 150 DPI suffisent largement pour les écrans.
• Gardez les polices intégrées pour que le texte reste net.
• Utilisez des pages simples plutôt que des doubles pages, sauf si vous voulez une mise en page de livre.
• Compressez d'abord les grosses images. Un fichier plus léger se convertit plus vite.

Créer votre flipbook

Cette étape se fait en dehors de Wix. Vous transformez le PDF en flipbook partageable et récupérez le code d'intégration.

Importer et convertir

1. Connectez-vous sur Flipbooks AI.
2. Choisissez de créer un nouveau flipbook et importez votre PDF. Le Convertisseur PDF vers flipbook le transforme en pages dotées d'effets de feuilletage réalistes.
3. Attendez la fin du traitement. Les fichiers courts sont prêts en quelques secondes, les longs catalogues prennent un peu plus de temps.
4. Prévisualisez le résultat et feuilletez quelques pages pour vérifier que rien ne cloche.

Personnaliser l'apparence

Avant l'intégration, réglez les détails qui le font ressembler à votre marque :

• Identité visuelle et couleurs pour correspondre au thème de votre site Wix.
• Effets de page comme l'animation de tournure et les ombres.
• Contenus multimédias comme des vidéos et de l'audio sur certaines pages.
• Protection par mot de passe si le contenu est privé.

✅ Bonne pratique : Faites correspondre l'arrière-plan du flipbook à celui de votre section Wix. L'intégration se fond alors dans la page au lieu de ressembler à une boîte posée dessus.

Copier le code d'intégration

Ouvrez les options de partage et repérez le code d'intégration. C'est un court extrait, généralement une balise iframe. Copiez l'ensemble, du chevron d'ouverture à la balise de fermeture. L'outil Intégrer le flipbook sur un site web détaille davantage les options.

Ajouter l'élément HTML intégré dans Wix

Passez maintenant à l'éditeur Wix. La formulation diffère légèrement entre l'éditeur Wix classique et Wix Studio, donc les deux parcours sont indiqués.

Étapes dans l'éditeur Wix

1. Ouvrez la page où le flipbook doit apparaître.
2. Cliquez sur Ajouter des éléments (l'icône plus) à gauche.
3. Sélectionnez Code intégré, puis choisissez HTML intégré.
4. Une zone réservée apparaît sur votre page. Cliquez sur Saisir le code.
5. Dans le panneau des réglages, choisissez Code (et non Adresse du site).
6. Collez votre code d'intégration du flipbook dans la zone.
7. Cliquez sur Mettre à jour et attendez que l'aperçu se charge.

Étapes dans Wix Studio

1. Ouvrez la page et cliquez sur Ajouter des éléments.
2. Allez dans Intégration et réseaux sociaux, puis choisissez l'option Intégration HTML.
3. Cliquez sur l'élément, ouvrez ses réglages et choisissez Code.
4. Collez l'extrait et appliquez-le.

Code ou adresse du site

Wix propose deux modes dans l'élément. Bien choisir le bon évite la plupart des erreurs.

Si vous avez le code d'intégration, utilisez Code. Si vous n'avez qu'un lien, Adresse du site fonctionne aussi, mais vous contrôlez moins le cadre.

Bien dimensionner le flipbook

Un flipbook trop petit paraît à l'étroit, et un flipbook trop grand repousse le contenu hors de l'écran. Wix vous permet de faire glisser les poignées de l'élément, et le code d'intégration contient aussi des valeurs de largeur et de hauteur.

Dimensions recommandées

Conseils pour une mise en page propre

• Placez l'élément dans une bande et étirez-le sur toute la largeur pour un effet maximal.
• Laissez un peu d'espace au-dessus et en dessous pour que le flipbook respire.
• Ajoutez un court titre au-dessus, par exemple « Feuilletez le catalogue ».
• Évitez d'empiler deux intégrations l'une après l'autre sur le même écran.

💡 Astuce pro : Utilisez l'éditeur mobile de Wix pour définir une hauteur distincte pour les téléphones. Un flipbook parfait sur ordinateur peut paraître haut sur un petit écran.

Vérifier sur chaque écran

Cliquer sur Aperçu dans l'éditeur est le premier test. Ne vous arrêtez pas là. Publiez la page, puis ouvrez le lien en ligne sur un téléphone et sur un second navigateur.

Parcourez cette courte liste de contrôle :

1. La première page apparaît-elle sans cadre vide ?
2. Les tournures de pages fonctionnent-elles avec un glissement du doigt sur mobile ?
3. Le zoom fonctionne-t-il et revient-il proprement ?
4. Les vidéos ou les liens dans le flipbook réagissent-ils ?
5. La page se charge-t-elle toujours rapidement ?

Si vous avez répondu oui aux cinq points, c'est terminé.

Corriger les problèmes courants

Même une configuration propre peut rencontrer de petits obstacles. Voici les problèmes les plus souvent signalés, avec la solution pour chacun.

Le cadre est vide

La raison la plus probable est que vous avez utilisé Adresse du site avec un extrait de code, ou que vous avez collé seulement une partie du code. Rouvrez l'élément, passez en Code et collez de nouveau l'extrait complet. Vérifiez aussi que le flipbook lui-même est publié et n'est pas défini comme privé.

Le flipbook est rogné

Augmentez la hauteur de l'élément HTML intégré sur la page. L'iframe ne peut pas être plus grande que son conteneur : un élément trop court coupe le bas du livre.

Ça fonctionne en aperçu mais pas en ligne

Publiez le site après avoir enregistré vos modifications. L'aperçu et la version en ligne peuvent différer tant que vous n'avez pas publié. Videz le cache de votre navigateur si vous voyez encore l'ancienne version.

C'est trop petit sur mobile

Passez à l'éditeur mobile et redimensionnez l'élément séparément. Wix enregistre les mises en page mobiles à part.

⚠️ Attention : Ne collez jamais le code d'intégration dans une zone de texte simple ou un élément texte. Il apparaîtra comme du code visible au lieu du flipbook. Utilisez toujours l'élément HTML.

Des exemples concrets à reproduire

Voir comment d'autres utilisent la même méthode permet de mieux imaginer votre propre page.

Le portfolio d'un photographe

Un photographe de mariage exporte un portfolio de 30 pages et le met en forme avec l'outil Créateur de flipbooks de portfolio photo. Sur Wix, le flipbook se trouve dans une bande pleine largeur sur la page portfolio. Les visiteurs découvrent les travaux dans un format de livre qui ressemble davantage à un album imprimé qu'à une galerie qui défile.

La carte d'un café

Le propriétaire d'un café importe la carte de la semaine avec le Créateur de flipbook de carte de restaurant. Quand les prix changent, il remplace le PDF dans le tableau de bord du flipbook, et la page Wix se met à jour toute seule. Inutile de modifier le site.

Le catalogue d'une boutique

Une petite boutique publie un lookbook de saison avec le Créateur de lookbook interactif et le place sur la page de destination de la boutique, au-dessus de la grille de produits. Les clients parcourent d'abord les pages mises en scène, puis cliquent pour acheter.

Quel outil pour quelle page

Fonctionnalités supplémentaires utiles

Une fois l'intégration de base fonctionnelle, quelques options apportent une vraie valeur à votre page Wix :

• Protection par mot de passe pour les documents réservés aux clients ou les contenus membres.
• Téléchargements hors ligne pour que les visiteurs puissent enregistrer une copie.
• Vidéos et audio intégrés dans les pages.
• Statistiques et génération de prospects avec l'offre Professional, pour voir qui lit quoi et récupérer des contacts.
• Flipbooks illimités à partir de l'offre Standard, pratique si vous gérez beaucoup de pages.

Consultez les offres tarifaires pour comparer ce que chaque niveau inclut.

Garder votre page Wix rapide

Un flipbook doit apporter de la valeur, pas du poids. Quelques habitudes gardent les choses rapides :

1. Allégez les PDF en compressant les images avant l'import.
2. Placez le flipbook sous la ligne de flottaison lorsque la page comporte déjà de grandes bannières.
3. Utilisez une seule intégration par page dans la mesure du possible.
4. Testez la vitesse de la page après la publication, surtout avec une connexion mobile.

Prêt à publier le vôtre

Vous connaissez maintenant toute la méthode : préparer le PDF, créer le flipbook, copier le code d'intégration, ajouter l'élément HTML intégré dans Wix, coller le code en mode Code, le dimensionner et le tester sur un téléphone. Chaque flipbook suivant reprend les mêmes quelques clics.

Prêt à mettre le premier en ligne ? Commencez gratuitement sur Flipbooks AI, parcourez tous les outils et modèles disponibles, ou comparez les offres tarifaires pour choisir celle qui convient à votre site.