Einbindung in die Webseite und Vorschau-Share

Die Einbindung macht Ihre edoobox-Angebote öffentlich erreichbar. Je nach Website und Ziel verwenden Sie einen Link, ein iFrame, das WordPress-Plugin oder eine individuelle API-Integration. Das Aussehen der eingebundenen Seiten gestalten Sie im Design Manager mit den Vorlagen und Widgets des verwendeten Designs.

Die Basis-URL und die Zielwebseite für iFrame-Sprünge hängen von den allgemeinen Angebotseinstellungen ab. Prüfen Sie diese Einstellung, bevor Sie Einbindungscodes auf einer produktiven Website verteilen.

AWebseite einbettenBZieladresse auf der eigenen WebseiteCGenerierter iFrame-CodeDAngebote über Tags filternEScroll-To-Top steuern

Einbindungsmethoden wählen

Link: einfachster Weg für E-Mail, Button, QR-Code oder Social-Media-Beitrag. Die Buchung öffnet in der edoobox Standardansicht oder in einem neuen Tab.
iFrame: bettet den Buchungsprozess direkt in Ihre Website ein. Diese Methode ist plattformunabhängig und eignet sich für die meisten Websites.
WordPress-Plugin: nutzt Shortcodes, SEO-Funktionen und WordPress-Integration. Details stehen unter Einbindung mit dem WordPress-Plugin.
API: für individuelle Integrationen mit eigenem Frontend, Reporting oder Speziallogik. Starten Sie unter edoobox API erste Schritte.

Wenn Sie keine Spezialanforderung haben, beginnen Sie mit Konto- oder Kategorie-Einbindung per iFrame oder Link. Einzelne Angebotslinks sind praktisch für Newsletter, müssen aber nach Ablauf des Angebots häufiger ersetzt werden.

Die richtige Ebene im Angebotsbaum wählen

Einbindungscodes werden im Angebotsbaum auf drei Ebenen erstellt: Kontokürzel, Kategorie oder Angebot.

Kontokürzel: zeigt alle veröffentlichten Kategorien und Angebote. Diese Ebene ist robust, weil neue Inhalte automatisch erscheinen.
Kategorie: zeigt eine bestimmte Kategorie und deren veröffentlichte Angebote. Diese Ebene ist für Website-Unterseiten oder Themenbereiche meist die beste Wahl.
Angebot: führt direkt zu einem einzelnen Angebot oder dessen Anmeldung. Geeignet für Kampagnen, Newsletter oder QR-Codes, aber nicht als dauerhafte Programmübersicht.

Für einzelne Angebote bietet Vorschau-Share zusätzlich Links direkt zur Anmeldung und je nach Ansicht einen QR-Code. Kopieren Sie solche Links ausschliesslich aus Vorschau-Share und nicht aus der Browseradresszeile.

Einbindungscodes erstellen

Öffnen Sie den Angebotsbaum.
Klicken Sie mit der rechten Maustaste auf Kontokürzel, Kategorie oder Angebot.
Wählen Sie Vorschau - Share.
Legen Sie Sprache, Label, Tag, Promotion und weitere Einstellungen fest.
Wählen Sie die gewünschte Codeart: Standardlink, iFrame-Code oder Plugin-Shortcode.
Kopieren Sie den Code und fügen Sie ihn in Ihrer Website, Ihrem CMS oder Ihrer E-Mail ein.

Bei einzelnen Angeboten finden Sie zusätzlich Links direkt zur Anmeldung. Kopieren Sie solche Links immer aus Vorschau-Share und nicht aus der Browseradresszeile, damit Sprache, Tracking und Einbindungsparameter korrekt bleiben.

Für einzelne Angebote kann Vorschau-Share je nach Ansicht zusätzlich einen QR-Code zur Standardansicht oder direkt zum Anmeldeformular anzeigen. Verwenden Sie solche QR-Codes vor allem für Flyer, Plakate oder Newsletter-Kampagnen und prüfen Sie sie nach Terminwechseln oder Angebotsablauf erneut.

Link zur Standardansicht öffnet die aktuell ausgewählte Ebene in einem eigenen Browserfenster oder Tab. Dieser Link eignet sich für Buttons, QR-Codes, E-Mail-Signaturen und Social Media.

Einbinden/Einbetten Webseite erzeugt den iFrame-Code. Der iFrame zeigt die Standardansicht der ausgewählten Ebene innerhalb Ihrer Website. Binden Sie das begleitende edoobox JavaScript nur einmal ein, wenn mehrere iFrames auf derselben Seite stehen.

<iframe src="https://app.edoobox.com/..." style="border:none; width:100%; height:600px;">
  <a href="https://app.edoobox.com/...">Übersicht ansehen</a>
