Embed-Widget Schnellstart

Fügen Sie interaktive Flipbook-Publikationen mit einem einzigen Script-Tag zu jeder Website hinzu. Behandelt grundlegende Einbettung, Datenattribute und Fehlerbehebung häufiger Probleme.

On this page

Methode 1: Script-Tag (Einfachste Variante)
Methode 2: Div-Container
Datenattribute
Häufige Beispiele
Blog-Beitrag-Einbettung
Ganzseitige Einbettung
Responsive Einbettung
Auto-Flip-Präsentation
Mehrere Publikationen auf einer Seite
Ihren Publikations-Slug finden
Fehlerbehebung
Die Einbettung erscheint nicht
CORS-Fehler in der Konsole
Content Security Policy (CSP) blockiert das Script
Die Einbettung erscheint, aber Seiten laden nicht
Einbettungshöhe passt nicht zum Inhalt
Nächste Schritte

Das ZenFlip Embed-Widget ermöglicht es Ihnen, interaktive Flipbook-Publikationen mit minimalem Code zu jeder Website hinzuzufügen. Das Widget erstellt einen responsiven iFrame, der den ZenFlip-Viewer mit Ihrer Publikation lädt.

Methode 1: Script-Tag (Einfachste Variante)

Fügen Sie einen einzelnen Script-Tag dort ein, wo das Flipbook erscheinen soll. Das Widget rendert die Publikation direkt nach dem Script-Element.

`html <script src="https://app.zenflip.io/embed.js" data-pub="your-publication-slug" data-width="100%" data-height="600"> </script> `

Das ist alles, was Sie brauchen. Das Embed-Widget initialisiert sich automatisch beim Laden der Seite und fügt einen iFrame mit Ihrer Publikation ein.

Methode 2: Div-Container

Für mehr Kontrolle über die Platzierung verwenden Sie ein div-Element mit der Klasse zenflip-embed und binden das Embed-Script separat ein. Dies ist der empfohlene Ansatz, wenn Sie mehrere Publikationen auf einer Seite haben.

`html <div class="zenflip-embed" data-pub="your-publication-slug" data-width="100%" data-height="600"> </div>

<script src="https://app.zenflip.io/embed.js"></script> `

Das Script durchsucht die Seite nach allen Elementen mit der Klasse zenflip-embed und initialisiert jedes einzelne.

Datenattribute

Konfigurieren Sie die Einbettung mithilfe von HTML-Datenattributen:

Attribut	Standard	Beschreibung
`data-pub`	Erforderlich	Publikations-Slug (aus der Publikations-URL)
`data-width`	`100%`	Breite der Einbettung (CSS-Wert: `100%`, `800px`, `50vw`)
`data-height`	`600`	Höhe der Einbettung (Zahl in Pixeln oder CSS-Wert)
`data-auto-flip`	`false`	Automatisches Seitenblättern in zeitgesteuertem Intervall
`data-start-page`	`1`	Seitennummer bei initialem Laden
`data-base-url`	Auto	Basis-URL des Viewers überschreiben (erweitert)

Numerische Höhenwerte werden als Pixel interpretiert. Sie können auch CSS-Einheiten wie 80vh oder 500px verwenden.

Häufige Beispiele

Blog-Beitrag-Einbettung

Eine kompakte Einbettung, die sich für Artikelinhalte eignet:

`html <div class="zenflip-embed" data-pub="quarterly-report-q1-2026" data-width="100%" data-height="500"> </div> `

Ganzseitige Einbettung

Füllen Sie den gesamten Viewport mit dem Flipbook:

`html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Product Catalog</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; } body { width: 100vw; height: 100vh; overflow: hidden; } .zenflip-embed { width: 100%; height: 100vh; } </style> </head> <body> <div class="zenflip-embed" data-pub="product-catalog-2026" data-width="100%" data-height="100vh"> </div> <script src="https://app.zenflip.io/embed.js"></script> </body> </html> `

Responsive Einbettung

Erstellen Sie eine responsive Einbettung, die sich an die Containerbreite anpasst:

`html <div style="max-width: 960px; margin: 0 auto;"> <div class="zenflip-embed" data-pub="company-brochure" data-width="100%" data-height="700"> </div> </div> <script src="https://app.zenflip.io/embed.js"></script> `

Das Embed-Widget setzt immer max-width: 100% auf seinen Wrapper, sodass es sich natürlich in jeden Container einfügt, ohne horizontalen Überlauf.

Auto-Flip-Präsentation

Auf einer bestimmten Seite starten mit aktiviertem automatischem Blättern (nützlich für Kiosk-Displays oder Präsentationen):

`html <script src="https://app.zenflip.io/embed.js" data-pub="investor-deck" data-width="100%" data-height="700" data-auto-flip="true" data-start-page="1"> </script> `

Mehrere Publikationen auf einer Seite

Verwenden Sie die Div-Methode, wenn Sie mehr als eine Publikation einbetten:

`html <h2>Produktkatalog</h2> <div class="zenflip-embed" data-pub="product-catalog-2026" data-width="100%" data-height="500"> </div>

<h2>Geschäftsbericht</h2> <div class="zenflip-embed" data-pub="annual-report-2025" data-width="100%" data-height="500"> </div>

<script src="https://app.zenflip.io/embed.js"></script> `

Ihren Publikations-Slug finden

Der Publikations-Slug ist die URL-freundliche Kennung, die in der Publikations-URL sichtbar ist. Sie finden ihn an zwei Stellen:

Dashboard: Öffnen Sie die Publikation und schauen Sie auf die URL in Ihrem Browser: https://app.zenflip.io/publications/your-slug-here
API: Das Feld slug im Publikationsobjekt, das von GET /publications zurückgegeben wird

Fehlerbehebung

Die Einbettung erscheint nicht

Überprüfen Sie, ob das data-pub-Attribut mit einem vorhandenen, veröffentlichten Publikations-Slug übereinstimmt.
Prüfen Sie die Browser-Konsole auf Fehler. Ein fehlender Slug erzeugt die Warnung: [ZenFlip] Missing data-pub attribute. Skipping embed.
Bestätigen Sie, dass der Publikationsstatus published ist (Entwürfe sind über den öffentlichen Viewer nicht zugänglich).

CORS-Fehler in der Konsole

Wenn Sie Cross-Origin Resource Sharing (CORS)-Fehler sehen, liegt das Problem meist an Ihren Content Security Policy (CSP)-Headern. Fügen Sie die ZenFlip-Domain zu Ihrer CSP-frame-src-Direktive hinzu:

` Content-Security-Policy: frame-src 'self' https://app.zenflip.io; `

Content Security Policy (CSP) blockiert das Script

Wenn Ihre Website strenge CSP-Header verwendet, müssen Sie das Embed-Script erlauben:

` Content-Security-Policy: script-src 'self' https://app.zenflip.io; frame-src 'self' https://app.zenflip.io; `

Die Einbettung erscheint, aber Seiten laden nicht

Die Publikation befindet sich möglicherweise noch in der Konvertierung. Die PDF-Konvertierung läuft nach dem Upload asynchron und kann je nach Seitenzahl einige Sekunden bis einige Minuten dauern.
Wenn die Publikation private Zugriff oder Passwortschutz verwendet, gibt der öffentliche Viewer-Endpunkt keine Seitendaten zurück. Setzen Sie die Sichtbarkeit für Einbettungen auf public.

Einbettungshöhe passt nicht zum Inhalt

Das Embed-Widget verwendet eine feste Höhe basierend auf dem data-height-Attribut. Wenn Seiten abgeschnitten erscheinen, erhöhen Sie den Höhenwert. Für einen dynamischeren Ansatz verwenden Sie CSS-Viewport-Einheiten wie 80vh, um die Höhe relativ zum Browserfenster zu gestalten.

Nächste Schritte

[Erweiterte Einbettungsoptionen](/docs/embed-advanced) --- Programmatische API, SPA-Integration, Ereignisbehandlung und benutzerdefiniertes Styling.
[Publications API](/docs/publications-api) --- Publikationen programmatisch verwalten und Sichtbarkeit steuern.

← Previous

Erweiterte Einbettungsoptionen