Flipbook insluiten in Squarespace

Een interactieve flipbook toevoegen aan je Squarespace-site transformeert statische PDF-content in een boeiende, bladerende ervaring voor je bezoekers. Of je nu een productcatalogus, portfolio of bedrijfsbrochure presenteert, het insluiten van een FlipLink flipbook kost maar een paar minuten zodra je de juiste aanpak kent.

Deze handleiding begeleidt je door elke stap — van het ophalen van je insluitcode in FlipLink tot het plakken ervan in Squarespace en ervoor zorgen dat het er op elk schermformaat goed uitziet.

Wat je nodig hebt voordat je begint

Zorg ervoor dat je het volgende klaar hebt voordat je een flipbook insluit:

• Een gepubliceerde FlipLink flipbook — Upload je PDF op go.fliplink.me en publiceer deze. Je hebt de insluitcode of deellink uit je dashboard nodig.
• Een Squarespace Business-plan of hoger — Code-injectie en aangepaste codeblokken vereisen minimaal het Business-plan. Personal- en Basic-plannen ondersteunen geen aangepaste HTML of iframes.
• Toegang tot je Squarespace-site-editor — Je bewerkt pagina's rechtstreeks in de Squarespace-paginabuilder.

Als je nog geen flipbook hebt gemaakt, bekijk dan onze handleiding over deel- en distributieopties om alle manieren te ontdekken waarop je je flipbook kunt delen zodra deze klaar is.

Stap 1: Haal je insluitcode op uit FlipLink

Zodra je flipbook is gepubliceerd in FlipLink, is het ophalen van de insluitcode eenvoudig:

1. Log in op je FlipLink dashboard op go.fliplink.me.
2. Open de flipbook die je wilt insluiten.
3. Klik op de knop Delen.
4. Selecteer het tabblad Insluiten.
5. Kopieer de meegeleverde iframe-insluitcode.

De insluitcode ziet er ongeveer zo uit:

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

Houd deze code bij de hand — je plakt deze in de volgende stap in Squarespace.

Stap 2: Voeg een codeblok toe in Squarespace

Squarespace gebruikt een blokgebaseerde editor, en het Codeblok is waar je je flipbook-insluitcode plakt.

1. Open de pagina waar je de flipbook wilt weergeven.
2. Klik op Bewerken op de pagina.
3. Beweeg over het gedeelte waar je de flipbook wilt plaatsen en klik op het invoegpunt (de lijn met een plusicoon).
4. Selecteer Code uit de blokopties. Als je het niet ziet, zoek dan naar “Code” in de blokkenlijst.
5. Plak je FlipLink iframe-insluitcode in het codeblok.
6. Vink uit: de optie “Display Source” — dit is cruciaal. Als Display Source is aangevinkt, toont Squarespace de ruwe HTML als tekst in plaats van de flipbook weer te geven.
7. Klik op Opslaan en verlaat vervolgens de editor om een voorbeeld van je pagina te bekijken.

Je flipbook zou nu direct op de pagina moeten verschijnen, compleet met interactieve bladanimaties.

Stap 3: Maak de flipbook responsief

De standaard insluitcode werkt goed op desktop, maar je wilt ervoor zorgen dat deze ook goed schaalt op tablets en mobiele apparaten. Hier is een verbeterde versie van de insluitcode met responsieve styling:

<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>

De padding-bottom: 75% creëert een 4:3 beeldverhoudingscontainer. Pas deze waarde aan op basis van de afmetingen van je flipbook:

• 4:3 verhouding (liggend): padding-bottom: 75%
• 16:9 verhouding (breedbeeld): padding-bottom: 56.25%
• 3:4 verhouding (staand): padding-bottom: 133%
• 1:1 verhouding (vierkant): padding-bottom: 100%

Deze techniek wordt de “aspect ratio box”-methode genoemd. Het iframe vult de container perfect, en de container schaalt vloeiend mee met de paginabreedte.

Stap 4: Configureer domeinwhitelisting

Als je domeinwhitelisting hebt ingeschakeld op je flipbook voor beveiliging, moet je je Squarespace-domein toevoegen aan de toegestane lijst. Anders wordt het insluiten geblokkeerd.

1. Open in je FlipLink dashboard de flipbookinstellingen.
2. Navigeer naar het gedeelte Domeinwhitelisting.
3. Voeg je Squarespace-domein toe (bijv. www.jouwdomein.com of jouwdomein.squarespace.com).
4. Sla de instellingen op.

Domeinwhitelisting is optioneel, maar wordt aanbevolen als je wilt voorkomen dat anderen je flipbook insluiten op ongeautoriseerde websites. Het zorgt ervoor dat je content alleen verschijnt waar jij het bedoelt.

Squarespace Code Injection gebruiken (sitebreed)

