Flipbook insluiten op je website met een iframe

Je hebt een prachtige interactieve flipbook gemaakt van je PDF. En nu? Een link delen is prima, maar je flipbook rechtstreeks op je website insluiten houdt bezoekers betrokken zonder ze ergens anders naartoe te sturen. Het ziet er professioneel uit, laadt snel en geeft je volledige controle over de ervaring.

In deze tutorial laten we precies zien hoe je een FlipLink flipbook op elke website kunt insluiten met een iframe — plus tips om het responsief, veilig en gepolijst te maken op elk apparaat.

Waarom insluiten in plaats van alleen een link delen?

Wanneer je een flipbook-link deelt, verlaten bezoekers je website om deze te bekijken. Dat betekent dat je de controle over de ervaring verliest — ze komen misschien niet meer terug. Insluiten houdt alles op jouw terrein.

Dit zijn de voordelen van insluiten:

• Lagere bouncepercentages — bezoekers blijven op je pagina in plaats van weg te navigeren
• Betere merkbeleving — de flipbook voelt als een natuurlijk onderdeel van je website
• Hogere betrokkenheid — lezers bladeren eerder door content die inline laadt
• SEO-voordelen — de tijd op de pagina neemt toe, wat kwaliteit signaleert aan zoekmachines
• Professionele presentatie — ideaal voor productcatalogi, portfolio's en verkoopmateriaal

Wil je een PDF-viewer insluiten in plaats van een flipbook? Bekijk dan onze gids over hoe je een PDF op je website kunt insluiten.

De iframe-insluitcode ophalen in FlipLink

FlipLink genereert insluitcodes automatisch — geen programmeerkennis nodig. Zo haal je jouw code op:

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

De code ziet er ongeveer zo uit:

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

Dat is alles. Plak dit codefragment op een willekeurige HTML-pagina en je flipbook verschijnt met volledige 3D-bladinteractiviteit.

Bekijk voor meer details over alle manieren waarop je je flipbook kunt verspreiden de deel- en distributiefuncties.

Insluiten op verschillende platformen

WordPress

WordPress maakt het insluiten van iframes eenvoudig:

1. Open de pagina of het bericht waar je de flipbook wilt plaatsen
2. Voeg een Aangepaste HTML-blok toe (geen alineablok)
3. Plak je iframe-code
4. Bekijk een voorbeeld van de pagina om te controleren of alles correct laadt

Als je de klassieke editor gebruikt, schakel dan naar het Tekst-tabblad (niet Visueel) voordat je plakt. Voor een uitgebreide WordPress-handleiding lees je onze gids over hoe je een flipbook in WordPress kunt insluiten.

Wix

Wix ondersteunt geen ruwe HTML in reguliere tekstblokken, maar er is een alternatief:

1. Klik in de Wix-editor op Toevoegen (+) in het linkerpaneel
2. Kies Code insluiten > HTML insluiten
3. Plak je iframe-code in het HTML-vak
4. Pas de grootte van de insluitwidget aan je lay-out aan
5. Publiceer je website

Squarespace

Squarespace ondersteunt codeblokken standaard:

1. Bewerk de pagina waar je de flipbook wilt plaatsen
2. Voeg een nieuw Codeblok toe (via het +-menu)
3. Plak de iframe-code
4. Schakel "Bron weergeven" uit als die optie verschijnt
5. Sla op en bekijk een voorbeeld

Aangepaste HTML-websites

Voor elke statische HTML-website plak je de iframe-code gewoon op de plek waar je de flipbook wilt tonen in je HTML-bestand. Het werkt in <div>-containers, artikelsecties of landingspagina-lay-outs — overal waar HTML wordt geaccepteerd.

Tips voor responsief insluiten

Een iframe met vaste breedte ziet er geweldig uit op desktop maar werkt niet goed op mobiel. Zo maak je je insluitcode responsief, zodat deze zich aanpast aan elk schermformaat.

De beeldverhoudingwrapper-techniek

Omwikkel de iframe met een container die een consistente beeldverhouding behoudt:

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

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

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

Snelle mobiele test

