Comment intégrer un flipbook sur ton site Wix

Guide pas à pas pour intégrer un flipbook FlipLink sur ton site Wix grâce au widget d'intégration HTML. Fonctionne avec n'importe quel forfait Wix.

Sumit Ghugharwal
Sumit Ghugharwal

January 27, 2026 · 8 min read

Partager cet article:

Wix permet de construire facilement un site soigné sans écrire de code, mais ajouter un contenu interactif comme un flipbook peut sembler délicat au premier abord. La bonne nouvelle, c'est qu'intégrer un flipbook FlipLink sur ton site Wix ne prend que quelques minutes — aucune expérience de programmation requise.

Dans ce guide, tu apprendras à récupérer ton code d'intégration depuis FlipLink, à le déposer dans l'éditeur Wix et à le peaufiner pour que ton flipbook ait une belle allure sur chaque taille d'écran.

Pourquoi intégrer un flipbook sur ton site Wix ?

Les PDF statiques enterrés derrière des liens de téléchargement n'engagent pas les visiteurs. Un flipbook intégré laisse les gens feuilleter ton contenu directement sur la page, avec des animations de feuilletage 3D réalistes. Cela signifie :

  • Un engagement plus élevé — les visiteurs interagissent avec ton contenu au lieu de partir vers un lecteur de PDF
  • Un temps passé sur la page plus long — les éléments interactifs gardent les gens en navigation
  • Une présentation professionnelle — catalogues, portfolios, magazines et brochures ont bien plus d'allure en flipbooks
  • Aucun téléchargement requis — tout se charge directement dans le navigateur

Que tu présentes un catalogue produits, un rapport d'entreprise ou un magazine numérique, l'intégration l'emporte sur le lien à chaque fois.

Ce dont tu auras besoin

