Tutoriel pas à pas pour placer un flipbook à effet de feuilletage sur n’importe quelle page Squarespace avec un Code Block. Il couvre les offres requises, le code d’intégration, le dimensionnement adaptatif, la protection par mot de passe, les tests sur mobile et les solutions aux problèmes d’affichage les plus courants.
Vous avez un catalogue, une carte de restaurant ou un portfolio dans un PDF, et votre site Squarespace le présente comme un simple lien de téléchargement que personne ne clique. Un flipbook règle ce problème. Les visiteurs lisent directement sur la page, tournent les pages d’un geste et ne quittent jamais votre site. L’outil qui rend cela possible est le Squarespace Code Block, et avec un flipbook créé dans Flipbooks AI, toute l’opération prend une dizaine de minutes.
Ce tutoriel détaille chaque étape : ce dont vous avez besoin, où placer le code, comment régler la taille et comment corriger les problèmes qui font souvent trébucher.
Un Code Block est un bloc de contenu qui accepte du HTML brut. Au lieu de saisir du texte ou d’insérer une image, vous collez un extrait de code, et Squarespace l’affiche exactement tel qu’il est écrit. Un code d’intégration fourni par une plateforme de flipbooks est l’un de ces extraits. Il indique au navigateur de charger votre flipbook dans un cadre sur votre page.
Un PDF lié s’ouvre dans un nouvel onglet ou se télécharge sur l’appareil. Sur un téléphone, cela oblige souvent à zoomer avec les doigts sur une page minuscule. Un flipbook intégré reste dans votre mise en page, s’adapte à l’écran et retient les visiteurs plus longtemps sur votre site.
| Méthode | Expérience de lecture | Reste sur votre site | Adapté au mobile |
|---|---|---|---|
| Lien de téléchargement PDF | Ouvre un fichier séparé | Non | Médiocre |
| Galerie d’images des pages | Défilement manuel | Oui | Moyen |
| Flipbook intégré | Vue avec effet de feuilletage | Oui | Excellent |
Les Code Blocks sont disponibles à partir de l’offre Business. L’offre Personal ne permet pas d’exécuter du code personnalisé. Vérifiez ce point avant de commencer, car c’est la première raison pour laquelle le bloc semble manquer.
⚠️ Si vous ne voyez que le bloc Markdown et aucune option Code, votre offre n’inclut probablement pas le code personnalisé. Passez à une offre supérieure dans Paramètres, puis Facturation.
Rassemblez trois éléments d’abord. Cela vous évite des allers-retours plus tard.
Exportez à une résolution raisonnable. Pour la plupart des catalogues, un fichier entre 5 et 25 Mo s’affiche nettement et se charge vite. Gardez des pages de format uniforme, car des formats mélangés rendent l’animation de feuilletage inégale.
Décidez si le flipbook occupe toute la largeur de la page ou s’il se place à côté du texte. La pleine largeur convient aux catalogues et aux magazines. Une demi-largeur convient à un aperçu placé à côté d’un formulaire d’inscription.
Le code d’intégration n’existe pas tant que le flipbook n’existe pas. La procédure est courte.
💡 Faites correspondre la couleur de fond du flipbook à celle de votre section Squarespace. Le cadre disparaît alors et le flipbook semble faire partie intégrante de la page.
Les modifications faites après l’intégration se mettent à jour automatiquement, vous pouvez donc corriger les coquilles plus tard. Réglez tout de même l’essentiel dès maintenant : logo, couleur et page de départ. Si votre PDF contient des liens ou des vidéos, la plateforme les garde actifs, et vous pouvez aussi ajouter de l’audio et de la vidéo dans les pages.
C’est le cœur du processus. Suivez-le dans l’ordre.
L’outil Intégrer un flipbook sur un site web explique les options si vous souhaitez les voir avant de choisir.
✅ Bonne pratique : laissez Afficher la source désactivé. S’il reste activé, les visiteurs voient le code brut au lieu de votre flipbook.
Voici un aperçu rapide de l’effet de chaque réglage.
| Réglage | Effet | Valeur recommandée |
|---|---|---|
| Afficher la source | Affiche le code comme du texte | Désactivé |
| Largeur du bloc | Définit la largeur du cadre | 100 % |
| Hauteur du bloc | Définit la hauteur du cadre | De 600 à 800 px sur ordinateur |
| Fond de section | Colore la zone autour du cadre | Identique à la couleur du flipbook |
Un cadre trop court coupe les pages. Un cadre trop haut laisse un vide. Les deux donnent un effet négligé.
Squarespace ne redimensionne pas automatiquement les iframes. Définissez une hauteur fixe dans le code d’intégration, par exemple height="700". Une règle simple consiste à prendre la largeur de votre zone de contenu et à la multiplier par 0,65 pour une vue en double page.
Placez l’iframe dans un conteneur de largeur en pourcentage, pour qu’il rétrécisse sur les téléphones. Beaucoup ajoutent aussi une hauteur plus grande pour mobile, à l’aide d’un court bloc de style dans le CSS personnalisé.
💡 Ouvrez votre page sur un vrai téléphone, pas seulement dans le mode aperçu du navigateur. Les appareils réels révèlent les chevauchements de la barre d’outils que l’aperçu ne montre pas.
| Cas d’usage | Emplacement | Hauteur suggérée |
|---|---|---|
| Catalogue de produits | Section pleine largeur | 750 px |
| Carte de restaurant | Centrée, 80 % de la largeur | 650 px |
| Portfolio photo | Section à fond perdu | 800 px |
Voir des cas réels facilite la décision.
Un restaurant peut intégrer une carte de saison créée avec le Créateur de flipbook de carte de restaurant. Quand la carte change, il suffit de modifier le flipbook une seule fois : la page Squarespace se met à jour toute seule, sans nouveau code.
Un agent immobilier peut placer sur la fiche de chaque bien une brochure immobilière créée avec le Créateur de brochures immobilières. Les acheteurs feuillettent les plans et les photos sans rien télécharger.
Un photographe peut créer une galerie avec l’outil Portfolio photo, puis l’insérer dans une page de portfolio. Une boutique peut utiliser l’outil de création de catalogues de produits pour un lookbook destiné à la vente en gros.
Tous les flipbooks ne doivent pas être publics. Les tarifs de gros, les propositions aux clients et les manuels internes ont besoin d’une protection.
Dans Flipbooks AI, activez la protection par mot de passe dans les paramètres de partage. Les visiteurs saisissent le mot de passe avant le chargement des pages. Associez-la à un espace membre Squarespace ou à une page masquée pour une confidentialité renforcée.
Avec l’offre Professional, vous pouvez recueillir des adresses e-mail avant que les lecteurs n’ouvrent le flipbook, et voir quelles pages attirent le plus d’attention. Consultez les offres et tarifs pour comparer ce que comprend chaque niveau.
| Fonctionnalité | Standard | Professional |
|---|---|---|
| Flipbooks illimités | Oui | Oui |
| Sans filigrane | Oui | Oui |
| Protection par mot de passe | Oui | Oui |
| Statistiques | De base | Détaillées |
| Génération de prospects | Non | Oui |
| Téléchargement hors ligne | Oui | Oui |
Même une intégration simple peut mal se comporter. Voici les coupables habituels.
Afficher la source est activé. Ouvrez le bloc, désactivez cette option et enregistrez.
Vérifiez que vous avez copié l’extrait complet, balise de fermeture comprise. Un collage partiel produit un cadre vide. Vérifiez aussi que le flipbook est publié et n’est pas réglé sur privé sans mot de passe.
Augmentez la valeur de hauteur, ou réduisez le nombre de boutons de la barre d’outils dans les réglages du flipbook. Moins de boutons laissent plus de place à la page elle-même.
Squarespace masque parfois les intégrations pendant la modification. Prévisualisez la page ou visitez l’adresse publiée. Le flipbook s’y charge.
Un cadre intégré n’est pas lu de la même façon que le texte d’une page, donc entourez-le de vrais mots. Ajoutez un titre au-dessus du flipbook, deux ou trois phrases décrivant le contenu, et un lien texte vers le PDF pour les lecteurs qui préfèrent ce format.
💡 Un flipbook sans texte autour donne peu de matière à indexer aux moteurs de recherche. Un court paragraphe d’introduction règle cela en moins d’une minute.
Le grand avantage de cette configuration est l’entretien. Comme le Code Block charge votre flipbook depuis un lien actif, vous n’avez plus jamais à toucher à Squarespace quand le contenu change. Remplacez le PDF dans Flipbooks AI, et la page le reflète immédiatement. Cartes de saison, catalogues trimestriels et listes de prix mises à jour restent à jour avec un seul import.
Prêt à mettre votre premier flipbook sur votre site ? Créez un compte gratuit sur Flipbooks AI, importez votre PDF et collez le code d’intégration dans un Code Block Squarespace. Parcourez la liste complète des outils de flipbook pour trouver le modèle adapté à votre contenu, et comparez les offres et tarifs quand vous aurez besoin des statistiques et de la capture de prospects.
Choisissez votre langue