Test na het insluiten op een echt telefoon — niet alleen de responsieve modus van de browser. Knijp-om-te-zoomen en touch-gebaseerd bladeren moeten soepel werken. Als de insluitcode krap aanvoelt op kleine schermen, overweeg dan de minimumhoogte te verhogen naar 400px of 500px.

Domeinwhitelisting voor beveiliging

Als je flipbook gevoelige content bevat — prijsgidsen, interne rapporten, klantvoorstellen — wil je waarschijnlijk niet dat iemand deze op willekeurige websites insluit.

De domeinwhitelisting-functie van FlipLink laat je beperken waar je iframe-insluitcode kan worden geladen:

1. Open de instellingen van je flipbook
2. Navigeer naar het gedeelte Beveiliging of Insluiten
3. Voeg je goedgekeurde domeinen toe (bijv. jouwbedrijf.com, blog.jouwbedrijf.com)
4. Sla de wijzigingen op

Nu wordt de flipbook alleen weergegeven wanneer deze wordt geladen vanaf die domeinen. Als iemand je iframe-code kopieert en op zijn website plakt, laadt deze niet — in plaats daarvan zien ze een melding dat de toegang is geweigerd.

Dit is vooral handig voor productcatalogi die met specifieke retailpartners worden gedeeld of klantgerichte documenten die niet openbaar toegankelijk zouden moeten zijn.

Alternatief: klikbare afbeeldingsinsluitcode

Niet elke situatie vraagt om een volledige iframe-insluitcode. Soms werkt een klikbare voorbeeldafbeelding beter — vooral wanneer je een lichtgewicht teaser wilt die de volledige flipbook opent bij een klik.

FlipLink genereert automatisch een klikbare afbeeldingsinsluitcode. Deze ziet er als volgt uit:

<a href="https://go.fliplink.me/view/your-flipbook-id" target="_blank">
  <img
    src="https://go.fliplink.me/thumbnail/your-flipbook-id.jpg"
    alt="Bekijk flipbook"
    style="max-width: 100%; cursor: pointer;"
  />
</a>

Deze aanpak is ideaal voor:

• E-mailnieuwsbrieven (waar iframes niet werken)
• Zijbalkwidgets met beperkte ruimte
• Blogberichten waar je een voorbeeld wilt tonen zonder de leeservaring te onderbreken
• Pagina's met meerdere flipbooks — toon miniaturen en laat lezers kiezen welke ze willen openen

Vergelijking van insluitopties

Niet zeker welke methode bij jouw behoeften past? Hier is een snelle vergelijking:

Voor de meeste websites biedt de iframe-insluiting de beste gebruikerservaring. Gebruik de klikbare afbeelding wanneer ruimte beperkt is of wanneer je insluit in omgevingen die geen iframes ondersteunen.

Veelvoorkomende probleemoplossingen

Loop je tegen problemen aan? Hier zijn snelle oplossingen voor de meest voorkomende issues:

• Flipbook laadt niet — Controleer of je insluit-URL correct is en de flipbook is gepubliceerd (niet in conceptmodus)
• Geblokkeerd door browser — Sommige browsers blokkeren gemengde content. Zorg ervoor dat je website HTTPS gebruikt als je insluit-URL HTTPS is
• Ziet er klein uit op desktop — Stel width="100%" in en verhoog de height-waarde, of gebruik de responsieve wrapper-techniek hierboven
• Afgesneden op mobiel — Gebruik de beeldverhoudingwrapper in plaats van vaste pixelafmetingen
• Geblokkeerd op een andere website — Als je domeinwhitelisting hebt ingeschakeld, voeg dan het nieuwe domein toe aan je goedgekeurde lijst

Begin met het insluiten van je flipbooks

Een flipbook op je website insluiten kost minder dan een minuut met FlipLink. Upload je PDF, pak de iframe-code en plak het op je website — klaar.

Of je nu een productshowcase, een digitaal tijdschriftarchief of een interactief bedrijfsrapport bouwt, insluiten houdt je publiek betrokken en je content centraal.

Maak je gratis FlipLink-account aan en begin vandaag nog met het insluiten van interactieve flipbooks op je website. Heb je al content klaar? Bekijk onze prijsplannen — al vanaf slechts $129 voor levenslange toegang tot 100 actieve publicaties.