Skip to main content
Skip table of contents

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».

  1. Rechtsklick auf das definierte Kürzel

  2. Vorschau – Share wählen

  3. Die Eigenschaften vervollständigen

  4. Auf Einbinden/Einbetten Webseite klicken

  5. Den generierten Code kopieren und in die Webseite einfügen

Info: Integration in CMS Systemen

Beachte, dass ü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:

CODE
<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>

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 als iFrame einbinden möchten, kann der Code auf jeder Ebene vom Angebotsbaum erstellt werden.

Vorschau - Share

Vorgehen:

  1. Kategorie/Angebot markieren

  2. Rechtsklick auf die Kategorie/das Angebot

  3. Vorschau – Share wählen

  4. Die Eigenschaften vervollständigen

  5. Auf Einbinden/Einbetten Webseite klicken

  6. 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.

Sprache Auswählen

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: Ein Angebot mit Tags versehen).

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.

Links

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:

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

data-mobile

Anstelle des iFrames wird auf dem Smartphone ein Button mit Ihrem individuellen Text dargestellt, der Sie danach auf die Standard Ansicht Ihrer Angebote führen wird.

Schreibweise: data-mobile=“Ihr Text“ >  (ein Leerzeichen MUSS vorhanden sein zwischen “ und >)

 

Verwandte Anleitungen

Stichwörter für diese Anleitung

iFrame ¦ Einbinden ¦ Scroll-To-Top ¦ Tag ¦ Label

JavaScript errors detected

Please note, these errors can depend on your browser setup.

If this problem persists, please contact our support.