So betten Sie eine digitale Publikation auf der eigenen Website ein

Eine digitale Ausgabe zu veröffentlichen bedeutet zwei Entscheidungen, nicht eine: wie sie sich liest und wo sie lebt. Die meisten Tools beantworten die erste Frage brillant und treffen die zweite stillschweigend für Sie: Ihr Katalog landet auf einer Seite, die Ihnen nicht gehört, unter einem Branding, das nicht Ihres ist, mit einem Publikum, das Sie nicht in Rechnung stellen können.

Dieser Leitfaden widmet sich der zweiten Entscheidung: dem Reader auf der eigenen Website — und den wenigen Details, die einen sauberen Embed von einem unterscheiden, der auf dem Handy bricht, vom CMS blockiert wird oder an einem Dienstag einen 404 liefert, weil jemand eine Domain umbenannt hat.

Warum einbauen statt nur einen Link posten

Ein Link zu einer Hosting-Plattform ist ehrlich gesagt einfacher. Er kostet nichts und dauert zehn Sekunden. Einbetten kostet etwa zehn Minuten und bringt Ihnen zurück:

• Der Besuch. Der Traffic bleibt auf Ihrer URL — dort, wo auch Ihre Navigation, Ihr Anfrageformular und Ihre Produktbuttons leben. Ein Link schickt Leser dorthin, wo Sie nicht sind.
• Der Kontext. Ein Embed kann direkt unter der Produktbeschreibung stehen, zu der er gehört, zwischen zwei Artikeln oder auf der Projektseite eines Kunden.
• Die Präsentation. Breite, Höhe, umgebendes Layout, ob er über- oder unterhalb des Folds erscheint.

Eine ehrliche Anmerkung zur Suche: Inhalte innerhalb eines iframe werden nicht zuverlässig als Inhalt Ihrer Seite gewertet. Wenn Suchmaschinen Substanz sehen sollen, schreiben Sie einen richtigen Absatz und ein Inhaltsverzeichnis direkt in die Seite und lassen Sie den eingebetteten Reader das Erlebnis tragen. Betten Sie keine Publikation auf eine leere Seite ein und erwarten Sie Rankings.

Schritt 1: Embedding für diese Publikation aktivieren

Embedding ist üblicherweise eine Einstellung pro Publikation, nicht kontoweit — und das ist auch richtig so: Sie entscheiden Ausgabe für Ausgabe, was auf Ihrer Website erscheinen darf.

In Flipable ist es der Schalter Embed aktiviert auf der Katalog-Detailseite. Ist er aus, liefert die Embed-URL dieses Katalogs überall einen 404 — genau das Verhalten, das Sie wollen, solange eine Publikation unter Embargo steht oder eingestellt wurde.

Die Publikation muss außerdem fertig konvertiert sein. Ein Katalog, der noch verarbeitet wird oder fehlgeschlagen ist, wird nicht gerendert — Sie erhalten eine Hinweismeldung statt eines Readers.

Schritt 2: Die Host-Domain auf die Whitelist setzen

Bevor der Code funktioniert, muss die Domain registriert sein. Flipable führt pro Workspace eine Allowlist unter Einstellungen → Domains & Embed → Erlaubte Domains; ein iframe von einer Domain außerhalb dieser Liste wird abgelehnt.

Zwei Dinge sind über dieses Matching gut zu wissen:

• Eine Domain deckt alle ihre Subdomains ab. Wer example.com hinzufügt, erlaubt damit auch www.example.com, shop.example.com und staging.example.com. Für die meisten Websites heißt das: genau ein Eintrag genügt.
• Gefiltert wird nach der Root-Domain, nicht nach der vollständigen URL. blog.example.com und example.com sind derselbe Eintrag; example.net ist ein anderer. Eine Kampagnen-Microsite auf einer anderen Root-Domain braucht also ihren eigenen Eintrag.

