Comment intégrer un flipbook dans Squarespace

Ajouter un flipbook interactif à ton site Squarespace transforme un contenu PDF statique en une expérience de tournage de page engageante pour tes visiteurs. Que tu présentes un catalogue produits, un portfolio ou une brochure d'entreprise, intégrer un flipbook FlipLink ne prend que quelques minutes une fois que tu connais la bonne méthode.

Ce guide te détaille chaque étape — de la récupération de ton code d'intégration dans FlipLink jusqu'à son collage dans Squarespace, en t'assurant qu'il s'affiche parfaitement sur toutes les tailles d'écran.

Ce qu'il te faut avant de commencer

Avant d'intégrer un flipbook, assure-toi d'avoir les éléments suivants prêts :

• Un flipbook FlipLink publié — Téléverse ton PDF sur go.fliplink.me et publie-le. Tu auras besoin du code d'intégration ou du lien de partage depuis ton tableau de bord.
• Un plan Squarespace Business ou supérieur — L'injection de code et les blocs de code personnalisés nécessitent au moins le plan Business. Les plans Personal et de base ne prennent pas en charge l'intégration de HTML personnalisé ou d'iframes.
• Un accès à l'éditeur de ton site Squarespace — Tu éditeras les pages directement dans le constructeur de pages Squarespace.

Si tu n'as pas encore créé ton flipbook, consulte notre guide sur les options de partage et de distribution pour comprendre toutes les façons de partager ton flipbook une fois qu'il est prêt.

Étape 1 : récupérer ton code d'intégration dans FlipLink

Une fois ton flipbook publié dans FlipLink, récupérer le code d'intégration est simple :

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 Partager.
4. Sélectionne l'onglet Intégrer.
5. Copie le code d'intégration iframe fourni.

Le code d'intégration ressemble à quelque chose comme ça :

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

Garde ce code sous la main — tu le colleras dans Squarespace à l'étape suivante.

Étape 2 : ajouter un bloc de code dans Squarespace

Squarespace utilise un éditeur par blocs, et le bloc de code est l'endroit où tu colleras ton code d'intégration de flipbook.

1. Ouvre la page où tu veux que le flipbook apparaisse.
2. Clique sur Modifier sur la page.
3. Survole la section où tu veux placer le flipbook et clique sur le point d'insertion (la ligne avec une icône plus).
4. Sélectionne Code parmi les options de bloc. Si tu ne le vois pas, cherche « Code » dans le sélecteur de blocs.
5. Colle ton code d'intégration iframe FlipLink dans le bloc de code.
6. Décoche l'option « Afficher la source » — c'est crucial. Si « Afficher la source » est cochée, Squarespace affichera le HTML brut sous forme de texte au lieu d'afficher le flipbook.
7. Clique sur Enregistrer puis quitte l'éditeur pour prévisualiser ta page.

Ton flipbook devrait maintenant apparaître directement sur la page, avec les animations interactives de tournage de page.

Étape 3 : rendre le flipbook responsive

Le code d'intégration par défaut fonctionne bien sur ordinateur, mais tu voudras t'assurer qu'il s'adapte correctement sur les tablettes et les mobiles. Voici une version améliorée du code d'intégration avec un style responsive :

<div style="position: relative; width: 100%; padding-bottom: 75%; overflow: hidden;">
  <iframe
    src="https://go.fliplink.me/view/your-flipbook-id"
    style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none;"
    allowfullscreen>
  </iframe>
</div>

Le padding-bottom: 75% crée un conteneur au ratio 4:3. Ajuste cette valeur selon les dimensions de ton flipbook :

• Ratio 4:3 (paysage) : padding-bottom: 75%
• Ratio 16:9 (grand écran) : padding-bottom: 56.25%
• Ratio 3:4 (portrait) : padding-bottom: 133%
• Ratio 1:1 (carré) : padding-bottom: 100%

Cette technique s'appelle la méthode de la « boîte à ratio d'aspect ». L'iframe remplit parfaitement son conteneur, et le conteneur s'adapte de façon fluide à la largeur de la page.

Étape 4 : configurer la liste blanche de domaines

Si tu as activé la liste blanche de domaines sur ton flipbook pour la sécurité, tu dois ajouter ton domaine Squarespace à la liste autorisée. Sinon, l'intégration sera bloquée au chargement.

1. Dans ton tableau de bord FlipLink, ouvre les paramètres du flipbook.
2. Va dans la section Liste blanche de domaines.
3. Ajoute ton domaine Squarespace (par ex. www.yourdomain.com ou yourdomain.squarespace.com).
4. Enregistre les paramètres.

La liste blanche de domaines est optionnelle mais recommandée si tu veux empêcher d'autres personnes d'intégrer ton flipbook sur des sites non autorisés. Elle garantit que ton contenu n'apparaît que là où tu le souhaites.

Utiliser l'injection de code Squarespace (à l'échelle du site)

