Zo embed je een digitale publicatie op je eigen website

Een digitale editie publiceren zijn twee beslissingen, geen één: hoe hij gelezen wordt en waar hij leeft. De meeste tools antwoorden op de eerste met brille en beslissen de tweede stilzwijgend voor je: je catalogus belandt op een pagina die niet van jou is, onder een merk dat niet het jouwe is, voor een publiek dat je niet kunt factureren.

Deze gids gaat over de tweede beslissing: de reader binnen je eigen site plaatsen — en de paar details die een nette embed scheiden van eentje die op mobiel breekt, door je CMS geblokkeerd wordt, of op een dinsdag een 404 geeft omdat iemand een domein heeft hernoemd.

Waarom embedden in plaats van alleen een link publiceren

Een link naar een hostingplatform is eerlijk gezegd makkelijker. Hij kost niets en neemt tien seconden in beslag. Embedden kost zo'n tien minuten en geeft je terug:

• Het bezoek. Het verkeer blijft op jouw URL, waar ook je navigatie, je contactformulier en je productknoppen wonen. Een link stuurt lezers naar een plek waar jij niet bent.
• De context. Een embed kan direct onder de productpagina staan waartoe hij behoort, tussen twee artikelen, of binnen de pagina van een klantproject.
• De presentatie. Breedte, hoogte, omringende layout, of hij boven of onder de vouw verschijnt.

Een eerlijk voorbehoud over zoekmachines: content binnen een iframe wordt niet betrouwbaar behandeld als content van jouw pagina. Wil je dat zoekmachines substantie zien, schrijf dan een échte alinea en een inhoudsopgave direct op de pagina en laat de ingebedde reader de ervaring dragen. Plaats geen publicatie op een lege pagina en verwacht ranking.

Stap 1: embedding aanzetten voor die publicatie

Embedden is doorgaans een instelling per publicatie, niet per account — en dat is maar goed ook: jij bepaalt, editie voor editie, wat er op jouw site mag verschijnen.

Bij Flipable is dat de schakelaar Embed ingeschakeld op de catalogusdetailpagina. Wanneer hij uit staat, geeft de embed-URL van die catalogus overal een 404: precies het gedrag dat je wilt terwijl een publicatie onder embargo staat of is teruggetrokken.

De publicatie moet ook klaar zijn met converteren. Een catalogus die nog verwerkt wordt, of is mislukt, rendert niet — je ziet een wachtbericht in plaats van een reader.

Stap 2: het domein dat gaat hosten op de whitelist zetten

Voordat de code werkt, moet het domein geregistreerd staan. Flipable houdt per workspace een whitelist bij onder Instellingen → Domains & Embed → Toegestane domeinen, en een iframe van elk domein erbuiten wordt geweigerd.

Twee dingen die de moeite waard zijn te begrijpen over hoe de matching werkt:

• Eén domein dekt al zijn subdomeinen. example.com toevoegen autoriseert ook www.example.com, shop.example.com en staging.example.com. Voor de meeste sites betekent dat: precies één invoer nodig.
• De matching gaat over het hoofddomein, niet de volledige URL. blog.example.com en example.com zijn dezelfde invoer; example.net is een andere. Een campagnemicrosite op een andere root heeft dus een eigen invoer nodig.

Domeinslots zijn gelimiteerd per plan: één op Free, Starter en Pro, twee op Growth, drie op Business. Ga je op drie of meer losse hoofddomeinen publiceren, plan dat vóórdat je klantcontracten tekent — niet erna.

Stap 3: de embedcode kopiëren en als HTML plakken

De detailpagina van elke catalogus geeft je een kant-en-klaar snippet zodra embedden is ingeschakeld en er een token bestaat:

<iframe src="https://flipable.co/embed/{TOKEN}/{CATALOG_ID}"
        width="100%" height="600" frameborder="0" allowfullscreen></iframe>

Plak het in iets dat rauwe HTML accepteert, niet in een veld met opgemaakte tekst:

• WordPress: een blok Custom HTML (aangepaste HTML)
• Webflow: een Embed-element
• Shopify: een Custom Liquid-sectie
• Squarespace: een Code-blok
• Handgemaakte site: ergens in de body

Biedt je CMS zowel een "visuele" als een "HTML"-bewerkingsmodus, gebruik dan HTML. Rich-text-editors zijn de meest voorkomende manier waarop embeds stil sterven: ze zetten gewillig rechte aanhalingstekens om naar typografische, en de browser leest daarna rommel.

Stap 4: de hoogte fixen voordat iemand het op een telefoon opent

Dit is de stap die wordt overgeslagen — en het is wat lezers opmerken.

De ingebedde pagina vult de hoogte die je geeft. Een iframe met height="600" betekent dat de reader leeft binnen een venster van 600 pixels: comfortabel op desktop; op een telefoon wordt het een scrollbare doos binnen je pagina die al scrollt. Twee scrollgebieden die op een touchscreen om het scherm wedijveren is een genuïneerd slechte ervaring; mensen geven de publicatie de schuld, niet de container.

Een robuustere standaard:

<iframe src="https://flipable.co/embed/{TOKEN}/{CATALOG_ID}"
        title="Herfst-/wintercatalogus"
        style="width:100%;height:clamp(500px,75vh,900px);border:0"
        allowfullscreen></iframe>

• clamp() geeft telefoons een bruikbaar venster, laat desktop groeien en houdt tablets weg van een magere strook.
• frameborder is verouderd; border:0 is hoe je die klus tegenwoordig doet.
• Stel een expliciete title in. Het is de toegankelijke naam van het frame, en het kost niets.
• Voor een fullscreen landing werkt height:100vh — maar reken met een vaste header, of ga naar 100dvh zodat de balk van de mobiele browser niet de onderrand van de reader opeet.

Kijk daarna op een échte telefoon, in portret én landscape, voordat je de link naar iemand belangrijks stuurt.

Stap 5: beslissen waar hij op de pagina laadt

Als de publicatie de reden van de pagina is, zet hem dan op het eerste scherm en laad hem niet lazy. Ondersteunt hij de pagina — een technisch gegevensblad binnen een lange productbeschrijving — voeg dan loading="lazy" toe zodat wie nooit zo ver scrollt hem ook nooit downloadt.

Een consequentie om te kennen: views worden geteld wanneer de reader echt laadt. Een lazy embed onder de vouw toont minder views dan de pagina zelf, omdat een deel van de bezoekers er nooit is gekomen. Dat is geen telbug; het is een beschrijving van gedrag. Beoordeel de prestatie van een embed naar de scrolldiepte van de pagina waarop hij leeft.

Wat een publicatie werkelijk beschermt

Drie mechanismen — en het is de moeite waard precies te weten tot waar elk reikt:

• Een URL die niet te raden is. Het embed-pad draagt een token op workspareniveau. Niemand kan het embed-adres van een catalogus raden; een URL is in de praktijk een geheim — behandel het zo en plak het niet in openbare forums.
• Een domeinenlijst plus frame-ancestors. Alleen hosts op de whitelist mogen de publicatie framen; de browser weet dat via een Content-Security-Policy gebouwd uit jouw eigen lijst toegestane domeinen, zodat ongeautoriseerd embedden faalt in plaats van er alleen maar verkeerd uit te zien.
• Een uitschakelaar per catalogus. Embedden uitzetten breekt onmiddellijk elke embed van die publicatie, waar die ook staat. Dat is je noodknop.

En nu de grens, helder gezegd: een whitelist is geen paywall. De embed-URL direct in een browsertabblad openen, in plaats van binnen een iframe, is mogelijk — de domeincontrole gaat over wie je content mag framen, niet over wie hem mag lezen. Staat een publicatie echt achter een abonnement, beveilig dan de pagina met het embed met je eigen authenticatie. Het werk van de tool eindigt bij "wie mag dit framen"; "wie mag dit lezen" is het werk van je site.

Als het niet werkt, controleer in deze volgorde

1. Embed uit voor die catalogus. Symptoom: een 404 in het frame. Verreweg de meest voorkomende oorzaak.
2. Het hostende domein staat niet op de whitelist. Lees het exacte hoofddomein opnieuw in de adresbalk van de browser, op de pagina die embedt.
3. Verkeerd catalogus-ID of token gekopieerd uit een andere workspace. Het zijn lange, ondoorzichtige strings; het middenstuk plakken is makkelijk.
4. Conversie nog bezig, of mislukt. Symptoom: een wachtbericht of foutbanner op de cataloguspagina.
5. Je eigen site blokkeert frames. Een strenge frame-src in je eigen Content-Security-Policy, of een securityplug-in die hetzelfde doet, blokkeert iframes van derden — inclusief die van jou.
6. HTTPS-mismatch. Een HTTPS-reader embedden op een HTTP-pagina mag; andersom beginnen browsers te klagen. Fix het certificaat.
7. Het CMS heeft de markup verminkt. Bekijk de bron van de gepubliceerde pagina en controleer of de attributen nog netjes tussen aanhalingstekens staan.

Pre-flight checklist

• Embed aan voor die specifieke publicatie
• Hoofddomein op de whitelist (subdomeinen komen gratis mee)
• Snippet geplakt in een HTML-blok, niet in een rich-textveld
• title-attribuut op het frame gezet
• Hoogte getest op een telefoon, in portret en landscape
• Embeds onder de vouw met loading="lazy"
• De pagina bevat echte tekst als je die geïndexeerd wilt hebben
• Analytics de dag erna gecheckt, niet het kwartaal erna

Probeer het op een publicatie

De snelste manier om te ontdekken of embedden past bij je site is één bestaand PDF door het proces halen — een catalogus, een domein, een pagina, gecontroleerd op een telefoon. Dat is precies de vorm van het gratis plan: één publicatie, 100 pagina's per catalogus, één embeddomein, met een klein "Powered by Flipable"-badge op de reader. De badge is onze reclame — daarom is het plan zo ruim. Als de badge een probleem is voor je klantwerk, dan is dat precies wat de betaalde plannen weghalen.