iFrame in TYPO3 Website einbinden

Sie können den edoobox Buchungsprozess in TYPO3 einbinden, indem Sie den iFrame-Code aus edoobox kopieren und auf einer TYPO3 Seite als HTML-Inhalt einfügen.

TYPO3 Seite erstellen

Erstellen Sie in TYPO3 eine neue Seite oder öffnen Sie die bestehende Seite, auf der Angebote erscheinen sollen.
Geben Sie der Seite einen verständlichen Titel, zum Beispiel Unsere Kurse.
Fügen Sie an der gewünschten Stelle das Inhaltselement Plain HTML / Reines HTML ein, sofern es für Ihre Redaktionsrolle freigegeben ist.

iFrame-Code aus edoobox kopieren

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

Fügen Sie den kopierten Code im TYPO3 Inhaltselement ein und speichern Sie die Seite. Prüfen Sie danach auf der öffentlichen Website, ob Angebote sichtbar sind und ob Höhe, Breite und Mobilansicht passen.

Wenn Sie den Inhalt einer bestimmten Kategorie zeigen, sollten dort mindestens ein veröffentlichtes Angebot und ein passender Zeitraum vorhanden sein.

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 typo3-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 TYPO3 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: Weiterbildungsseite in TYPO3

Eine Bildungsinstitution pflegt ihre Website in TYPO3. Auf der Seite Weiterbildungen fügt sie den edoobox iFrame-Code der Kategorie Aktuelle Kurse ein. Interessierte sehen dadurch nur die relevanten Kurse und können direkt buchen.

Anwendungsbeispiel: Mehrsprachige Kampagnenseite in TYPO3

Eine Organisation erstellt für eine Frühlingskampagne eine eigene TYPO3-Seite. Im Share-Dialog wählt sie die französische Sprache, den Tag Outdoor, einen zeitlich begrenzten Promotionscode und das Label fruehling-typo3. 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.

Gespeicherten Inhalt und Seiten-Cache kontrollieren

Öffnen Sie nach dem Speichern das HTML-Inhaltselement erneut und vergleichen Sie den vollständigen Code mit Vorschau / Share. Prüfen Sie anschliessend die veröffentlichte Seite, deren Sichtbarkeitszeitraum und gegebenenfalls den TYPO3-Seiten-Cache. Wenn Ihre Redaktionsrolle kein reines HTML einfügen darf, lassen Sie ein geeignetes Element durch die TYPO3-Administration bereitstellen.

Passendes TYPO3-Inhaltselement verwenden

Die offizielle TYPO3-Hilfe zum HTML-Inhaltselement beschreibt «Plain HTML». Ein normaler Rich-Text-Absatz kann Skripte oder iFrame-Attribute verändern. Lassen Sie das passende Element bei Bedarf durch Ihre TYPO3-Administration bereitstellen.

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.