iFrame in WordPress Website einbinden

Sie können edoobox in WordPress entweder mit dem edoobox WordPress Plugin oder mit einem iFrame einbinden. Diese Anleitung beschreibt die iFrame-Variante. Sie eignet sich, wenn Sie eine bestimmte Kategorie, ein einzelnes Angebot oder eine einfache Angebotsübersicht direkt in einer WordPress Seite anzeigen möchten.

Für die Plugin-Variante verwenden Sie die separate Anleitung Einbindung mit dem WordPress Plugin.

WordPress Seite vorbereiten

Öffnen Sie in WordPress die Seite, auf der die edoobox Angebote erscheinen sollen.
Erstellen Sie bei Bedarf eine neue Seite, zum Beispiel Kurse buchen.
Fügen Sie im WordPress Editor einen Block Individuelles HTML ein.

iFrame-Code in edoobox kopieren

Öffnen Sie in edoobox das Hauptverzeichnis, eine Kategorie oder ein einzelnes Angebot. Wählen Sie Vorschau / Share, öffnen Sie den Bereich Einbinden und kopieren Sie den iFrame-Code.

Wählen Sie bewusst den richtigen Einstiegspunkt: Das Hauptverzeichnis zeigt eine breite Übersicht, eine Kategorie zeigt nur ausgewählte Angebote und ein Angebotslink führt direkt zu einem bestimmten Angebot.

Code in WordPress einfügen

Fügen Sie den iFrame-Code in den HTML-Block ein und aktualisieren Sie die WordPress Seite. Prüfen Sie danach die veröffentlichte Seite im Browser. Achten Sie auf Höhe, Breite, Scrollverhalten und die Darstellung auf Smartphones.

Wenn keine Angebote angezeigt werden, kontrollieren Sie in edoobox, ob die Angebote veröffentlicht sind und ob Zeitraum, Kategorie und Status zur Anzeige passen.

Link und Einbettung gezielt konfigurieren

Kopieren Sie immer den von Vorschau / Share erzeugten Link oder iFrame-Code. Eine Adresse aus der Browserzeile kann einen vorübergehenden Zustand enthalten und ist nicht als dauerhafter Einbettungslink gedacht. Für ein einzelnes Angebot können Sie zwischen Standardansicht und direktem Anmeldeformular wählen; bei Kategorien und dem Hauptverzeichnis steht die Übersichtsansicht im Vordergrund.

Im Share-Dialog können Sie den erzeugten Code zusätzlich auf den Einsatzzweck abstimmen:

Label: Kennzeichnet die Quelle einer Buchung, zum Beispiel wordpress-kurse. Verwenden Sie bei mehreren Einbindungen eindeutige Labels.
Sprache: Startet automatisch oder in einer ausgewählten aktiven Buchungssprache.
Tags: Öffnet die Einbindung bereits mit einer passenden Angebotsauswahl.
Promotion: Übergibt einen ausgewählten Promotionscode direkt über den Link. Teilen Sie solche Links nur mit der vorgesehenen Zielgruppe.
Scroll-to-top: Bringt die umgebende Seite bei einem Schrittwechsel wieder an den Anfang der Einbindung.

Wenn im Share-Dialog kein korrekter Link zu Ihrer Website erscheint, hinterlegen Sie zuerst unter Einstellungen > Angebote die Basis-URL der Seite, auf der das iFrame eingebunden ist.

Darstellung und vollständigen Buchungsweg prüfen

Fügen Sie den vollständigen generierten Code in ein HTML- oder Einbettungselement ein. Er enthält das iFrame und das edoobox Skript für die eingebettete Darstellung. Wird nur der innere Link übernommen oder entfernt WordPress Skriptbestandteile, können Höhe und Navigation anders reagieren als in der Vorschau.

Prüfen Sie nach jeder Änderung Desktop und Smartphone sowie den gesamten Ablauf: Angebot öffnen, Formular ausfüllen, Bedingungen akzeptieren, Zahlungsseite aufrufen und Abschlussseite anzeigen. Kontrollieren Sie ausserdem, ob Sprache, Tagfilter, Promotion und Label wie geplant übernommen werden.

Anwendungsbeispiel: Seminarübersicht in WordPress

Ein Anbieter erstellt in WordPress die Seite Seminare. In edoobox kopiert er den iFrame-Code der Kategorie Weiterbildung und fügt ihn in den HTML-Block ein. Besucherinnen und Besucher sehen dadurch nur die aktuellen Weiterbildungsangebote und können direkt buchen.

Anwendungsbeispiel: Mehrsprachige Kampagnenseite in WordPress

Eine Organisation erstellt für eine Frühlingskampagne eine eigene WordPress-Seite. Im Share-Dialog wählt sie die französische Sprache, den Tag Outdoor, einen zeitlich begrenzten Promotionscode und das Label fruehling-wordpress. Nach dem Einfügen testet sie eine vollständige Buchung auf Smartphone und Desktop und prüft in edoobox, ob die Quelle eindeutig erkennbar ist.

HTML-Recht und aktuelle Editoransicht berücksichtigen

Die aktuelle WordPress-Dokumentation beschreibt im HTML-Block getrennte Bereiche für HTML, CSS und JavaScript. Die Skriptfunktionen setzen das Recht unfiltered_html voraus. Ohne diese Freigabe können iFrame- oder Skriptteile beim Speichern entfernt werden. Lassen Sie die Einbindung durch die verantwortliche WordPress-Administration ausführen und kontrollieren Sie nach dem Speichern die veröffentlichte Seite.

HTML-Code nach dem Speichern kontrollieren

Verwenden Sie den Block Individuelles HTML / Custom HTML und kontrollieren Sie den gespeicherten Code anschliessend nochmals. Siehe WordPress: Custom HTML. Wenn Ihre Installation iFrame- oder Skriptteile entfernt, lassen Sie das zulässige Einbettungsverfahren durch die Website-Administration klären.

Direktlink und Tracking V2

Der aktuelle edoobox-Code ergänzt einen Direktlink zum Buchungsportal als Ausweichmöglichkeit, wenn die eingebettete Ansicht nicht angezeigt wird. Übernehmen Sie diesen Link mit dem generierten Code und prüfen Sie ihn auf der veröffentlichten Website.

Für Tracking V2 benötigt Ihre Website zusätzlich die Verbindung zwischen iFrame, Website-Kontext und Einwilligung. Ein vollständig sichtbares Buchungsformular bestätigt noch keine erfolgreiche Tracking-Einrichtung.