Si tu veux qu'un flipbook apparaisse sur chaque page — par exemple dans un pied de page ou un en-tête — tu peux utiliser la fonctionnalité d'injection de code de Squarespace plutôt que des blocs de code individuels.

1. Va dans Paramètres → Avancé → Injection de code.
2. Colle ton code d'intégration dans le champ Pied de page (ou En-tête, selon le placement).
3. Enveloppe-le dans un div conteneur avec un style approprié pour contrôler sa position.
4. Clique sur Enregistrer.

Cette approche est utile pour les bannières à l'échelle du site ou les widgets de flipbook persistants, même si pour la plupart des cas d'usage, un bloc de code sur une page précise reste le meilleur choix.

Approches alternatives

Toutes les situations ne nécessitent pas une intégration iframe complète. Voici deux alternatives plus simples qui fonctionnent sur n'importe quel plan Squarespace, y compris Personal :

Bloc de lien avec miniature

Au lieu d'intégrer le flipbook directement, ajoute un lien visuel qui ouvre le flipbook dans un nouvel onglet :

1. Prends une capture d'écran de la page de couverture de ton flipbook.
2. Ajoute un bloc image à ta page Squarespace avec la capture d'écran.
3. Ajoute un lien sur l'image pointant vers ton URL de partage FlipLink.
4. Configure le lien pour qu'il s'ouvre dans une nouvelle fenêtre.

Cette approche fonctionne sur tous les plans Squarespace et te donne un contrôle total sur la présentation visuelle. Les visiteurs cliquent sur l'image de couverture et obtiennent l'expérience complète du flipbook dans un nouvel onglet.

Bloc bouton

Pour une approche plus épurée, façon appel à l'action :

1. Ajoute un bloc bouton à ta page.
2. Définis le texte du bouton sur quelque chose comme « Voir notre catalogue » ou « Lire la brochure ».
3. Relie-le à ton URL de partage FlipLink.
4. Configure-le pour qu'il s'ouvre dans un nouvel onglet.

C'est la méthode la plus simple et elle fonctionne de façon fiable sur tous les plans et appareils.

Résoudre les problèmes courants

Le flipbook n'apparaît pas après l'enregistrement

Assure-toi d'avoir décoché « Afficher la source » dans les paramètres du bloc de code. Quand cette option est activée, Squarespace affiche le code en texte brut au lieu de l'exécuter.

L'intégration est bloquée ou affiche un cadre vide

Vérifie tes paramètres de liste blanche de domaines dans FlipLink. Si la liste blanche est activée, ton domaine Squarespace doit figurer dans la liste autorisée. Vérifie aussi que ton plan Squarespace prend en charge les blocs de code — il te faut Business ou supérieur.

Le flipbook est tronqué sur mobile

Utilise l'enveloppe responsive montrée à l'étape 3. La technique de la boîte à ratio d'aspect garantit que l'iframe s'adapte correctement. Si tu vois encore des problèmes, essaie de réduire légèrement le pourcentage de padding-bottom pour mieux remplir l'écran mobile.

Squarespace affiche « Passez à la version supérieure pour utiliser du code personnalisé »

Les blocs de code et l'injection de code ne sont disponibles que sur les plans Squarespace Business, Commerce Basic et Commerce Advanced. Si tu es sur un plan Personal, utilise les alternatives du bloc de lien ou du bloc bouton décrites plus haut.

Conseils pour la meilleure expérience

• Choisis le bon emplacement de page. Place ton flipbook dans une section pleine largeur pour un impact maximal. Évite de l'intégrer dans des barres latérales étroites où l'expérience de tournage de page paraît à l'étroit.
• Définis une hauteur pertinente. Si tu n'utilises pas l'enveloppe responsive, règle la hauteur de l'iframe à au moins 600px pour ordinateur. Moins que ça rend la lecture inconfortable.
• Ajoute du contexte autour de l'intégration. Inclus un titre et une brève description au-dessus du flipbook pour que les visiteurs comprennent ce qu'ils regardent avant de commencer à feuilleter.
• Teste sur plusieurs appareils. Prévisualise ta page sur ordinateur, tablette et mobile avant de publier. L'aperçu par appareil intégré de Squarespace rend ça facile.

Ressources connexes

Si tu intègres des flipbooks sur d'autres plateformes, ces guides peuvent t'aider :

• Comment intégrer un PDF sur n'importe quel site web
• Comment intégrer un flipbook dans WordPress
• Comment intégrer un flipbook avec un iframe

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

Créer et intégrer un flipbook sur Squarespace ne prend que quelques minutes avec FlipLink. Téléverse ton PDF, récupère le code d'intégration et dépose-le dans un bloc de code Squarespace — tes visiteurs obtiennent une expérience de lecture interactive et soignée sans quitter ton site.

Crée ton flipbook gratuit sur FlipLink et commence à l'intégrer sur ton site Squarespace dès aujourd'hui. Consulte notre page de tarifs pour voir ce qui est inclus dans l'unique offre à vie à partir de $39.