Domain-Slots sind plangebunden: einer bei Free, Starter und Pro, zwei bei Growth, drei bei Business. Wenn Sie auf drei oder mehr unabhängigen Root-Domains veröffentlichen, planen Sie das, bevor Sie Kundenverträge unterschreiben — nicht danach.

Schritt 3: Den Embed-Code kopieren und als HTML einfügen

Die Detailseite jedes Katalogs liefert einen fertigen Schnipsel, sobald Embedding aktiviert ist und ein Token existiert:

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

Fügen Sie ihn an einer Stelle ein, die rohes HTML akzeptiert — nicht in ein Rich-Text-Feld:

• WordPress: Block „Individuelles HTML“
• Webflow: Element „Embed“
• Shopify: Abschnitt „Custom Liquid“
• Squarespace: Block „Code“
• Handgecodete Website: an beliebiger Stelle im Body

Wenn Ihr CMS sowohl einen „visuellen“ als auch einen „HTML“-Bearbeitungsmodus anbietet, nutzen Sie den HTML-Modus. Rich-Text-Editoren sind der häufigste Grund, warum Embeds still sterben: Sie verwandeln gern gerade Anführungszeichen in typografische, und der Browser liest dann Datenmüll.

Schritt 4: Die Höhe korrigieren, bevor jemand es am Handy öffnet

Dieser Schritt wird am häufigsten übersprungen — und er ist der einzige, den Leser bemerken.

Die eingebettete Seite füllt jede Höhe, die Sie ihr geben. Ein iframe mit height="600" bedeutet: Der Reader lebt in einem 600-Pixel-Fenster — auf dem Desktop angenehm, auf dem Handy wird daraus ein scrollbarer Kasten in Ihrer bereits scrollbaren Seite. Zwei konkurrierende Scrollbereiche auf einem Touchscreen sind eine wirklich schlechte Erfahrung; die Leute geben der Publikation die Schuld, nicht dem Container.

Ein robusterer Standard:

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

• clamp() gibt Handys ein nutzbares Fenster, lässt Desktops wachsen und verhindert, dass Tablets nur einen kurzen Streifen bekommen.
• frameborder ist veraltet; border:0 erledigt diese Aufgabe heute.
• Setzen Sie ein explizites title. Es ist der zugängliche Name des Frames — und kostet nichts.
• Für eine randvolle Landingpage funktioniert height:100vh — rechnen Sie aber mit einem sticky Header oder weichen Sie auf 100dvh aus, damit die Browserleiste des Handys nicht den unteren Rand des Readers frisst.

Sehen Sie sich das Ergebnis anschließend auf einem echten Handy an — im Hoch- und Querformat —, bevor Sie den Link an jemanden Wichtigen schicken.

Schritt 5: Entscheiden, wo auf der Seite er lädt

Ist die Publikation der Sinn der Seite, stellen Sie sie auf den ersten Bildschirm und lazy-loaden Sie sie nicht. Unterstützt sie nur die Seite — ein Datenblatt in einer langen Produktbeschreibung —, ergänzen Sie loading="lazy", damit Besucher, die nie so weit scrollen, sie nie laden.

Ein Umstand, den Sie kennen sollten: Aufrufe werden gezählt, wenn der Reader tatsächlich lädt. Ein Lazy-Embed unterhalb des Folds zeigt daher weniger Aufrufe als die Seite selbst, weil ein Teil der Besucher ihn nie erreicht. Das ist kein Fehler in der Zählung, sondern eine Beschreibung von Verhalten. Bewerten Sie die Leistung eines Embeds anhand der Scrolltiefe der Seite, auf der er lebt.

Was eine Publikation tatsächlich schützt

Drei Mechanismen — und es lohnt sich zu wissen, wie weit jeder einzelne geht:

• Eine nicht erratbare URL. Der Embed-Pfad trägt ein Token auf Workspace-Ebene. Niemand kann die Embed-Adresse eines Katalogs erraten; eine URL ist damit faktisch ein Geheimnis — behandeln Sie sie auch so und posten Sie sie nicht in öffentliche Foren.
• Eine Domain-Allowlist plus frame-ancestors. Nur Hosts auf der Whitelist dürfen die Publikation einrahmen; das wird dem Browser über eine Content-Security-Policy mitgeteilt, die aus Ihrer eigenen Liste erlaubter Domains gebaut wird — unautorisiertes Einbetten scheitert also, statt nur falsch auszusehen.
• Ein Kill-Switch pro Katalog. Wird das Embedding ausgeschaltet, brechen sofort alle Embeds dieser Publikation — wo auch immer sie stehen. Das ist Ihr Notausschalter.

Und nun die Grenze, klar gesagt: Eine Allowlist ist keine Paywall. Eine Embed-URL direkt in einem Browser-Tab zu öffnen — statt innerhalb eines iframe — ist erlaubt; die Domain-Prüfung regelt, wer Ihre Inhalte einrahmen darf, nicht wer sie lesen darf. Steht eine Publikation wirklich hinter einem Abo, schützen Sie die Seite, die den Embed enthält, mit Ihrer eigenen Authentifizierung. Die Aufgabe des Tools endet bei „wer darf das einrahmen“ — „wer darf das lesen“ ist Sache Ihrer Website.

Wenn es nicht funktioniert, prüfen Sie in dieser Reihenfolge

1. Embedding für diesen Katalog aus. Symptom: ein 404 im Frame. Mit Abstand die häufigste Ursache.
2. Die Host-Domain steht nicht auf der Whitelist. Lesen Sie die exakte Root-Domain in der Adressleiste Ihres Browsers auf der einbettenden Seite ab.
3. Falsche Katalog-ID oder ein Token aus einem anderen Workspace. Diese Zeichenketten sind lang und kryptisch — die Mitte davon zu kopieren ist leicht.
4. Konvertierung läuft noch oder ist fehlgeschlagen. Symptom: eine Hinweismeldung oder ein Fehlerbanner auf der Katalogseite.
5. Ihre eigene Website blockiert Frames. Ein striktes frame-src in Ihrer Content-Security-Policy — oder ein Security-Plugin, das dasselbe tut — blockiert fremde iframes, auch Ihren eigenen.
6. HTTPS-Diskrepanz. Einen HTTPS-Reader in eine HTTP-Seite einzubetten ist erlaubt; umgekehrt beginnen Browser zu murren. Reparieren Sie das Zertifikat.
7. Das CMS hat das Markup verstümmelt. Sehen Sie sich den Quelltext der Live-Seite an und prüfen Sie, ob die Attribute noch korrekt in Anführungszeichen stehen.

Checkliste vor dem Start

• Embedding aktiviert für genau diese Publikation
• Root-Domain auf der Whitelist (Subdomains kommen gratis mit)
• Schnipsel in einen HTML-Block eingefügt, nicht in ein Rich-Text-Feld
• title-Attribut am Frame gesetzt
• Höhe am Handy getestet — Hoch- und Querformat
• Embeds unterhalb des Folds auf loading="lazy"
• Seite enthält echten Text, wenn sie indexiert werden soll
• Analytics am nächsten Tag geprüft, nicht im nächsten Quartal

Probieren Sie es an einer Publikation

Am schnellsten finden Sie heraus, ob Embedding zu Ihrer Website passt, indem Sie ein einzelnes vorhandenes PDF durchspielen — ein Katalog, eine Domain, eine Seite, geprüft am Handy. Genau so ist der kostenlose Plan geschnitten: eine Publikation, 100 Seiten pro Katalog, eine Embed-Domain, mit einem kleinen „Powered by Flipable“-Badge am Reader. Das Badge ist unsere Werbung — deshalb ist der Plan so großzügig. Wenn das Badge für Ihre Kundenarbeit stört: Genau das entfernen die Bezahlpläne.