Wenn du ein Flipbook auf deiner Website einbettest, werden aus statischen PDFs interaktive Blätter-Erlebnisse, die Besucher deutlich länger bei der Stange halten. Dieser Artikel zeigt dir Schritt für Schritt, wie du deinen Einbettungscode holst, ihn in WordPress, Wix, Squarespace oder eine beliebige HTML-Seite einfügst, die Größe für Mobilgeräte anpasst, typische Probleme behebst und in wenigen Minuten live gehst.
Einen PDF-Download-Link in die Fußzeile einer Webseite zu stellen, ist keine Content-Strategie. Besucher übersehen ihn, mobile Browser gehen schlecht damit um, und du erfährst nicht, ob überhaupt jemand das Dokument gelesen hat. Ein Flipbook direkt auf deiner Seite einzubetten löst alle drei Probleme auf einmal. Aus einer passiven Datei wird ein lebendiges, interaktives Leseerlebnis, das auf deiner Website bleibt. Flipbooks AI macht den ganzen Prozess in wenigen Minuten möglich, ohne dass du eine einzige Zeile Code schreiben musst.
Dieser Artikel erklärt genau, wie der Einbettungscode funktioniert, zeigt dir Schritt für Schritt, wie du dein Flipbook erstellst und einbettest, wie das auf WordPress, Wix, Squarespace und benutzerdefinierten HTML-Seiten geht, stellt Tricks für responsive Größen vor, zeigt Anwendungsfälle aus der Praxis und behandelt die typischen Probleme, auf die Leute nach dem Einfügen des Codes stoßen.
Die meisten Website-Betreiber unterschätzen, wie viel Reibung ein PDF-Link erzeugt. Ein Besucher klickt auf den Link, wartet, bis der Browser einen Betrachter startet, bekommt vielleicht einen Download-Dialog statt einer Vorschau im Browser und muss sich dann durch eine völlig andere Oberfläche arbeiten, um den Inhalt zu lesen. Auf dem Smartphone ist das Erlebnis durchweg schlechter. Ein erheblicher Teil dieses Publikums schließt einfach den Tab.
Inhalte, die direkt auf der Seite stehen, statt eine eigene App oder einen Download zu brauchen, werden deutlich länger und gründlicher gelesen als verlinkte Dateien. Wenn jemand deine Website verlassen muss, um ein Dokument zu öffnen, gibst du die Kontrolle über das Erlebnis komplett ab. Außerdem verlierst du den Einblick in ihr Verhalten. Du kannst nicht sehen, ob sie eine Seite oder alle zwanzig gelesen haben, ob sie beim Preisteil stehen geblieben sind oder ob sie sofort wieder abgesprungen sind.
Jeder Besucher, der auf einen PDF-Link klickt und deine Seite verlässt, nimmt seine Sitzungsdaten, sein Scrollverhalten und seine Wahrscheinlichkeit, wiederzukommen, mit sich, und all das verschwindet aus deiner Analyse. Ein eingebettetes Flipbook hält ihn auf deiner Domain. Sein Verhalten lässt sich verfolgen. Wenn du bezahlten Traffic auf eine Landingpage leitest und diese Seite auf eine PDF-Broschüre verlinkt, ist jeder Klick auf dieses PDF ein verlorenes Conversion-Signal.
Ein eingebettetes Flipbook sitzt mitten im Layout deiner Seite. Der Besucher verlässt sie nie. Er blättert durch die Seiten, ohne Plug-in, App oder Download. Du kannst nachvollziehen, welche Seiten er erreicht hat, wie lange er auf ihnen war und ob er ein Lead-Formular abgeschickt hat. Diese Daten gibt es im Professional-Tarif, und sie verändern grundlegend, wie du die Leistung deiner Inhalte bewertest.
| Format | Mobiles Erlebnis | Analyse | Bleibt auf der Seite | Interaktiv |
|---|---|---|---|---|
| PDF-Download-Link | Schlecht | Keine | Nein | Nein |
| Eingebetteter PDF-Betrachter | Unterschiedlich | Keine | Ja | Nein |
| Eingebettetes Flipbook | Ausgezeichnet | Vollständig (Pro-Tarif) | Ja | Ja |
| Bildergalerie | Mittel | Teilweise | Ja | Eingeschränkt |
Wenn du ein Flipbook auf Flipbooks AI veröffentlichst, erzeugt die Plattform einen eigenen Einbettungscode für genau dieses Dokument. Der Code ist ein kurzer HTML-Block, den du einmal kopierst und dort einfügst, wo das Flipbook auf deiner Seite erscheinen soll.
Die gebräuchlichste Einbettungsart nutzt ein iframe-Element. Es erzeugt ein abgeschottetes Fenster in deiner Seite, das das Flipbook von den Servern von Flipbooks AI lädt. Deine Seite regelt das umliegende Layout, und das iframe übernimmt alles innerhalb des Betrachters. Der Code sieht so aus:
<iframe
src="https://flipbooksai.com/view/your-flipbook-id"
width="100%"
height="600"
frameborder="0"
allowfullscreen>
</iframe>
Mit width="100%" füllt das iframe seinen übergeordneten Container aus. Das ist für fast jedes Layout die richtige Voreinstellung. Der Wert von height ist das, was die meisten je nach konkretem Seitendesign und den Proportionen des Dokuments anpassen müssen.
Manche Plattformen und Sicherheitskonfigurationen blockieren rohe iframes in ihren Seiteneditoren, erlauben aber JavaScript-Einbettungen. Der Freigabebereich von Flipbooks AI bietet außerdem eine Version des Einbettungscodes mit Script-Tag, die den Betrachter dynamisch einfügt. Beide Varianten findest du im Freigabe-Bereich jedes Flipbooks. Blockiert dein CMS den iframe-Code, wechsle zur Script-Tag-Version.
💡 Teste die Einbettung direkt nach der Veröffentlichung auf einem echten Mobilgerät oder mit den Entwicklerwerkzeugen des Browsers. Was auf einem 1440px breiten Desktop richtig aussieht, kann auf einem 375px breiten Telefon überlaufen oder zusammenfallen, wenn der übergeordnete Container eine feste Pixelbreite hat.
Der folgende Ablauf nutzt Flipbooks AI. Vom PDF-Upload bis zur live eingebetteten Version dauert es weniger als fünf Minuten.
Gehe zu flipbooksai.com und erstelle ein Konto, falls du noch keins hast. Klicke im Dashboard auf Neues Flipbook und lade dein PDF hoch. Die Umwandlung läuft automatisch. Innerhalb von Sekunden hast du ein Flipbook mit Seitenumblättern und dem vollständigen Inhalt deines Dokuments.
Bevor du es einbettest, kannst du das Flipbook jetzt anpassen:
Keine dieser Anpassungen ist vor dem Einbetten nötig. Alles, was du hier änderst, erscheint automatisch auch in der live eingebetteten Version, selbst wenn der Einbettungscode schon auf deiner Seite steht.
Öffne im Flipbook-Editor den Tab Design. Dort stehen unter anderem diese Optionen zur Verfügung:
Hier aktivierst du auch Kontaktformulare, wenn du im Professional-Tarif bist. Das Formular erscheint, sobald die Leserin oder der Leser eine von dir festgelegte Seite erreicht. Es erfasst Name und E-Mail-Adresse und speichert die Antworten automatisch in deinem Analyse-Dashboard.
Öffne Freigabe über das Aktionsmenü deines Flipbooks. Wähle den Tab Einbetten. Dort siehst du den iframe-Code, der für genau dieses Dokument bereits erstellt wurde. Klicke auf Kopieren. Der vollständige Code liegt jetzt in deiner Zwischenablage und kann überall eingefügt werden.
Du kannst die Standardmaße direkt in diesem Bereich anpassen, bevor du kopierst, wenn du schon weißt, wie groß die Einbettung auf deiner Seite sein muss.
Öffne den Editor deiner Website, gehe zu der Seite, auf der das Flipbook erscheinen soll, und füge den Einbettungscode in einen HTML-Block, einen Bereich für benutzerdefinierten Code oder einen Texteditor im Quelltext- bzw. HTML-Modus ein. Speichere die Seite und veröffentliche sie. Das Flipbook ist live.
Derselbe Einbettungscode funktioniert auf jeder Plattform. Das Einzige, was sich unterscheidet, ist der Weg zum HTML-Editor.
WordPress nutzt standardmäßig den Gutenberg-Blockeditor. So bettest du ein Flipbook ein:
Wenn du den klassischen Editor nutzt, wechsle zum Tab Text (nicht Visuell) und füge den Code direkt in den Inhalt ein, genau an die Stelle, an der das Flipbook erscheinen soll.
✅ Nutze den Block Benutzerdefiniertes HTML, nicht den Block Einbetten. Der Einbetten-Block ist für Social-Media-URLs und Videodienste gedacht, nicht für benutzerdefinierten iframe-Code.
⚠️ Der kostenlose Tarif von Squarespace schränkt benutzerdefinierte Code-Blöcke ein. Wenn der Code-Block ausgegraut oder gesperrt ist, brauchst du einen Business-Tarif oder einen höheren, um ihn zu nutzen.
Ziehe in Webflow ein Embed-Element aus dem Komponenten-Panel auf deine Arbeitsfläche und füge den Code darin ein. Bei jeder benutzerdefinierten HTML-Seite fügst du den Schnipsel direkt in den <body> der Seite ein, dort, wo das Flipbook erscheinen soll. Auf beiden Plattformen ist keine weitere Konfiguration nötig.
| Plattform | Wo der HTML-Editor zu finden ist | Block- oder Elementtyp |
|---|---|---|
| WordPress | Gutenberg-Blockeditor | Block „Benutzerdefiniertes HTML“ |
| Wix | Hinzufügen-Panel, Bereich Einbetten | Widget „Benutzerdefinierte Einbettungen“ |
| Squarespace | Block-Menü im Abschnitt | Code-Block |
| Webflow | Komponenten-Panel | Embed-Element |
| Benutzerdefiniertes HTML | Seitenquelltext direkt | Innerhalb des body-Tags einfügen |
| Shopify | Theme-Code-Editor | Liquid-Abschnitt oder HTML-Block |
Die richtigen Maße zu treffen, ist der Punkt, an dem die meisten ersten Einbettungen schiefgehen. Das Flipbook lädt zwar korrekt, ist aber zu klein zum Lesen oder läuft auf dem Smartphone über den Rand.
width="100%" zu setzen ist fast immer die richtige Wahl. Das iframe füllt damit den Container aus, in dem es steht. So passt es sich automatisch an Seitenleisten, Abschnitte über die volle Breite und schmale Spalten auf dem Smartphone an.
Bei der Höhe ist es anders. Die Höhe skaliert bei einem iframe standardmäßig nicht automatisch mit. Eine feste Höhe wie height="600" funktioniert auf dem Desktop gut, kann aber auf kleinen Bildschirmen zu viel Leerraum lassen oder das Flipbook abschneiden. Die praktischen Optionen sind:
padding-bottom: 56.25% hat, und lege das iframe darin absolut auf die volle Fläche. So skaliert die Höhe bei jeder Bildschirmgröße proportional zur Breite.Für das zuverlässigste Verhalten auf Mobilgeräten verwende die Methode mit Seitenverhältnis-Padding:
<div style="position:relative; padding-bottom:56.25%; height:0; overflow:hidden;">
<iframe
src="https://flipbooksai.com/view/your-flipbook-id"
style="position:absolute; top:0; left:0; width:100%; height:100%;"
frameborder="0"
allowfullscreen>
</iframe>
</div>
Dieser Wrapper erzeugt einen 16:9-Betrachter, der sich bei jeder Bildschirmbreite von 320px bis 2560px perfekt anpasst.
Einbettungen funktionieren in manchen Zusammenhängen besser als in anderen. Hier sind die Anwendungsfälle, die durchweg die stärksten Ergebnisse liefern.
Händler betten saisonale Kataloge, Produkt-Lookbooks und Kollektionsbroschüren direkt auf Kategorieseiten oder Landingpages ein. Ein Besucher, der eine Möbelseite durchstöbert, kann die gesamte Frühjahrskollektion durchblättern, ohne die Produktseite zu verlassen. Der Kostenlose digitale Katalog-Ersteller und der Katalog-Flipbook-Ersteller von Flipbooks AI sind genau für diesen Ablauf gebaut, mit Vorlagen, die für Produktfotografie optimiert sind.
Ein PDF-Link zur Karte, der irgendwo in der Fußzeile versteckt ist, ist eine der häufigsten schlechten Entscheidungen im Webdesign für das Gastgewerbe. Wenn du die Karte direkt auf der Startseite oder einer eigenen Kartenseite einbettest, sehen Besucher sie in dem Moment, in dem sie ankommen, ohne weitere Klicks oder Downloads. Der Restaurantkarten-Flipbook-Ersteller und der Menü-Flipbook-Ersteller liefern Vorlagen, die um Food-Fotografie und klare Preislayouts herum gestaltet sind.
Designer, Fotografinnen und Modemarken betten Portfolio-Flipbooks und redaktionelle Lookbooks auf ihren Kontakt- oder Arbeitsseiten ein. Der interaktive Umblättereffekt lässt die Präsentation durchdacht und hochwertig wirken, was ein statisches Bildraster so nicht schafft. Der Interaktive Lookbook-Designer und Digitales Portfolio erstellen bieten fertige Vorlagen für Kreative.
Makler betten Objektbroschüren direkt auf den Objektseiten ein, damit Interessenten Grundrisse und Fotos durchblättern können, ohne etwas herunterzuladen. Marketingteams von Unternehmen betten Geschäftsberichte und Investorenpräsentationen auf ihren IR-Seiten ein. Das wirkt professioneller als ein PDF-Link. Der Immobilienbroschüren-Ersteller und der Interaktive Geschäftsbericht-Ersteller erstellen veröffentlichungsfertige Flipbooks für beide Anwendungsfälle.
| Anwendungsfall | Empfohlenes Werkzeug | Beste Seite für die Einbettung |
|---|---|---|
| Produktkatalog | Kostenloser digitaler Katalog-Ersteller | Produkt- oder Shopseite |
| Restaurantkarte | Restaurantkarten-Flipbook-Ersteller | Kartenseite oder Startseite |
| Mode-Lookbook | Lookbook-Flipbook-Ersteller | Kollektionsseite |
| Kreatives Portfolio | Digitales Portfolio erstellen | Seite mit Arbeiten oder Über-uns-Seite |
| Immobilienbroschüre | Immobilienbroschüren-Ersteller | Seite des Objekts |
| Geschäftsbericht | Interaktiver Geschäftsbericht-Ersteller | Seite für Investor Relations |
| Event-Programm | Event-Programm-Flipbook-Ersteller | Seite mit Event-Details |
| Schulungshandbuch | Schulungshandbuch-Flipbook | Ressourcen- oder HR-Seite |
Die häufigste Ursache ist ein Mixed-Content-Fehler. Läuft deine Seite über HTTPS, die Einbettungs-URL beginnt aber mit HTTP, blockiert der Browser sie stillschweigend, ohne sichtbare Fehlermeldung. Alle Einbettungs-URLs von Flipbooks AI nutzen HTTPS. Das Problem tritt nur auf, wenn du das src-Attribut nach dem Kopieren manuell geändert hast. Prüfe noch einmal, ob die URL mit https:// beginnt.
Eine zweite häufige Ursache ist eine iframe-Blockade durch ein Sicherheits-Plug-in für WordPress. Plug-ins wie Wordfence oder iThemes Security können iframes von externen Quellen standardmäßig einschränken. Prüfe deine Content-Security-Policy-Einstellungen oder nimm Flipbooks AI im Konfigurationsbereich deines Plug-ins als vertrauenswürdige Quelle auf.
Sieht die Einbettung auf dem Desktop richtig aus, auf dem Smartphone aber kaputt, hat der übergeordnete Container wahrscheinlich eine feste Pixelbreite. Öffne die Entwicklerwerkzeuge deines Browsers, prüfe das Element, das das iframe umschließt, und ändere seine Breite von einem festen Pixelwert auf 100%. Bestätige danach, dass das iframe selbst ebenfalls width="100%" hat.
💡 Nutze die responsive Ansicht der Entwicklerwerkzeuge deines Browsers, um Smartphone-Bildschirme zu simulieren, bevor du veröffentlichst. Das dauert dreißig Sekunden und erkennt Größenprobleme sofort.
Das Attribut frameborder="0" im iframe entfernt den standardmäßigen Browserrahmen. Wenn um die Einbettung trotzdem Abstand bleibt, liegt das meist an Margin oder Padding, das im CSS deiner Seite auf dem übergeordneten Container gesetzt ist. Identifiziere das Element mit den Entwicklerwerkzeugen und setze darauf direkt margin: 0; padding: 0;.
Die Einbettung ist der letzte Schritt, aber die Plattform gibt dir viel Kontrolle darüber, was im Betrachter passiert, sobald das Flipbook auf deiner Seite live ist.
| Funktion | Free-Tarif | Standard-Tarif | Professional-Tarif |
|---|---|---|---|
| Flipbooks pro Monat | Begrenzt | Unbegrenzt | Unbegrenzt |
| Wasserzeichen im Betrachter | Ja | Nein | Nein |
| Individuelles Branding | Nein | Ja | Ja |
| Passwortschutz | Nein | Ja | Ja |
| Einbetten auf der Website | Ja | Ja | Ja |
| Analyse | Nein | Einfach | Vollständig |
| Kontaktformulare | Nein | Nein | Ja |
| Offline-Downloads | Nein | Nein | Ja |
| Video und Audio im Flipbook | Nein | Ja | Ja |
| Responsiver Betrachter für Mobilgeräte | Ja | Ja | Ja |
Alle Tarife unterstützen die Einbettung auf deiner Website. Der Unterschied liegt darin, wie das Erlebnis aussieht und welche Daten du daraus sammelst. Der Standard-Tarif entfernt die Wasserzeichen und ergänzt das volle Branding. Der Professional-Tarif bringt das Analyse-Dashboard und die Kontaktformulare dazu, die dein eingebettetes Flipbook von einer statischen Anzeige in einen messbaren Conversion-Baustein verwandeln.
Den vollständigen Überblick und den passenden Tarif findest du unter flipbooksai.com/pricing.
Ein Flipbook einzubetten ist eine der schnellsten Änderungen mit der größten Wirkung auf einer inhaltsreichen Seite. Die Einrichtung dauert ein paar Minuten, das Ergebnis funktioniert auf jedem Gerät und jeder Plattform, und das Besuchererlebnis ist deutlich besser als bei einem PDF-Link.
Kostenlos loslegen auf Flipbooks AI, lade dein erstes PDF hoch und bette es noch heute auf deiner Seite ein. Wenn du schon einen bestimmten Anwendungsfall im Kopf hast, durchstöbere das vollständige Werkzeugverzeichnis und finde die Vorlage, die zu deinem Inhaltstyp passt. Wenn du bereit bist, Analyse, Kontaktgenerierung und individuelles Branding hinzuzufügen, vergleiche die Tarife und wähle den, der zu deinen Zielen passt.
Wähle deine Sprache