</iframe>
<script src="https://cdn-app2.edoobox.com/js/edoobox.iframe.embedded.v2.2.7.min.js"></script>

Einbinden/Einbetten Plugin erzeugt einen WordPress-Shortcode, zum Beispiel [edbs_panel language="de" url="konto/kategorie" label="website" tag="" ]. Verwenden Sie diesen Code nur, wenn das edoobox WordPress-Plugin installiert und verbunden ist.

Der erzeugte Code kann Kompatibilitätsattribute wie seamless enthalten. Übernehmen Sie den aktuellen Code vollständig aus Vorschau-Share. Ersetzen Sie ältere Einbindungen bei einer Überarbeitung durch den neu erzeugten Stand, statt einzelne Bestandteile aus unterschiedlichen Versionen zu kombinieren. Mit data-mobile="Ihr Text" kann auf Smartphones statt des iFrames ein Button angezeigt werden, der zur Standardansicht führt, zum Beispiel data-mobile="Angebot öffnen" >. Fügen Sie das Attribut innerhalb des öffnenden iFrame-Tags ein und behalten Sie die übrigen generierten Attribute bei.

Der aktuell erzeugte Einbettungscode enthält zusätzlich einen direkten Link zum Buchungsportal. Behalten Sie diesen Einstieg beim Einfügen bei: Er hilft, wenn ein Browser oder die Website das eingebettete Portal nicht anzeigen kann. Erzeugen Sie den Code nach grösseren Änderungen an Einbindung oder Zielseite erneut über Vorschau-Share.

Codearten nicht vermischen

Verwenden Sie den Code immer für die passende Umgebung. Ein iFrame-Code gehört in HTML- oder CMS-Bereiche, die HTML erlauben. Ein WordPress-Shortcode funktioniert nur mit installiertem und verbundenem edoobox Plugin. Ein Standardlink ist dagegen überall nutzbar, wo Links erlaubt sind.

Kopieren Sie keine Teilstücke aus verschiedenen Codearten zusammen. Dadurch können Sprache, Label, Tag, Promotionscode, Zielseite oder Tracking verloren gehen. Wenn Sie andere Parameter benötigen, erstellen Sie den Code in Vorschau-Share neu und passen nur den klar bekannten Wert an.

Speichern Sie verwendete Einbindungscodes in Ihrer Website-Dokumentation. Notieren Sie Ebene, Label, Sprache, Tag, Zielseite und Datum der letzten Prüfung. Das hilft später bei Relaunches oder beim Austausch abgelaufener Angebotslinks.

Vorschau-Share kann Links für Facebook und Twitter/X vorbereiten. Diese Links öffnen den jeweiligen Dienst im Teilen-Dialog und übernehmen die aktuell ausgewählte Ebene, zum Beispiel Kategorie oder Angebot.

Zusätzlich können kleine Social-Elemente per iFrame oder Shortcode eingebunden werden. Prüfen Sie vor dem Teilen Titel, Beschreibung und Vorschaubild Ihrer Angebotsseite. Für Social-Media-Vorschauen sind OpenGraph- und SEO-Meta-Tags relevant.

Label, Sprache, Tags und Promotion

Ein Label hilft, Buchungen einer Quelle zuzuordnen, zum Beispiel Website, Newsletter, Facebook oder Partnerseite. Verwenden Sie kurze, einheitliche Labels in Kleinbuchstaben. Labels können zusätzlich für automatische E-Mail-Benachrichtigungen genutzt werden, wenn passende Vorlagen eingerichtet sind.

Mit der Sprache definieren Sie die Standardsprache des Einbindungscodes. Wenn keine Sprache gesetzt ist, kann die Browsersprache der buchenden Person greifen, sofern die Sprache in edoobox aktiviert ist. Aktivieren Sie im Design Manager bei Bedarf eine Sprachauswahl im Header, damit Teilnehmende selbst wechseln können.

Tags filtern Angebote innerhalb der gewählten Ebene. Das ist hilfreich, wenn eine Kategorie intern viele Angebote enthält, auf einer Website-Seite aber nur ein Ausschnitt erscheinen soll. Die Grundlagen stehen unter Ein Angebot mit Tags versehen.

Mit einer Promotion können Sie einen Promotionscode direkt in den Link integrieren. Kombinieren Sie Promotionen nur mit passenden Gültigkeitsregeln, damit der Rabatt für die richtige Zielgruppe gilt. Details stehen unter Promotionskampagnen und Gutscheine.

Anwendungsbeispiel: Website-Unterseite mit Tag und Label

Eine Sprachschule erstellt auf ihrer Website eine Seite für Onlinekurse. Sie öffnet Vorschau-Share auf Kontoebene, setzt das Label website-online, wählt die Sprache Deutsch und ergänzt den Tag online. Danach wird der iFrame-Code auf der Unterseite eingefügt und mit einer Testbuchung geprüft.

