Tutoriel
Intégrer un flipbook 3D dans Substack sans iframe
Un code d'intégration collé dans Substack s'affiche en texte brut, car l'éditeur n'exécute aucun iframe. Une image cliquable fait le même travail.
3 min de lecture
Le bloc PDF de Notion n'affiche qu'un défilement plat. Collez l'URL d'un viewer i3Dify dans ce même bloc et vos visiteurs tournent les pages d'un vrai livre.
Par Franco Cirulli
Vous avez glissé un PDF dans une page Notion et il est ressorti sous la forme d'un défilement gris. Les visiteurs voient un lien de téléchargement avec une miniature, ou une bande verticale de pages plates sur laquelle personne ne s'arrête. Notion affiche pourtant un viewer interactif dans ce même bloc si vous lui donnez une URL que son moteur d'intégration reconnaît, et un flipbook i3Dify, un PDF transformé en livre que l'on feuillette dans le navigateur, en fait partie.
Importez un PDF directement dans Notion et vous obtenez l'une de ces deux choses. Un bloc fichier, c'est-à-dire un lien de téléchargement avec une petite miniature que la plupart des visiteurs ne cliquent jamais. Ou une intégration en ligne, qui affiche les pages en défilement vertical, la même interface que l'aperçu d'un drive. Pour une procédure interne, ça suffit.
Pour une page envoyée hors de l'équipe (un portfolio, un lookbook, une carte de restaurant, un carnet d'inspiration pour un mariage), c'est la partie que l'on survole. Un flipbook se comporte au contraire comme un objet. Cliquez sur le quart droit du viewer et la feuille se courbe le long de la reliure en tournant, avec les pages voisines déjà chargées pour que le geste ne bloque pas sur un téléphone. Le quart gauche revient en arrière, les flèches du clavier aussi. Faites glisser n'importe où et le livre pivote, puis revient en place quand vous lâchez. Un hotspot posé sur une page ouvre son lien dans un nouvel onglet, et le dock propose des boutons de zoom pour les petits caractères.
Créez d'abord le livre. Importez le PDF (les pages sont extraites dans le navigateur), choisissez la couleur de couverture et les liens du dock, puis publiez. Le panneau de partage vous donne une URL de viewer et un iframe. Notion ne veut que l'URL, car son moteur d'intégration écrit l'iframe à votre place.
Dans la page, tapez /embed sur une nouvelle ligne, choisissez Embed, collez l'URL et cliquez sur Embed link. Coller l'URL directement sur une ligne puis choisir Create embed revient au même. Le bloc arrive trop court : tirez le bord inférieur jusqu'à 600 à 800 pixels, et le viewer occupe toute la largeur de la colonne. L'offre gratuite couvre 3 projets et 50 Mo, et chaque viewer gratuit affiche le filigrane i3Dify dans le coin. Pro coûte 3 $ par mois et le retire.
Les deux niveaux de confidentialité n'ont rien à voir l'un avec l'autre, et c'est là que l'on se trompe. Le partage de Notion décide qui voit la page. La visibilité du projet décide si le viewer se charge tout court : un projet Private répond à l'URL publique par une page Not Found, et le bloc reste vide. Passez-le en Unlisted ou Public avant de coller l'URL. Unlisted le garde hors des moteurs de recherche et ouvert à quiconque a le lien.
Pour un livrable client, ajoutez un mot de passe à un projet Unlisted et envoyez-le par un autre canal. La limite mérite d'être dite clairement : le mot de passe protège la page du projet, pas les URL directes des images, donc voyez-le comme un verrou sur la porte plutôt qu'un coffre-fort. La page partage et diffusion détaille les réglages de chaque projet.
Deux cas de dégradation sont à connaître avant de bâtir une page autour de l'intégration. L'application mobile de Notion limite davantage l'interaction avec les iframes qu'un navigateur : ses utilisateurs voient le viewer, mais les gestes tactiles sont moins fluides. Quiconque ouvre votre page partagée dans un navigateur mobile profite de tout.
Les exports se séparent aussi. Un export HTML conserve l'iframe, un export PDF le remplace par un lien. Si la page est archivée ou transférée en fichier, collez l'URL du viewer en texte brut à côté de l'intégration pour que le livre survive au voyage.
Le même projet s'intègre dans WordPress, Webflow, Framer, Carrd et Squarespace, où vous collez l'iframe au lieu de l'URL nue. Un projet, une URL, et le visiteur feuillette un livre dans la page au lieu d'ignorer un lien de téléchargement.
Transformez votre PDF en flipbook 3D.
Notion charge les intégrations au fil du défilement, le premier téléchargement du viewer pèse environ 1 Mo et les pages arrivent à mesure qu'on en a besoin. Votre page Notion se charge aussi vite qu'avant.
L'intégration hérite des droits d'accès de la page Notion : si la page est privée, seuls les membres connectés voient le bloc. Pour protéger le viewer lui-même, ajoutez aussi un mot de passe au projet i3Dify.
Notion ne peut intégrer que des projets Public ou Unlisted. Un projet Private répond à son URL publique par une page Not Found, et le bloc reste vide. Passez-le en Unlisted et ajoutez un mot de passe plutôt que de le laisser en Private.
Un export HTML conserve l'iframe. Un export PDF le remplace par un lien : collez donc l'URL du viewer à côté de l'intégration si la page doit être exportée.
Importez un PDF ou quelques images, choisissez un type de projet et partagez le lien. L'offre gratuite suffit pour essayer.
Créer un Flipbook