So betten Sie Flipbooks auf Ihrer Website ein

So betten Sie Flipbooks auf Ihrer Website ein

Einen Flipbook-Link zu teilen ist die einfachste Verteilungsmethode, aber ein Flipbook direkt auf Ihrer Website einzubetten gibt Ihnen mehr Kontrolle über das Leseerlebnis. Ein eingebettetes Flipbook lebt innerhalb Ihrer Seite, umgeben von Ihrem Branding und Ihren Inhalten, und schafft ein nahtloses Erlebnis für Besucher.

Dieser Leitfaden behandelt jede Einbettungsoption, vom schnellen iframe bis zur erweiterten JavaScript-Integration.

Option 1: Die schnelle Einbettung (iframe)

Der schnellste Weg, ein Flipbook einzubetten, ist ein iframe. ZenFlip stellt für jedes veröffentlichte Flipbook einen gebrauchsfertigen Einbettungscode bereit.

Ihren Einbettungscode erhalten

1. Öffnen Sie die Publikation in Ihrem ZenFlip-Dashboard

2. Klicken Sie oben rechts auf Teilen

3. Wählen Sie den Tab Einbetten

4. Kopieren Sie den Einbettungscode

Der Code sieht so aus:

`html <iframe src="https://zenflip.io/view/your-publication-id" width="100%" height="600" frameborder="0" allowfullscreen title="Your Publication Title"

`

Fügen Sie diesen in jede HTML-Seite, CMS-Editor oder Website-Builder ein, der benutzerdefiniertes HTML unterstützt.

Responsive gestalten

Eine feste Höhe funktioniert für einfache Anwendungsfälle, aber eine responsive Einbettung passt sich dem Bildschirm des Lesers an. Umschließen Sie den iframe mit einem Container mit einem prozentualen Seitenverhältnis:

`html <div style="position: relative; width: 100%; padding-bottom: 75%; overflow: hidden;"> <iframe src="https://zenflip.io/view/your-publication-id" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none;" allowfullscreen title="Your Publication Title" ></iframe> </div> `

Das padding-bottom: 75% erzeugt ein 4:3-Seitenverhältnis. Ändern Sie auf 56.25% für 16:9 oder 100% für ein quadratisches Format.

Option 2: Das JavaScript-Widget

Für mehr Kontrolle verwenden Sie das ZenFlip JavaScript-Embed-Widget. Diese Methode bietet Zugang zu Anpassungsoptionen und Event-Callbacks.

Grundkonfiguration

Fügen Sie das ZenFlip Embed-Skript zu Ihrer Seite hinzu:

`html <div id="zenflip-embed"></div> <script src="https://zenflip.io/embed.js"></script> <script> ZenFlip.embed({ target: '#zenflip-embed', publication: 'your-publication-id', }); </script> `

Konfigurationsoptionen

Die Embed-Funktion akzeptiert diese Optionen:

Events abhören

Das JavaScript-Widget feuert Events, die Sie nutzen können, um Aktionen auf Ihrer Seite auszulösen:

`javascript ZenFlip.embed({ target: '#zenflip-embed', publication: 'your-publication-id', onPageChange: function(page) { console.log('Reader is on page', page); }, onReady: function() { console.log('Flipbook loaded'); }, }); `

Dies ist nützlich für das Tracking benutzerdefinierter Analytics-Events, das Anzeigen kontextbezogener Inhalte neben bestimmten Seiten oder das Auslösen von Animationen, wenn der Leser einen bestimmten Punkt in der Publikation erreicht.

Plattformspezifische Anleitungen

WordPress

1. Erstellen oder bearbeiten Sie eine Seite in WordPress

2. Fügen Sie einen Benutzerdefiniertes HTML-Block hinzu

3. Fügen Sie Ihren ZenFlip-Einbettungscode ein (iframe oder JavaScript)

4. Vorschau anzeigen und veröffentlichen

Wenn Ihr WordPress-Theme iframes einschränkt, verwenden Sie stattdessen die JavaScript-Einbettungsmethode.

Webflow

1. Ziehen Sie ein Embed-Element auf Ihre Seite im Webflow Designer

2. Fügen Sie den iframe-Code ein

3. Passen Sie die Elementgröße im Webflow-Layout-Panel an

4. Veröffentlichen Sie Ihre Website

Shopify

1. Gehen Sie zu der Seite oder dem Produkt, wo Sie das Flipbook möchten

2. Wechseln Sie zur HTML-Editor-Ansicht

3. Fügen Sie den Einbettungscode ein

4. Speichern

Für Shopify-Produktseiten erwägen Sie, Ihren Produktkatalog als Flipbook neben Ihren Standard-Produktfotos einzubetten. Das gibt Kunden ein reichhaltigeres Browsing-Erlebnis.

React / Next.js

Für React-Anwendungen verwenden Sie das JavaScript-Widget in einem useEffect-Hook:

`jsx import { useEffect, useRef } from 'react';

export default function FlipbookEmbed({ publicationId }) { const containerRef = useRef(null);

useEffect(() => { const script = document.createElement('script'); script.src = 'https://zenflip.io/embed.js'; script.onload = () => { window.ZenFlip.embed({ target: containerRef.current, publication: publicationId, }); }; document.body.appendChild(script); return () => document.body.removeChild(script); }, [publicationId]);

return <div ref={containerRef} style={{ height: 600 }} />; } `

Styling der Einbettung

Der Flipbook-Viewer erbt einige Styles von seinem Container. Sie können Folgendes steuern:

• Rahmenradius: Fügen Sie border-radius zum iframe oder Container für abgerundete Ecken hinzu

• Schatten: Ein dezenter Schatten hilft dem Flipbook, sich von der umgebenden Seite abzuheben

• Maximale Breite: Setzen Sie eine max-width auf den Container, um zu verhindern, dass das Flipbook auf großen Bildschirmen zu breit wird

`html <div style="max-width: 960px; margin: 0 auto; border-radius: 12px; overflow: hidden; box-shadow: 0 4px 24px rgba(0,0,0,0.15);"> <iframe src="https://zenflip.io/view/your-publication-id" width="100%" height="600" style="border: none; display: block;" allowfullscreen title="Your Publication Title" ></iframe> </div> `

Performance-Überlegungen

Eingebettete Flipbooks laden asynchron und blockieren nicht das Rendern Ihrer Seite. Beachten Sie jedoch diese Punkte:

• Lazy Loading: Wenn das Flipbook unterhalb des sichtbaren Bereichs ist, fügen Sie loading="lazy" zum iframe hinzu, damit es erst geladen wird, wenn der Leser dorthin scrollt

• Einzelne Einbettung pro Seite: Mehrere Flipbooks auf derselben Seite werden unterstützt, aber jedes verbraucht Ressourcen. Für Seiten mit mehreren Publikationen erwägen Sie, stattdessen auf dedizierte Seiten zu verlinken

• Mobile Bandbreite: Der Viewer lädt optimierte Assets basierend auf dem Gerät des Lesers. Bei mobilen Verbindungen erhalten kleinere Viewports niedrigauflösendere Seitenbilder, um die Ladezeit zu verkürzen

Analytics und eingebettete Flipbooks

Eingebettete Flipbooks tracken Analytics identisch zu direkt aufgerufenen. Aufrufe, Lesetiefe, Seiten-Engagement und Lead-Erfassungen funktionieren alle gleich, unabhängig davon, wie der Leser auf die Publikation zugreift. Die verweisende Domain wird in Ihren Analytics aufgezeichnet, sodass Sie sehen können, welche Seiten auf Ihrer Website das meiste Flipbook-Engagement erzeugen.