Anleitung, Flipbooks, WebsiteSo betten Sie ein Flipbook auf Ihrer Website ein

Von: Robert Soares     |     Jan 31, 2026

Drei Wege, ein Flipbook auf Ihrer Website zu platzieren

Sie haben ein Flipbook erstellt. Jetzt soll es auf Ihre Website. Dafür gibt es drei Ansätze. Welcher der richtige ist, hängt davon ab, wie viel Kontrolle Sie benötigen.

1. iFrame-Embed – am einfachsten. Funktioniert überall.
2. JavaScript-Embed – standardmäßig responsiv. Mehr Kontrolle.
3. Direktlink – ganz ohne Code, nur eine URL.

Jeder Ansatz hat Vor- und Nachteile. Der Punkt, der viele überrascht? Die mobile Darstellung. Eine Einbettung, die auf dem Laptop perfekt aussieht, kann auf dem Smartphone völlig auseinanderfallen. Dazu gleich mehr.

Technisch betrachtet ist das normales Einbetten von Webinhalten: Das Verhalten von iframe beschreibt die iFrame-Referenz von MDN, für die Bedienbarkeit per Touch gilt die WCAG-Empfehlung zur Mindestgröße von Bedienelementen.

Methode 1: iFrame-Embed (am einfachsten)

Ein iFrame ist ein Fenster zu einer anderen Webseite. Sie fügen ein paar Codezeilen ein, und Ihr Flipbook erscheint.

Einbettungscode abrufen

Öffnen Sie Ihr Flipbook in Flipbooker und klicken Sie auf „Teilen“. Wechseln Sie zum Tab „Einbetten“. Dort sehen Sie Code wie diesen:

<iframe
  src="YOUR_FLIPBOOK_URL"
  width="100%"
  height="600"
  frameborder="0"
  allowfullscreen>
</iframe>

In Ihre Website einfügen

Suchen Sie auf Ihrer Website die Stelle, an der das Flipbook erscheinen soll. In den meisten Page-Buildern fügen Sie dort einen Block für „HTML“ oder „Benutzerdefinierten Code“ ein. Fügen Sie den Code ein, speichern Sie und prüfen Sie die Vorschau.

Abmessungen anpassen

Die Standardeinstellung beträgt 100 % Breite (füllt den Container) und 600 px Höhe. Passen Sie die Werte nach Bedarf an:

• Volle Breite, höher: height="800"
• Feste Größe: width="800" height="600"
• Ganze Seite: width="100%" height="100vh"

Vorteile: Funktioniert überall. Keine Abhängigkeiten. Einfach. Nachteile: Feste Abmessungen können auf Mobilgeräten problematisch sein. Mehr dazu weiter unten.

Methode 2: JavaScript-Embed (responsiv)

Das JavaScript-Embed bietet mehr Kontrolle und ein besseres responsives Verhalten. Falls Sie schon einmal mit einem iFrame gekämpft haben, das auf dem Desktop gut und auf dem Smartphone schrecklich aussieht: Das ist die Lösung.

JavaScript-Code abrufen

Wählen Sie in Flipbooker unter Teilen > Einbetten „JavaScript“ statt „iFrame“. Sie sehen dann:

<div id="flipbooker-embed-abc123"></div>
<script src="YOUR_EMBED_SCRIPT_URL"></script>
<script>
  Flipbooker.embed({
    container: '#flipbooker-embed-abc123',
    flipbook: 'abc123',
    responsive: true
  });
</script>

In Ihre Seite einfügen

Fügen Sie diesen Code dort ein, wo das Flipbook erscheinen soll. Das <div> ist der Container, die Skripte erledigen den Rest.

Optionen konfigurieren

Das JavaScript-Embed unterstützt verschiedene Optionen:

Flipbooker.embed({
  container: '#flipbooker-embed-abc123',
  flipbook: 'abc123',
  responsive: true,
  minHeight: 400,
  maxHeight: 800,
  startPage: 1,
  showToolbar: true
});

Vorteile: Standardmäßig responsiv. Mehr Kontrolle. Besseres Verhalten auf Mobilgeräten. Nachteile: Etwas komplexer. JavaScript muss aktiviert sein.

Methode 3: Direktlink

Manchmal ist keine Einbettung nötig. Schicken Sie Besucher einfach direkt auf die Flipbook-Seite.

Wann Direktlinks sinnvoller sind

• E-Mail-Kampagnen (Einbettungen funktionieren in E-Mails nicht)
• Social-Media-Beiträge
• QR-Codes auf Drucksachen
• Alle Situationen, in denen Ihr CMS eigenen Code blockiert

Link abrufen

Klicken Sie in Flipbooker auf „Teilen“ und kopieren Sie die direkte URL:

YOUR_FLIPBOOK_URL

Verwenden Sie sie in E-Mails, Social-Media-Posts oder überall dort, wo Sie Links teilen.

Vorteile: Funktioniert überall. Kein Code nötig. Vollbild-Erlebnis. Nachteile: Leser verlassen Ihre Website.

Anleitungen für einzelne Plattformen

WordPress

Block-Editor (Gutenberg): Fügen Sie einen Block „Individuelles HTML“ hinzu, setzen Sie den Einbettungscode ein, prüfen Sie die Vorschau und veröffentlichen Sie die Seite.

