iFrame in Wix Website einbinden

In Wix können Sie edoobox über ein eingebettetes HTML-Element anzeigen. Besucherinnen und Besucher bleiben auf Ihrer Website und können die eingeblendeten Angebote direkt buchen.

Wix Seite vorbereiten

Öffnen Sie Ihre Website im Wix Editor.
Erstellen Sie eine neue Seite oder öffnen Sie die Seite, auf der Angebote erscheinen sollen.
Wählen Sie im Wix Editor Elemente hinzufügen → Code einbetten → HTML einbetten. Je nach Sprache kann der Bereich als «Beliebte Einbettungen» bezeichnet sein.

iFrame-Code in edoobox kopieren

Öffnen Sie in edoobox das Hauptverzeichnis, eine Kategorie oder ein einzelnes Angebot. Über Vorschau / Share und Einbinden kopieren Sie den passenden iFrame-Code.

Wählen Sie bewusst, was angezeigt werden soll: das gesamte Konto, nur eine Kategorie oder ein einzelnes Angebot.

Code in Wix einfügen

Öffnen Sie im Wix Element die Einstellung für HTML-Code und fügen Sie den kopierten iFrame-Code ein. Danach können Sie das Element vergrössern, verschieben und an Ihre Seite anpassen.

HTML-Einbettung im klassischen Wix-Editor mit Markierungen H, I und J — Im klassischen Wix-Editor öffnen Sie die HTML-Eingabe, fügen den vollständigen Einbettungscode ein und übernehmen ihn. Wix Studio und andere Editoransichten können anders aussehen.
H
HTML-Code-Eingabe des Elements öffnen
I
Vollständigen edoobox-Einbettungscode einfügen
J
Eingabe auf das Element anwenden

Veröffentlichen Sie die Seite erst, nachdem Sie die Darstellung auf Desktop und Smartphone geprüft haben.

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 wix-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 Wix 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: Buchbare Workshops auf einer Wix Seite

Eine Kreativschule betreibt ihre Website mit Wix. Sie erstellt eine Seite Workshops, kopiert in edoobox den iFrame-Code der passenden Kategorie und fügt ihn in Wix ein. Neue Workshop-Termine erscheinen dadurch direkt auf der Website, sobald sie in edoobox veröffentlicht sind.

Anwendungsbeispiel: Mehrsprachige Kampagnenseite in Wix

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

Tracking bei verschachtelten Wix-Rahmen prüfen

Ein Wix-HTML-Element ist selbst ein iFrame. Der darin eingefügte edoobox-Code kann damit in einem weiteren Rahmen liegen. Die allgemeine V2-Helper-Anleitung setzt jedoch Zugriff auf das konkrete edoobox-iFrame und dessen unmittelbare Elternseite voraus. Eine Registrierung nur anhand des sichtbaren Wix-Elements bestätigt diesen Datenfluss nicht.

Lassen Sie vor dem Tracking-Livegang prüfen, auf welcher tatsächlich kontrollierbaren Seite die Helper und der Consent-Callback laufen. Ist die benötigte Einbindung im verwendeten Wix-Editor nicht möglich, verwenden Sie einen direkten Buchungslink und testen Sie dessen Consent-/Tracking-Verhalten separat. Die Buchungsanzeige kann trotzdem funktionieren.

Wix-Rahmen und mobile Höhe

Wix lädt HTML-Einbettungen selbst in einem Rahmen. Prüfen Sie deshalb neben dem edoobox-Inhalt auch die Grösse des Wix-Elements in Desktop- und Mobilansicht; eine automatische Anpassung der äusseren Wix-Fläche ist dadurch nicht garantiert. Verwenden Sie ausschliesslich HTTPS-Adressen. Die offizielle Wix-Anleitung zu HTML- und Website-Einbettungen erklärt Element, Codefeld und Grösseneinstellungen.

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.