iFrame Code erstellen und in die Webseite einbinden

Die Integration des edoobox Buchungstools in Ihre Webseite kann auf verschiedenste Arten ausgeführt werden. Entweder als iFrame, als App oder Sie lösen es mit der API.

Hier finden Sie Tipps zum Einbinden des iFrames in die eigene Webseite. Das edoobox Buchungstool kann sehr einfach in die eigene Website eingebunden werden. edoobox generiert dazu den Code und die Links in der Vorschau-Dialogbox.

Tipp (für Entwickler und Profis)

Mit der API können Sie alle Angaben zu Ihren Angeboten aus der edoobox-Datenbank beziehen und in Ihrer Webseite anzeigen. Dies bringt Ihnen zusätzliche Flexibilität in der Darstellung und SEO-Optimierung.

iFrame über alle Angebote EMPFEHLUNG

Möchten Sie ein iFrame über alle Angebote erstellen, öffnen Sie in der Hauptnavigation den «Angebotsbaum».

Rechtsklick auf das definierte Kürzel
Vorschau – Share wählen
Die Eigenschaften vervollständigen
Auf Einbinden/Einbetten Webseite klicken
Den generierten Code kopieren und in die Webseite einfügen

Info: Integration in CMS Systemen

Beachte das über die iFrame Integration edoobox in jedes CMS (z. B. Joomla-, WordPress-, Jimdo- und Typo3-Websites.) und Intranet einfach integriert werden kann.

Der generierte iFrame-Code sieht prinzipiell wie folgt aus:

<iframe src=“https://app1.edoobox.com/de/MSW/?edref=mailing14&edtag=Indoor“ name=“edooboxFrame_mailing14″ id=“edoobox_mailing14″ style=“border:none; width:100%; height:600px;“ frameborder=“0″ seamless data-scrolltop><a href=“https://app1.edoobox.com/de/MSW/?edref=mailing14&edtag=Indoor“>Übersicht anzeigen</a></iframe><script type=“text/javascript“ src=“https://app1.edoobox.com/js/edoobox.iframe.embedded.v2.2.js“></script>

CODE

Info: Beispiel von einer Einbindung

Auf unseren Demo-Webseiten zeigen wir, wie individuell iFrames eingebunden werden können.
Link: (Demo Website)

iFrame pro Kategorie/Angebot

Wenn Sie pro Kategorie oder ein einzelnes Angebot ein iFrame einbinden möchten, kann der Code auf jeder Ebene vom Angebotsbaum erstellt werden.

Vorgehen:

Kategorie/Angebot markieren
Rechtsklick auf die Kategorie/das Angebot
Vorschau – Share wählen
Die Eigenschaften vervollständigen
Auf Einbinden/Einbetten Webseite klicken
Den generierten Code kopieren und in die Webseite einfügen

Warnung: mehrerer iFrames auf einer Seite

Wenn Sie mehr als nur ein iFrame auf der gleichen Seite einfügen möchten, geben Sie jedem iFrame einen anderen Label-Text, und fügen Sie den JavaScript Code nur einmalig unterhalb des letzten iFrames ein.

Info: Angepasste URL

Die URL zum Standardansicht-iFrame Ihres edoobox-Kontos heisst ab sofort app1.edoobox.com/IhrKürzel/ (nicht mehr www.edoobox.com/iframe/IhrKürzel/ ).

Einstellungen

Label:

Jedem iFrame auf Ihrer Website können Sie ein Label vergeben, so sehen Sie später, woher die Buchung stammt. Das Label unbedingt in Kleinbuchstaben eintragen.

Sprache des iFrames

Das Anmeldeformular erscheint in der eingestellten Browsersprache des buchenden Teilnehmers, Deutsch (de), Französisch (fr) oder Englisch (en), sofern Sie bei der Sprache keine Auswahl getroffen haben. Im Menü-Balken ganz oben kann der Teilnehmer die Sprache auswählen, sofern dies von Ihnen im Design-Manager aktiviert wurde.

Info: Spracheinstellungen

Wir empfehlen, in den edoobox Einstellungen die Sprachen einzugrenzen, und nur die von Ihnen gewünschten Sprachen zu aktivieren.

Wenn Sie nun ein iFrame, unabhängig von der eingestellten Browsersprache, immer in einer gewünschten Sprache anzeigen möchten, z. B. in Deutsch, wählen Sie die gewünschte Sprache im Sprachfeld A aus.

Tipp: Sprache im iFrame umstellen

Aktivieren Sie im Design Manager unter Seiten Header bei Navigations Menü die Sprachen Auswahl, Ihre Teilnehmer haben so die Möglichkeit die Sprache selbst einzustellen.

Tag Filter:

Jedes Angebot kann mit Tags versehen werden. Mit dem Tag Filter können Kategorien übergreifend Angebote angezeigt werden. Z. B. können über alle Kategorien hinweg die Outdoor-Angebote im iFrame angezeigt werden (siehe Anleitung Tagging von Angeboten).

Scroll-To-Top:

Bei jedem Klick im iFrame wird der Fenster-Inhalt ganz noch oben verschoben, dies eignet sich nicht für Single-Page Seiten oder lange Inhaltsseite da der Benutzer sonst nach jedem Klick das iFrame suchen muss. Dieser Scroll Effekt kann über die Funktion Scroll-To-Top deaktiviert werden.

Google Tag Manager:

Soll der Google Tag Manager in diesem iFrame verwendet werden? Aktivieren Sie diese Option nur, wenn Sie den Google Tag Manager verwenden und den Container von edoobox in diesen importiert haben!

Links auf der Website / Anzeige / Flyer

Über die Option Vorschau – Share im gewählten Bereich kann ein Link auf das Angebot generiert werden. Hierzu die Option «Link zur Standardansicht» B wählen.

Falls der Anmeldeprozess von einem Angebot gleich geöffnet werden soll, kann die Auswahl «Link zum Anmeldeformular» gewählt werden. Bitte nicht den Link aus der Browserzeile kopieren, sondern den generierten Link der unter «Link zum Anmeldeformular» C angezeigt wird.

Begriffserklärung

seamless

CSS-Eigenschaften werden dadurch direkt in den Frame übernommen und die Links öffnen korrekt im übergeordneten Fenster. Außerdem passt sich das iFrame mit dem Attribut der Höhe des Inhalts an. Linien sowie Scroll Balken werden standardmässig nicht angezeigt. Wie bei allen neuen Errungenschaften im Web gibt es Dinge zu beachten und Kompromisse einzugehen:

Es wird nur https://, nicht aber file:// unterstützt
Kein einziger Browser verfügt derzeit über Support
Nur Google Chrome Canary (Version 22 und höher) unterstützt derzeit das Attribut
Die Implementierung der anderen Browser kann als oberflächlich bezeichnet werden

Um schon jetzt die Vorteile des seamless-Attributes zu nutzen, fügen Sie den von uns bereits vorgegebenen JavaScript-Code direkt nach dem iFrame-Code ein:

<script type=“text/javascript“ src=“https://app1.edoobox.com/js/edoobox.iframe.embedded.v2.2.js“></script>