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

Embed-Widget Schnellstart

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 einmal irgendwo auf der Seite einbinden --> <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 einmal nach allen Containern laden --> <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:

  1. Dashboard: Öffnen Sie die Publikation und schauen Sie auf die URL in Ihrem Browser: https://app.zenflip.io/publications/your-slug-here

  2. 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