Beispiel: Website, Buchungsportal und CRM verbinden

Eine Organisation pflegt ihre Informationsseiten im eigenen CMS, führt Buchungen in edoobox und möchte bestätigte Buchungen in ihrem CRM zuordnen. Legen Sie zuerst fest, welche Aufgabe jedes System übernimmt.

Erstellen Sie in Vorschau-Share einen Kategorie- oder Angebotslink beziehungsweise die gewünschte Einbettung. Verwenden Sie ein einheitliches Label wie website für diesen Einstieg.
Prüfen Sie die Basis-URL der Website für die iFrame-Vorschau. Kontrollieren Sie von der echten Website aus Angebotsdetails, Anmeldung, Zahlung und Abschluss sowie den vorgesehenen Rückweg zu Ihren Informationsseiten.
Pflegen Sie die benötigten Rechts- und Informationslinks dort, wo sie tatsächlich angezeigt werden: auf Ihrer Website und im verwendeten edoobox-Design. Für die gemeinsame Einwilligungsverwaltung beachten Sie Tracking, iFrame und Einwilligung.
Richten Sie die CRM-Übergabe separat über eine tatsächlich verfügbare Integration oder Automation ein. Ein eingebettetes Portal oder ein Buchungslabel allein überträgt noch keine Daten in ein beliebiges CRM.
Verwenden Sie für die Zuordnung Buchungs- und Personenkennungen und legen Sie den Umgang mit Änderungen und Stornos fest. Der Anwendungsfall Buchungen per API synchronisieren erklärt den periodischen Abgleich und die Wiederaufnahme nach einem Ausfall.

Vergleichen Sie nach einer kontrollierten Probebuchung die gespeicherte Buchung in edoobox und den zugehörigen CRM-Datensatz. Prüfen Sie einen erneuten Import derselben Buchung und eine spätere Stornierung. Ein erfolgreicher Buchungsabschluss bestätigt die CRM-Übergabe erst, wenn auch das Zielsystem den erwarteten Stand zeigt.

Scroll-To-Top und mobile Darstellung

Im iFrame kann edoobox bei Klicks automatisch an den oberen Rand des iFrames scrollen. Auf langen One-Page-Websites kann das störend wirken, weil Besucherinnen und Besucher nach jedem Schritt neu zur Einbindung scrollen müssen. Deaktivieren Sie Scroll-To-Top, wenn Ihre Website bereits eigenes Scrollverhalten besitzt.

Testen Sie die Einbindung auf Smartphone und Tablet. Wenn der iFrame auf mobilen Seiten zu klein oder schwer bedienbar ist, verwenden Sie den mobilen Button über data-mobile oder verlinken Sie auf die Standardansicht.

RSS-Feeds und Angebotsscroller

Neben Link, iFrame, Plugin und API gibt es ältere öffentliche Ausgaben: RSS-Angebotsfeed und Angebotsscroller. Beide lesen aus veröffentlichten Angeboten und sind für einfache Website-Ausgaben gedacht. Für neue individuelle Integrationen ist die edoobox API meist robuster.

Der RSS-Feed enthält öffentliche Angebote in aktivierten Sprachen. Er eignet sich, wenn externe Systeme nur Titel, Anbieter, Veröffentlichungszeitpunkt und Link benötigen.

Der Angebotsscroller zeigt eine begrenzte Anzahl kommender öffentlicher Angebote als schmalen Website-Baustein. Er kann Höhe, Breite, Farben, Geschwindigkeit, Wartezeit und Zielverhalten nutzen. Die Statusfarben folgen dem Angebotsstatus; freie Plätze werden aus Kapazität und Buchungen berechnet.

Mehrere iFrames und Spezialfälle

Wenn mehrere iFrames auf derselben Website-Seite stehen, geben Sie jedem iFrame ein eigenes Label und binden Sie das edoobox JavaScript nur einmal ein, vorzugsweise nach dem letzten iFrame. Zu viele iFrames auf einer Seite können Ladezeit, Fokusverhalten und mobile Bedienbarkeit verschlechtern.

Erstellen Sie für jede Website-Unterseite den Code neu, statt Labels oder Tags manuell zu kopieren. So bleiben Sprache, Label, Tag, Promotion und Zielpfad zusammen und spätere Auswertungen sind verständlicher.

Öffnen Links innerhalb eines iFrames in einem höheren Frame, landet die Person in der Standardansicht. Das kann gewünscht sein, wenn Angebotsdetails mehr Platz benötigen, sollte aber in der Website getestet werden.