Klassischer Editor: Wechseln Sie zum Tab „Text“ (nicht „Visuell“), fügen Sie den Einbettungscode ein und wechseln Sie zurück zu „Visuell“, um die Darstellung zu prüfen.

Elementor: Fügen Sie ein HTML-Widget hinzu, setzen Sie den Einbettungscode ein und passen Sie die Widget-Größe an.

Squarespace

Fügen Sie Ihrer Seite einen „Code“-Block hinzu und setzen Sie den Einbettungscode ein. Für die volle Breite platzieren Sie ihn in einem Abschnitt über die gesamte Breite.

Squarespace-Tipp: Die responsive Darstellung kann empfindlich sein. In der Praxis können iFrame-Embeds, die auf dem Desktop gut aussehen, bei manchen mobilen Templates trotzdem das Layout sprengen. Testen Sie vor der Veröffentlichung auf einem echten Smartphone.

Wix

Fügen Sie ein Element „Einbetten“ oder „HTML-iFrame“ hinzu, wählen Sie „Code“ und setzen Sie Ihr Embed ein. Passen Sie die Größe des Elements an Ihr Layout an.

Wix-Tipp: Möglicherweise müssen Sie feste Pixelmaße statt Prozentwerten verwenden.

Webflow

Fügen Sie ein „Embed“-Element hinzu, setzen Sie den Code ein und gestalten Sie den Container für eine responsive Darstellung.

Webflow-Tipp: Mit dem JavaScript-Embed haben Sie mehr Kontrolle über die responsive Darstellung. Beiträge im Webflow-Forum zeigen, dass iFrame-Embeds Inhalte auf Mobilgeräten aus dem sichtbaren Bereich schieben können.

Shopify

Bearbeiten Sie Ihre Seite oder Ihr Produkt. Klicken Sie im Inhaltseditor auf „HTML anzeigen“ oder <>. Fügen Sie den Einbettungscode ein und speichern Sie.

Für die Integration in das Theme bearbeiten Sie die Theme-Dateien und fügen den Code einem Abschnitt hinzu.

Das Problem auf Mobilgeräten (und wie Sie es lösen)

Was die meisten überrascht: Ein iFrame-Embed, das auf Ihrem Laptop perfekt aussieht, kann auf einem Mobilgerät völlig kaputtgehen. Das ist kein Fehler Ihres Flipbooks. So funktionieren iFrames.

Wie das Engineering-Team von Embeddable erklärt: „Mobile Browser machen es noch schwieriger, indem sie in den Frame hineinzoomen und das Scrollen mit Trägheit deaktivieren.“ Das Ergebnis? Ihre Nutzer sehen ein winziges, vergrößertes Rechteck anstelle eines Flipbooks. Oder doppelte Scrollbalken.

Die responsive Lösung für iFrames

Umschließen Sie Ihr iFrame mit einem responsiven Container:

<div style="position: relative; padding-bottom: 75%; height: 0; overflow: hidden;">
  <iframe
    src="YOUR_FLIPBOOK_URL"
    style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"
    frameborder="0"
    allowfullscreen>
  </iframe>
</div>

padding-bottom: 75% erzeugt ein Seitenverhältnis von 4:3. Passen Sie es an Ihren Bedarf an:

• 16:9 → padding-bottom: 56.25%
• 4:3 → padding-bottom: 75%
• Quadratisch → padding-bottom: 100%

Oder verwenden Sie einfach das JavaScript-Embed

Setzen Sie responsive: true; die Größe wird dann automatisch angepasst. Kein umschließendes div, keine Berechnung des Seitenverhältnisses.

Flipbooker.embed({
  container: '#flipbooker-embed',
  flipbook: 'abc123',
  responsive: true,
  minHeight: 400
});

Wenn Ihre Website auf WordPress, Squarespace oder einer anderen Plattform läuft, auf der Sie CSS nicht problemlos kontrollieren können, ist das die sicherere Wahl.

Häufige Probleme und Lösungen

Flipbook wird nicht geladen

• Prüfen Sie, ob die URL korrekt ist
• Stellen Sie sicher, dass das Flipbook veröffentlicht ist (kein Entwurf)
• Prüfen Sie, ob Ihre Website iFrames zulässt

Falsche Größe oder abgeschnittene Darstellung

• Passen Sie Breite und Höhe an
• Verwenden Sie die Technik mit dem responsiven Container
• Testen Sie auf echten Mobilgeräten, nicht nur durch Verkleinern des Browserfensters

Scrollbalken werden angezeigt

• Ergänzen Sie im iFrame frameborder="0" und scrolling="no"
• Prüfen Sie, ob Ihr Container die Größe begrenzt

Wird auf Mobilgeräten nicht geladen

• Manche mobilen Browser schränken iFrames in bestimmten Kontexten ein
• Probieren Sie stattdessen das JavaScript-Embed
• Bieten Sie als Fallback einen Direktlink an

Der häufigste Fehler? Das Dokument einbetten, auf dem Laptop prüfen und die Sache abhaken. Nehmen Sie Ihr Smartphone zur Hand. Öffnen Sie die Seite. Wenn das Flipbook dort falsch aussieht, sehen Ihre Besucher genau dasselbe. Das JavaScript-Embed löst den Großteil davon automatisch. Trotzdem dauert ein kurzer Test auf dem Smartphone nur zehn Sekunden – und verhindert das stille Problem, dass die Hälfte Ihrer Zielgruppe eine kaputte Seite sieht.