Als je wilt dat een flipbook op elke pagina verschijnt — bijvoorbeeld in een footer- of headergedeelte — kun je de Code Injection-functie van Squarespace gebruiken in plaats van individuele codeblokken.

1. Ga naar Instellingen → Geavanceerd → Code Injection.
2. Plak je insluitcode in het Footer-veld (of Header, afhankelijk van de plaatsing).
3. Omsluit het met een container-div met passende styling om de positie te bepalen.
4. Klik op Opslaan.

Deze aanpak is handig voor sitebrede banners of permanente flipbook-widgets, hoewel voor de meeste toepassingen een codeblok op een specifieke pagina de betere keuze is.

Alternatieve benaderingen

Niet elke situatie vraagt om een volledig iframe-insluiting. Hier zijn twee eenvoudigere alternatieven die werken op elk Squarespace-plan, inclusief Personal:

Linkblok met thumbnail

In plaats van de flipbook direct in te sluiten, voeg je een visuele link toe die de flipbook opent in een nieuw tabblad:

1. Maak een screenshot van de omslagpagina van je flipbook.
2. Voeg een Afbeeldingsblok toe aan je Squarespace-pagina met de screenshot.
3. Voeg een link toe aan de afbeelding die verwijst naar je FlipLink-deel-URL.
4. Stel de link in om in een nieuw venster te openen.

Deze aanpak werkt op elk Squarespace-plan en geeft je volledige controle over de visuele presentatie. Bezoekers klikken op de omslagafbeelding en krijgen de volledige flipbook-ervaring in een nieuw tabblad.

Knopblok

Voor een strakkere call-to-action-aanpak:

1. Voeg een Knopblok toe aan je pagina.
2. Stel de knoptekst in op iets als “Bekijk onze catalogus” of “Lees de brochure”.
3. Link deze naar je FlipLink-deel-URL.
4. Stel in dat deze opent in een nieuw tabblad.

Dit is de eenvoudigste methode en werkt betrouwbaar op alle plannen en apparaten.

Veelvoorkomende problemen oplossen

De flipbook verschijnt niet na het opslaan

Zorg ervoor dat je “Display Source” hebt uitgevinkt in de codeblok-instellingen. Wanneer deze optie is ingeschakeld, toont Squarespace de code als platte tekst in plaats van deze uit te voeren.

De insluiting is geblokkeerd of toont een leeg frame

Controleer je domeinwhitelisting-instellingen in FlipLink. Als whitelisting is ingeschakeld, moet je Squarespace-domein op de toegestane lijst staan. Controleer ook of je Squarespace-plan codeblokken ondersteunt — je hebt Business of hoger nodig.

De flipbook is afgesneden op mobiel

Gebruik de responsieve wrapper uit Stap 3. De aspect ratio box-techniek zorgt ervoor dat het iframe correct schaalt. Als je nog steeds problemen ziet, probeer dan het padding-bottom-percentage iets te verlagen om beter in het mobiele scherm te passen.

Squarespace zegt “Upgrade to use custom code”

Codeblokken en code-injectie zijn alleen beschikbaar op Squarespace Business-, Commerce Basic- en Commerce Advanced-plannen. Als je een Personal-plan hebt, gebruik dan de hierboven beschreven linkblok- of knopblok-alternatieven.

Tips voor de beste ervaring

• Kies de juiste paginaplaatsing. Plaats je flipbook in een sectie op volledige breedte voor maximale impact. Vermijd het insluiten in smalle zijbalken waar de bladerervaring krap aanvoelt.
• Stel een zinvolle hoogte in. Als je de responsieve wrapper niet gebruikt, stel de iframe-hoogte dan in op minimaal 600px voor desktop. Alles minder maakt het lezen oncomfortabel.
• Voeg context toe rond de insluiting. Voeg een kop en korte beschrijving toe boven de flipbook, zodat bezoekers begrijpen wat ze zien voordat ze beginnen met bladeren.
• Test op meerdere apparaten. Bekijk een voorbeeld van je pagina op desktop, tablet en mobiel voordat je publiceert. De ingebouwde apparaatvoorbeeldweergave van Squarespace maakt dit eenvoudig.

Gerelateerde bronnen

Als je flipbooks insluit op andere platforms, kunnen deze handleidingen helpen:

• Hoe sluit je een PDF in op elke website
• Hoe sluit je een flipbook in in WordPress
• Hoe sluit je een flipbook in met een iframe

Begin vandaag nog met het insluiten van je flipbook

Het maken en insluiten van een flipbook op Squarespace kost maar een paar minuten met FlipLink. Upload je PDF, pak de insluitcode en zet deze in een Squarespace-codeblok — je bezoekers krijgen een verzorgde, interactieve leeservaring zonder je site te verlaten.

Maak je gratis flipbook op FlipLink en begin vandaag nog met insluiten op je Squarespace-site. Bekijk onze prijzenpagina om te zien wat er bij elk plan is inbegrepen.