> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://helpdesk.webmag.io/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# Projekte auf Ihrer Website einbetten

# Projekte auf Ihrer Website einbetten

Mit der Einbettungsfunktion können Sie Ihre Webmag-Projekte direkt auf Ihrer eigenen Website anzeigen. Besucher können so Ihre digitalen Publikationen direkt auf Ihrer Seite erleben, ohne diese verlassen zu müssen.

**Inhalt**

1. [Einbettungseinstellungen öffnen](#1-einbettungseinstellungen-offnen)
2. [Einfache Iframe-Einbettung](#2-einfache-iframe-einbettung)
3. [Interaktives Embed-Script erstellen](#3-interaktives-embed-script-erstellen)
4. [Darstellungsoptionen konfigurieren](#4-darstellungsoptionen-konfigurieren)
5. [Vorschaumodus wählen](#5-vorschaumodus-wahlen)
6. [Vorschau prüfen und Code kopieren](#6-vorschau-prufen-und-code-kopieren)
7. [Code in WordPress einfügen](#7-code-in-wordpress-einfugen)
8. [Code in Webflow einfügen](#8-code-in-webflow-einfugen)


# 1. Einbettungseinstellungen öffnen

Öffnen Sie Ihr Projekt und navigieren Sie zu den Projekteinstellungen. Wählen Sie den Tab **"Einbettung"** (Embedding). Hier finden Sie alle Optionen zur Konfiguration Ihres Embed-Codes.


# 2. Einfache Iframe-Einbettung

Für eine schnelle Einbettung ohne zusätzliche Funktionen können Sie den **Iframe-Link** verwenden. Dieser eignet sich, wenn Sie das Projekt ohne Klick-Interaktion direkt anzeigen möchten.

Kopieren Sie den Iframe-Link über das Kopier-Symbol rechts neben dem Textfeld.

**Beispiel:**
```
<iframe src="https://v2.webmag.io/embed/iframe/embed.html?id=123456789"></iframe>
```

| **Hinweis:** Der einfache Iframe zeigt das Projekt direkt an, bietet aber weniger Gestaltungsmöglichkeiten. Für eine ansprechendere Darstellung mit Vorschaubild und Animationen empfehlen wir das interaktive Embed-Script (siehe nächster Abschnitt).


# 3. Interaktives Embed-Script erstellen

Das Embed-Script zeigt zunächst eine attraktive Vorschau Ihres Projekts an. Besucher klicken auf diese Vorschau, um das vollständige Projekt zu öffnen – entweder in einem eleganten Modal-Fenster oder in einem neuen Tab.

Im Bereich **"Create your embed script"** konfigurieren Sie das Aussehen und Verhalten:

| Option | Beschreibung | Beispiel |
| ---- |
| **Link Text** | Text, der über der Vorschau angezeigt wird | "Click to read" |
| **Link Animation** | Animation des Link-Textes | Bounce Animation |
| **Link Color** | Farbe des Links und der Akzente | Rot (#7f0f0f) |
| **Display Mode** | Wie das Projekt geöffnet wird | Modal-Fenster oder neuer Tab |
| **Hover Animation** | Effekt beim Überfahren mit der Maus | Zoom oder Card-Effekt |


# 4. Darstellungsoptionen konfigurieren

Passen Sie die Größe des Embed-Bereichs an Ihre Website an:

**Embed Width**
Legt die Breite des Vorschaubereichs fest. Geben Sie einen Pixelwert ein (z.B. "500px") oder verwenden Sie "100%", damit sich das Embed automatisch an die Breite des umgebenden Containers anpasst.

**Max Modal Width / Max Modal Height**
Diese Werte begrenzen die maximale Größe des Modal-Fensters. Lassen Sie die Felder leer, wenn Sie keine Begrenzung wünschen.

**Embed Height**
Die Höhe des Vorschaubereichs in Pixeln (z.B. "500px"). Diese Option erscheint nur, wenn Sie den automatischen Vorschaumodus verwenden.



# 5. Vorschaumodus wählen

Sie haben zwei Möglichkeiten, wie die Vorschau Ihres Projekts dargestellt wird:

**Option A: Automatische Vorschau (Standard)**

Wenn die Option **"Eigenen Screenshot verwenden?"** deaktiviert ist, wird automatisch eine interaktive Vorschau aus den Projektdaten und Bildern erstellt. Diese Vorschau zeigt eine Live-Ansicht Ihres Projekts.

**Option B: Eigenes Vorschaubild**

Aktivieren Sie **"Eigenen Screenshot verwenden?"**, um ein eigenes Vorschaubild hochzuladen. Dies ist empfehlenswert wenn:

* Sie ein speziell gestaltetes Teaser-Bild verwenden möchten
* Die Ladezeit der Seite minimiert werden soll
* Das Design der Vorschau exakt zu Ihrer Website passen soll

Nach der Aktivierung können Sie über den Upload-Bereich ein eigenes Bild hochladen. Alternativ wird das automatisch generierte Cover-Bild Ihres Projekts verwendet.


# 6. Vorschau prüfen und Code kopieren

Im Bereich **"Preview"** sehen Sie eine Live-Vorschau, wie das Embed auf Ihrer Website aussehen wird. Prüfen Sie hier, ob alle Einstellungen Ihren Vorstellungen entsprechen.

Der fertige Code wird im Feld **"Dynamic Code"** angezeigt. Klicken Sie auf das **Kopier-Symbol** rechts neben dem Textfeld, um den Code in Ihre Zwischenablage zu kopieren.

| **Wichtig:** Kopieren Sie immer den gesamten Code inklusive des `<script>`-Tags am Ende. Das Script ist erforderlich, damit das Embed funktioniert.


# 7. Code in WordPress einfügen

**Mit dem Block-Editor (Gutenberg):**

1. Öffnen Sie die Seite oder den Beitrag, auf der das Projekt erscheinen soll
2. Klicken Sie auf das **+** Symbol, um einen neuen Block hinzuzufügen
3. Suchen Sie nach **"Custom HTML"** oder **"Individuelles HTML"** und wählen Sie diesen Block aus
4. Fügen Sie den kopierten Embed-Code in das Textfeld ein
5. Klicken Sie auf **"Vorschau"** im Block, um das Embed zu prüfen
6. Speichern oder veröffentlichen Sie die Seite

**Mit dem Classic Editor:**

1. Wechseln Sie in den **"Text"**-Modus (nicht "Visuell")
2. Fügen Sie den Embed-Code an der gewünschten Stelle ein
3. Speichern oder veröffentlichen Sie die Seite

| **Hinweis:** Manche WordPress-Themes oder Sicherheits-Plugins blockieren externe Scripts. Falls das Embed nicht funktioniert, wenden Sie sich an Ihren Website-Administrator oder Hosting-Anbieter.


# 8. Code in Webflow einfügen

**Embed auf einer Seite einfügen:**

1. Öffnen Sie Ihr Webflow-Projekt im Designer
2. Navigieren Sie zur gewünschten Seite
3. Ziehen Sie ein **"Embed"**-Element aus dem **Add Panel** (Tastenkürzel: A) an die gewünschte Stelle
4. Doppelklicken Sie auf das Embed-Element
5. Fügen Sie den kopierten Code in das Code-Feld ein
6. Klicken Sie auf **"Save & Close"**
7. Veröffentlichen Sie die Website

**Embed in einer Collection-Seite verwenden:**

Falls Sie das Embed in einem CMS-Template verwenden möchten, fügen Sie das Embed-Element innerhalb der Collection-Struktur ein und passen Sie es entsprechend an.

| **Tipp:** In Webflow können Sie das umgebende Embed-Element mit CSS stylen, um es optimal in Ihr Design einzupassen. Setzen Sie z.B. eine maximale Breite oder zentrieren Sie das Element.




**Häufige Fragen:**

**Kann ich mehrere Projekte auf einer Seite einbetten?**
Ja, fügen Sie einfach mehrere Embed-Codes untereinander ein. Das `<script>`-Tag muss dabei nur einmal am Ende der Seite vorhanden sein.

**Das Embed wird nicht angezeigt – was kann ich tun?**
Prüfen Sie, ob externe Scripts auf Ihrer Website erlaubt sind. Bei Content-Security-Policy-Einschränkungen muss `v2.webmag.io` als erlaubte Quelle hinzugefügt werden.

**Kann ich das Aussehen des Embeds mit CSS anpassen?**
Die grundlegenden Optionen können Sie über die Einstellungen festlegen. Für weitergehende Anpassungen können Sie das umgebende Element mit eigenem CSS stylen.