Wenn Sie eine Unterseite für Angebotsdetails verwenden, achten Sie auf korrekte Ziel- oder Root-Einstellungen. Das ist besonders wichtig bei WordPress-Shortcodes und Startseiten, auf denen nur ein Ausschnitt des Programms sichtbar ist.

Häufige Fehlerquellen

Falsche Ebene: Ein einzelnes Angebot wurde eingebunden, obwohl eine Kategorieübersicht gemeint war.
Abgelaufenes Angebot: Ein Angebotslink führt nicht mehr zum gewünschten neuen Termin.
Fehlendes JavaScript: Das edoobox iFrame-Skript wurde entfernt oder mehrfach ungünstig eingebunden.
Website-Cache: Der Code wurde geändert, aber die Website liefert noch die alte Version aus.
Falsche Sprache: Die Sprache im Code passt nicht zu den aktivierten Sprachen oder zur Website.
Tag ohne Treffer: Der gesetzte Tag ist keinem veröffentlichten Angebot dieser Ebene zugeordnet.
Promotion ohne Gültigkeit: Der Link enthält einen Promotionscode, aber Angebot, Person oder Zeitraum erfüllen die Bedingungen nicht.

Sicherheitsprüfung nur im mobilen iFrame eingrenzen

Wenn eine Sicherheitsprüfung nur auf dem Smartphone oder nur innerhalb Ihrer Website nicht abgeschlossen werden kann, vergleichen Sie denselben Buchungsweg in klar getrennten Aufrufen. Aus dem Symptom allein lässt sich keine bestimmte Browser-, Cookie- oder Sicherheitsdienst-Ursache ableiten.

Erstellen Sie für das betroffene Angebot beziehungsweise die Kategorie den aktuellen öffentlichen Standardlink aus Vorschau-Share. Verwenden Sie dieselbe Sprache und Ebene wie in der Website-Einbettung.
Öffnen Sie diesen Link auf demselben Mobilgerät direkt in einem eigenen Browser-Tab. Notieren Sie, ob die Sicherheitsprüfung dort erscheint und regulär abgeschlossen werden kann.
Öffnen Sie anschliessend die tatsächliche Website mit dem eingebetteten Portal und vergleichen Sie denselben Schritt. Prüfen Sie, ob die Website den aktuellen vollständigen Einbettungscode ausliefert und das begleitende Skript nur einmal eingebunden ist.
Vergleichen Sie bei Bedarf einen zweiten aktuellen Browser beziehungsweise Desktop und einen zweiten üblichen Netzwerkzugang. Halten Sie fest, welche Kombinationen betroffen sind; ein Unterschied ist ein Diagnosehinweis und noch kein Beweis für eine Ursache.
Wenn der direkte öffentliche Aufruf funktioniert, bieten Sie den regulären Direktlink oder den vorgesehenen mobilen Button als Ausweichweg an. Die normale Sicherheitsprüfung des Zielportals bleibt bestehen.
Bleibt der Vorgang gestört, geben Sie die reproduzierbaren Schritte an den Support weiter.

Zur Meldung gehören Zeitpunkt mit Zeitzone, Betriebssystem- und Browserversion, öffentliche Website-Adresse, betroffene Angebotsebene, Ergebnis direkt/eingebettet sowie eine angezeigte Fehler- oder Challenge-Referenz. Ergänzen Sie einen anonymisierten Screenshot und den Vergleich aus einem anderen Browser oder Netz, soweit vorhanden. Passwörter, Einmalcodes, API-Schlüssel und persönliche Sitzungslinks gehören nicht in die Meldung.

Der Diagnoseleitfaden hilft, die beobachteten Unterschiede nachvollziehbar zu melden.

Einbindung testen

Code auf einer nicht öffentlichen Testseite einfügen.
Konto-, Kategorie- und Angebots-Ebene prüfen.
Sprache, Label, Tag und Promotion mit einer Testbuchung kontrollieren.
Desktop, Tablet und Smartphone testen.
Links, Details, Anmeldung, Zahlung, Abschlussseite und E-Mail-Bestätigung prüfen.
Nach Änderungen am Design Manager die Website neu laden und Cache beachten.

Anwendungsbeispiel: Kategorie auf Webseite einbetten

Eine Organisation hat eine Website-Unterseite für „Weiterbildungen“. Im Angebotsbaum wird die Kategorie „Weiterbildungen“ geöffnet, Vorschau-Share gestartet, Sprache Deutsch und Label website gesetzt. Der iFrame-Code wird in die Unterseite eingefügt und danach mit einer Testbuchung geprüft.

Nach Änderungen erneut testen

Nach Änderungen an Kategorie, Design, Sprache, Tags oder Einbindungscode sollte die Webseite neu getestet werden. Prüfen Sie Desktop, Smartphone, Scrollverhalten, Buchungsabschluss und ob Detailseiten am erwarteten Ort geöffnet werden.