Avant de commencer, assure-toi d'avoir :

  1. Un compte FlipLink avec au moins un flipbook publié (inscris-toi ici si ce n'est pas déjà fait)
  2. L'accès à l'éditeur Wix de ton site web
  3. Le code d'intégration ou l'URL de partage de ton flipbook depuis FlipLink

C'est tout. Aucun plugin Wix premium ni application tierce n'est nécessaire.

D'abord, récupère le code d'intégration du flipbook que tu veux afficher.

  1. Connecte-toi à ton tableau de bord FlipLink sur go.fliplink.me
  2. Ouvre le flipbook que tu veux intégrer
  3. Clique sur le bouton Share dans la barre d'outils
  4. Sélectionne l'onglet Embed
  5. Copie le code d'intégration iframe fourni

Le code d'intégration ressemble à peu près à ceci :

<iframe
  src="https://go.fliplink.me/view/your-flipbook-id"
  width="100%"
  height="600"
  frameborder="0"
  allowfullscreen
></iframe>

FlipLink te donne un extrait iframe prêt à l'emploi, tu n'auras donc rien à construire manuellement. Pour un aperçu plus détaillé des options d'intégration, consulte la page de la fonctionnalité Partage et diffusion.

Étape 2 : ajoute un élément d'intégration HTML dans Wix

Passe maintenant à l'éditeur de ton site Wix.

  1. Ouvre l'éditeur Wix de ton site
  2. Va à la page où tu veux que le flipbook apparaisse
  3. Clique sur le bouton Ajouter (+) dans la barre d'outils de gauche
  4. Sélectionne Code d'intégration dans le menu
  5. Choisis Intégrer du HTML
  6. Un widget HTML gris apparaîtra sur ton canevas — fais-le glisser à l'endroit souhaité sur la page

C'est dans ce widget que vivra ton flipbook.

Étape 3 : colle le code d'intégration

  1. Clique sur le widget d'intégration HTML que tu viens de placer
  2. Sélectionne Saisir le code
  3. Assure-toi que le mode est réglé sur HTML (pas une URL)
  4. Colle le code d'intégration iframe que tu as copié depuis FlipLink
  5. Clique sur Mettre à jour ou Appliquer

Ton flipbook devrait maintenant s'afficher dans le widget. Tu verras le lecteur interactif directement dans l'aperçu de l'éditeur Wix.

Étape 4 : redimensionne et positionne le flipbook

Les dimensions par défaut de l'iframe pourraient ne pas correspondre parfaitement à la mise en page de ta page. Voici quelques conseils pour bien régler la taille :

Choisis une bonne hauteur

Une hauteur de 500 à 700 pixels convient bien à la plupart des flipbooks. Si ton contenu est en orientation paysage (comme une double page de catalogue), vise plus haut — autour de 650 à 700 px. Pour les documents en portrait, 500 à 600 px suffisent généralement.

Mets-le en pleine largeur

Pour que le flipbook s'étire sur toute la zone de contenu, règle la largeur du widget pour qu'elle corresponde à la colonne de contenu de ta page. Dans l'éditeur Wix, fais glisser les bords du widget HTML pour remplir l'espace disponible, ou utilise l'option de mise en page Étirer si ton modèle Wix la prend en charge.

Considérations d'adaptabilité

Wix gère le comportement adaptatif différemment du HTML traditionnel. Quelques points à garder à l'esprit :

  • Le widget d'intégration HTML ne se redimensionne pas automatiquement sur mobile dans l'éditeur Wix classique — tu devras peut-être ajuster la version mobile séparément
  • Dans l'éditeur mobile Wix, clique sur le widget HTML et redimensionne-le pour les petits écrans
  • Règle la largeur de l'iframe sur 100% dans ton code d'intégration pour qu'elle remplisse le conteneur fourni par Wix, quel qu'il soit
  • Pense à réduire la hauteur à 400 à 500 px sur mobile pour que le flipbook ne domine pas tout l'écran

Si tu utilises Wix Studio (anciennement Editor X), tu as plus de contrôle sur les points de rupture adaptatifs et tu peux régler le widget pour qu'il s'adapte de façon fluide.

🖥️

Free: Embed Pdf

Generate an embed code to display your PDF on any website.

Try it free — no sign-up needed

Étape 5 : configure la liste blanche de domaines

Si tu as activé des restrictions de domaine sur ton flipbook pour des raisons de sécurité, tu devras ajouter ton domaine Wix à la liste blanche pour que l'intégration se charge correctement.

  1. Va dans ton tableau de bord FlipLink
  2. Ouvre les paramètres du flipbook
  3. Va à la section Liste blanche de domaines
  4. Ajoute le domaine de ton site Wix (par exemple, www.tonentreprise.com ou tonpseudo.wixsite.com)
  5. Enregistre tes modifications

Sans liste blanche, les visiteurs risquent de voir un message de blocage au lieu de ton flipbook. Si tu utilises un domaine personnalisé connecté à Wix, ajoute ce domaine à la liste blanche plutôt que l'adresse .wixsite.com par défaut.

Résolution des problèmes courants

Le flipbook n'apparaît pas dans l'éditeur

  • Assure-toi d'avoir sélectionné le mode HTML, pas le mode Adresse de site web dans le widget d'intégration
  • Vérifie que ton flipbook est publié (pas à l'état de brouillon) dans FlipLink
  • Vérifie que l'URL src de l'iframe est correcte et accessible dans un onglet de navigateur normal

Le flipbook se charge mais paraît coupé

  • Augmente la hauteur du widget d'intégration HTML dans l'éditeur Wix
  • Assure-toi que l'attribut width de l'iframe est réglé sur 100%
  • Vérifie qu'aucun conteneur parent de ta mise en page Wix ne rogne le widget

Le flipbook affiche une boîte blanche vide

  • Ton flipbook a peut-être la liste blanche de domaines activée — ajoute ton domaine Wix à la liste autorisée
  • Vide le cache de ton navigateur et recharge la page
  • Essaie d'ouvrir l'URL du flipbook directement dans un nouvel onglet pour confirmer qu'elle se charge

L'intégration paraît différente sur mobile

  • Passe à l'éditeur mobile dans Wix et ajuste la taille du widget séparément
  • Réduis la hauteur de l'iframe pour le mobile afin d'éviter un défilement excessif
  • Teste sur un véritable appareil mobile, car l'aperçu mobile de Wix peut parfois différer du comportement réel

Alternative : lier au lieu d'intégrer

Si l'intégration n'est pas idéale pour ta mise en page — peut-être veux-tu une page plus épurée ou ton flipbook est-il très long — tu peux y lier à la place.

  1. Copie le lien de partage depuis FlipLink (pas le code d'intégration)
  2. Ajoute un bouton ou un lien texte sur ta page Wix
  3. Règle le lien pour qu'il ouvre l'URL de ton flipbook dans un nouvel onglet

Cette approche fonctionne bien pour :

  • Les campagnes d'e-mails où tu diriges le trafic vers une page de flipbook dédiée
  • Les menus de navigation où tu veux un lien direct vers un catalogue ou un magazine
  • Les pages d'atterrissage où tu préfères une section d'en-tête épurée avec un bouton d'appel à l'action

Tu peux aussi créer une page dédiée sur ton site Wix qui ne contient que le flipbook intégré, puis lier à cette page depuis ta navigation ou un autre contenu.

Conseils pour une meilleure expérience de flipbook sur Wix

  • Place le flipbook sous la ligne de flottaison si la page a d'autres contenus importants au-dessus — les grandes intégrations peuvent repousser des informations clés vers le bas
  • Ajoute du contexte au-dessus de l'intégration avec un court titre et une description pour que les visiteurs sachent ce qu'ils regardent
  • Utilise un texte de chargement — ajoute une brève note comme « Chargement du flipbook… » au-dessus du widget pour les connexions plus lentes
  • Garde ton flipbook optimisé — compresse ton PDF avant de l'envoyer sur FlipLink pour des temps de chargement plus rapides
  • Teste sur plusieurs appareils avant de publier — vérifie sur bureau, tablette et téléphone pour t'assurer que tout est correct

Guides associés

Si tu intègres des flipbooks sur d'autres plateformes, ces guides détaillent le processus pour chacune :

Commence à intégrer ton flipbook dès aujourd'hui

Mettre un flipbook FlipLink sur ton site Wix est simple : copie le code d'intégration, dépose-le dans un widget HTML, ajuste la taille et publie. Tout le processus prend moins de cinq minutes.

Si tu n'as pas encore créé ton flipbook, inscris-toi à FlipLink et envoie ton premier PDF. Consulte notre page de tarifs pour découvrir l'offre à vie — un seul paiement, aucun abonnement, et un accès complet à toutes les fonctionnalités, y compris les codes d'intégration, les domaines personnalisés et les statistiques.

Prêt à créer ton premier flipbook ?

Transforme tes PDF en flipbooks et documents interactifs. Commence avec le Lifetime Deal de FlipLink : un accès à vie à partir de seulement 39 $.

#wix#intégration#site web#intégration de contenu

À lire aussi

Tutorials8 min read

Comment intégrer un flipbook dans Squarespace

Apprends à ajouter un flipbook interactif à ton site Squarespace. Guide pas à pas avec les blocs de code et les options d'intégration.

Sumit Ghugharwal